javascript - 为什么@require-ing jQuery 在带有@run-at document-start 的脚本中抛出错误？

Question

我在使用 @run-at document-start 指令时遇到问题。我敢肯定这归结为缺乏经验，但就我的生活而言，我无法弄清楚这一点。

除了一些其他指令，这是整个脚本。

// @require https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js  
// @run-at  document-start

和FF中的错误

Error: document.documentElement is null  
Source File: file:///C:/Users/---/Test-1/jquery.js  
Line: 4899

我看到并理解了这个问题，我只是不确定要采取什么步骤才能让我的脚本尽可能接近文档启动，但仍然有 @required 脚本功能正确。
对我的第一篇文章有​​点紧张...请放轻松 :)

火狐 12
Greasemonkey 0.9.20

Answer 1

是的，这是使用//@run-at document-start 的缺点。 @required 试图操纵 DOM 的脚本可能会抛出错误。 (但是许多 @required 库都很好，因为它们只是加载稍后由您的代码激活的工具)。

您可以通过使用 @resource、eval() 和监控 readyState 来解决这个问题。像这样:

// ==UserScript==
// @name        _Using DOM-manipulating libraries with run-at start
// @include     http://YOUR_SERVER/YOUR_PATH/*
// @run-at      document-start
// @resource    jQ_src https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js
// ==/UserScript==

var jQ_src  = GM_getResourceText ("jQ_src");

window.addEventListener ("readystatechange", FireWhenReady, true);

function FireWhenReady () {
    this.fired  = this.fired || false;

    if (    document.readyState != "uninitialized"
        &&  document.readyState != "loading"
        &&  ! this.fired
    ) {
        this.fired = true;
        eval (jQ_src);
        $(document).ready (DoStuff);
    }
}

function DoStuff () {
    //--- Where this next paragraph appears can give you an idea of the delays involved...
    $("body").append ('<p style="background:yellow;">Hello from quick-start jQuery!</p>');
}

---

重要!对于像 jQuery 这样的库，使用 @run-at document-start 没有多大意义，因为 jQuery 不会让你做任何事情，直到 $(document).ready() 无论如何，这是 Greasemonkey 默认触发的时间。

尽早加载 jQuery 不会给您带来任何好处，因为那时您必须明确使用 $(document).ready()(或 the shortcut forms 之一)。您可能出于其他原因使用 @run-at document-start，然后可能还想稍后使用 jQuery。