在AJAX请求上启动Greasemonkey脚本

I am working on a user script and I've just found that the script is not run when the main page makes AJAX requests.

我正在处理一个用户脚本，我刚刚发现当主页发出AJAX请求时，脚本没有运行。

Is there any way to fire the user script both on main page load and on AJAX requests?

是否有方法可以在主页面加载和AJAX请求上触发用户脚本?

2 个解决方案

#1

The smart way to rerun the script's code on AJAX requests, is to focus on the key bits of the page and check for changes.

在AJAX请求上重新运行脚本代码的聪明方法是关注页面的关键位并检查更改。

For example, suppose a page contained HTML like so:

例如，假设一个页面包含如下HTML:

<div id="userBlather">
    <div class="comment"> Comment 1... </div> 
    <div class="comment"> Comment 2... </div> 
    ... 
</div>

and you wanted the script to do something with each comment as it came in.

你希望脚本在每个评论出现的时候都做点什么。

Now you could intercept all AJAX calls, or listen for DOMSubtreeModified (deprecated), or use MutationObservers, but these methods can get tricky, finicky, and overly complicated.

现在，您可以拦截所有AJAX调用，或者侦听DOMSubtreeModified(不赞成使用)，或者使用mutationobserver，但是这些方法可能会变得棘手、繁琐和过于复杂。

A simpler, more robust way to get ajax-ified content on a wild page is to poll for it using something like the waitForKeyElements function, below.

一个更简单、更健壮的方法是使用waitForKeyElements函数对其进行轮询。

For example, this script will highlight comments that contain "beer", as they AJAX-in:

例如，这个脚本将突出包含“啤酒”的注释，因为它们是ajaxin:

// ==UserScript==
// @name            _Refire on key Ajax changes
// @include         http://YOUR_SITE.com/YOUR_PATH/*
// @require         http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
// ==/UserScript==

function highlightGoodComments (jNode) {

    //***** YOUR CODE HERE *****

    if (/beer/i.test (jNode.text () ) ) {
        jNode.css ("background", "yellow");
    }
    //...
}
waitForKeyElements ("#userBlather div.comment", highlightGoodComments);

/*--- waitForKeyElements():  A utility function, for Greasemonkey scripts,
    that detects and handles AJAXed content.

    IMPORTANT: This function requires your script to have loaded jQuery.
*/
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);

    if (targetNodes  &&  targetNodes.length > 0) {
        btargetsFound   = true;
        /*--- Found target node(s).  Go through each and act if they
            are new.
        */
        targetNodes.each ( function () {
            var jThis        = $(this);
            var alreadyFound = jThis.data ('alreadyFound')  ||  false;

            if (!alreadyFound) {
                //--- Call the payload function.
                var cancelFound     = actionFunction (jThis);
                if (cancelFound)
                    btargetsFound   = false;
                else
                    jThis.data ('alreadyFound', true);
            }
        } );
    }
    else {
        btargetsFound   = false;
    }

    //--- Get the timer-control variable for this selector.
    var controlObj      = waitForKeyElements.controlObj  ||  {};
    var controlKey      = selectorTxt.replace (/[^\w]/g, "_");
    var timeControl     = controlObj [controlKey];

    //--- Now set or clear the timer as appropriate.
    if (btargetsFound  &&  bWaitOnce  &&  timeControl) {
        //--- The only condition where we need to clear the timer.
        clearInterval (timeControl);
        delete controlObj [controlKey]
    }
    else {
        //--- Set a timer, if needed.
        if ( ! timeControl) {
            timeControl = setInterval ( function () {
                    waitForKeyElements (    selectorTxt,
                                            actionFunction,
                                            bWaitOnce,
                                            iframeSelector
                                        );
                },
                300
            );
            controlObj [controlKey] = timeControl;
        }
    }
    waitForKeyElements.controlObj   = controlObj;
}

---

Update:

For convenience, waitForKeyElements() is now hosted on GitHub.

为了方便，waitForKeyElements()现在托管在GitHub上。

This answer shows an example of how to use the hosted function.

这个答案展示了如何使用托管函数的示例。

#2

Another way — simpler and smaller but less flexible — is to use a JavaScript time delay to wait for the AJAX/jQuery to load and finish. For example, if the following HTML was dynamically generated after first load:

另一种方法—更简单、更小但不太灵活—是使用JavaScript时间延迟来等待AJAX/jQuery加载并完成。例如，如果在第一次加载后动态生成以下HTML:

<div id="userBlather">
    <div class="comment"> Comment 1... </div> 
    <div class="comment"> Comment 2... </div> 
    ... 
</div>

Then a greasemonkey script like this would be able to modify it:

这样，greasemonkey脚本就可以修改它:

// Wait 2 seconds for the jQuery/AJAX to finish and then modify the HTML DOM
window.setTimeout(updateHTML, 2000);

function updateHTML()
{
    var comments = document.getElementsByClassName("comment");
    for (i = 0; i < comments.length; i++)
    {
        comments[i].innerHTML = "Modified comment " + i;
    }
}

See guidance here: Sleep/Pause/Wait in Javascript

请参阅这里的指导:在Javascript中睡眠/暂停/等待