javascript - waitForKeyElements 不等待某些浏览器上的 ajax 加载数据？

Question

在我的 Greasemonkey/Tampermonkey 脚本中，它在 Google Chrome 中运行完美，但在 Firefox 中:

waitForKeyElements ("table#ID-rowTable tr td span._GAmD", replaceAffid);

不等待 AJAX 加载的内容。

这是我脚本的相关部分:

// ==UserScript==
// @name        ChangeProvider
// @description Change Provider Name
// @include     https://analytics.google.com/analytics/web/*
// @version     1
// @grant       GM_xmlhttpRequest
// ==/UserScript==

<snip>...

waitForKeyElements ("table#ID-rowTable tr td span._GAmD", replaceAffid);

<snip>...

function waitForKeyElements (
    selectorTxt,    /* Required: The jQuery selector string that
                        specifies the desired element(s).
                    */
    actionFunction, /* Required: The code to run when elements are
                        found. It is passed a jNode to the matched
                        element.
                    */
    bWaitOnce,      /* Optional: If false, will continue to scan for
                        new elements even after the first match is
                        found.
                    */
    iframeSelector  /* Optional: If set, identifies the iframe to
                        search.
                    */
) {
    var targetNodes, btargetsFound;

    if (typeof iframeSelector == "undefined")
        targetNodes     = $(selectorTxt);
    else
        targetNodes     = $(iframeSelector).contents ()
                                           .find (selectorTxt);

<snip>...

完整代码为at pastebin.com .

Answer 1

问题是:

1. waitForKeyElements() 需要 jQuery。

2. 您的脚本必须提供 jQuery(推荐)，或使用@grant none 模式，并且运行在一个页面上已经在使用 jQuery(一种脆弱的做事方式，又名“定时炸弹代码”)。

3. Tampermonkey 有一个 bug 和可能的安全漏洞，因此它并不总是沙箱正确。这意味着脚本可以(有时)看到页面的 jQuery，即使 @grant 不是 none。 这允许脚本在 Chrome 中运行(目前)但是依赖一个非常冒险的事情。

4. 当您使用 @grant GM_ ... 时，Firefox 会正确地沙盒化范围，因此脚本无法看到页面的 jQuery。

5. 如果你有 looked at Firefox's Browser Console ，您会看到错误消息指出问题所在。

解决方案是:不要在没有 @requireing jQuery 的情况下使用 waitForKeyElements!
事实上，您应该需要这两个库，as shown in this answer ，因为它 (A) 运行得更快，(B) 仅在安装/编辑用户脚本时获取一次代码，并且 (C) 使代码更清晰、更容易理解。

所以，你的整个脚本会变成这样:

// ==UserScript==
// @name        GoogleAnalytics Change Provider
// @description Change Provider Name
// @include     https://analytics.google.com/analytics/web/*
// @version     1
// @require     http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require     https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant       GM_xmlhttpRequest
// ==/UserScript==
var providers = new Array ();

GM_xmlhttpRequest ( {
    method: "GET",
    url: "http://localhost:3000/api/t2_provider_list",
    onload: function (response) {
        var provider_list = JSON.parse (response.responseText);

        for (i = 0; i < provider_list.length; i++) {
            providers[provider_list[i].analytics_prefix] = provider_list[i].provider_name;
        }
        waitForKeyElements ("table#ID-rowTable tr td span._GAmD", replaceAffid);
    }
} );

/*--- replaceAffid ():  Match the fields with a given pattern 
and replace with the provider name and affid
*/
function replaceAffid () {
    console.log (providers);
    var regExp = /([a-z,A-Z,0-9]+)---([a-z,A-Z,0-9,_,-]+)/g;

    var spans = document.evaluate ("//span[contains(@class, '_GAmD') and not(contains(@class, '_GAe'))]/text()", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
    console.log (spans);
    for (var i = 0; i < spans.snapshotLength; i++) {
        match = regExp.exec (spans.snapshotItem (i).textContent);

        if (match != null) {
            if (typeof providers[match[1]] === undefined) {
                // do nothing
            } else {
                spans.snapshotItem (i).textContent = "Provider: " + providers[match[1]] + " \n\r  Affid: " + match[2];
            }
        }
    }
}

---

最后，您似乎粘贴了旧版本的 waitForKeyElements。
Since May of 2012 ，该函数的顶部附近有此文本:

IMPORTANT: This function requires your script to have loaded jQuery.

如果您从 one of my old answers 中获取了函数的副本， 我道歉。我刚刚更新了它以避免重复这种混淆。