来自Greasemonkey的jQuery路径点

Question

我试图使用jQuery Waypoints插件从一个Greasemonkey脚本，似乎不能得到甚至基本的测试工作。有人知道路点不能从用户脚本工作的原因吗?

@require行:

// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// @require     http://cdn.jsdelivr.net/jquery.waypoints/2.0.2/waypoints.min.js

脚本:

$('div.container').waypoint(function(){
    alert('you hit bottom');
},{ offset: 'bottom-in-view' });

有趣的是，如果这个带有"container"类的div存在，脚本将中断，并且该语句之外的代码将不会运行。如果我更改选择器以找到一些不存在的元素，则脚本的其余部分运行良好。

有人知道这是怎么回事吗?我的头在墙上撞。谢谢!

p。我还尝试将Waypoints插件代码直接粘贴到脚本中(而不是使用CDN)，并且我得到了相同的结果。

Answer 1

不幸的是，该扩展编写得不如许多其他jQuery扩展好。它使用this和jQuery，让我们说，"不幸的"方式。这意味着即使设置了@grant none，它也会从用户脚本范围崩溃。

对于像这样的库，您的选项是:

• 查找更好的库(推荐)

• 如果不太复杂，你可以自己找一个更好的方法来编写。

• 如果页面不使用jQuery，或者使用兼容版本的jQuery，那么你可以通过Script Injection使用这些扩展。看到下面。

• 如果页面使用不兼容的jQuery版本，您可能无法在不破坏页面的情况下做任何事情。有时是可行的，但这是另一个问题。

---

页面已经使用兼容版本的jQuery的情况:

你只需要注入路径点和任何使用路径点的代码。请勿使用@require。
像这样:

// ==UserScript==
// @name        _YOUR_SCRIPT_NAME
// @include     http://YOUR_SERVER.COM/YOUR_PATH/*
// @grant       GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/
function GM_main () {
    $('div.container').waypoint(function(){
        alert('you hit bottom');
    },{ offset: 'bottom-in-view' });
}
addJS_Node (
    null,
    "http://cdn.jsdelivr.net/jquery.waypoints/2.0.2/waypoints.min.js",
    null,
    function () {addJS_Node (null, null, GM_main); }
);
//-- This is a standard-ish utility function.
function addJS_Node (text, s_URL, funcToRun, runOnLoad) {
    var D                                   = document;
    var scriptNode                          = D.createElement ('script');
    if (runOnLoad) {
        scriptNode.addEventListener ("load", runOnLoad, false);
    }
    scriptNode.type                         = "text/javascript";
    if (text)       scriptNode.textContent  = text;
    if (s_URL)      scriptNode.src          = s_URL;
    if (funcToRun)  scriptNode.textContent  = '(' + funcToRun.toString() + ')()';
    var targ = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
    targ.appendChild (scriptNode);
}

---

页面根本不使用jQuery的情况:

你需要注入jQuery，然后链接Waypoints的注入和任何使用Waypoints的代码。不要使用@require。
像这样:

// ==UserScript==
// @name        _YOUR_SCRIPT_NAME
// @include     http://YOUR_SERVER.COM/YOUR_PATH/*
// @grant       GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/
function GM_main () {
    $('div.container').waypoint(function(){
        alert('you hit bottom');
    },{ offset: 'bottom-in-view' });
}
//-- Add jQuery.
addJS_Node (
    null,
    "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js",
    null,
    addWaypointsAndFireMain
);
function addWaypointsAndFireMain () {
    addJS_Node (
        null,
        "http://cdn.jsdelivr.net/jquery.waypoints/2.0.2/waypoints.min.js",
        null,
        function () {addJS_Node (null, null, GM_main); }
    );
}
//-- This is a standard-ish utility function.
function addJS_Node (text, s_URL, funcToRun, runOnLoad) {
    var D                                   = document;
    var scriptNode                          = D.createElement ('script');
    if (runOnLoad) {
        scriptNode.addEventListener ("load", runOnLoad, false);
    }
    scriptNode.type                         = "text/javascript";
    if (text)       scriptNode.textContent  = text;
    if (s_URL)      scriptNode.src          = s_URL;
    if (funcToRun)  scriptNode.textContent  = '(' + funcToRun.toString() + ')()';
    var targ = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
    targ.appendChild (scriptNode);
}

---

---

不幸的是，当您必须注入脚本代码时，使用GM_函数会变得更加混乱。如果这适用于您，请参阅:"如何从必须在目标页面作用域中运行的代码调用Greasemonkey的GM_函数?"