当页面通过ajax更改时，如何运行Greasemonkey脚本?

I have that script:

我有这个脚本:

// ==UserScript==
// @name     example
// @include  http://xxx*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
// ==/UserScript==

var findElem = function(elems, text) {
    for (var i = 0; i < elems.length; i++) {
        if (elems[i].textContent == text) {
            return elems[i];
        } else {
            var result = findElem(elems[i].children, text);
            if (result != undefined) {
                return result;
            }
        }
    }
    return;
}

switch (document.getElementById('my_id').value) {
    case "1":
        findElem(document.documentElement.children, "blabla1").click();
        break;
    case "2":
        findElem(document.documentElement.children, "blabla2").click();
        break;
    case "3":
        findElem(document.documentElement.children, "blabla3").click();
        break;
    case "4":
        findElem(document.documentElement.children, "blabla4").click();
        break;
    default:
        break;
}

It works fine but it works only main page load. I want to run this when page changed via ajax. How can I do that?

它工作得很好，但它只工作主页负载。当页面通过ajax更改时，我想运行这个。我怎么做呢?

Also please give examples with your answers. I'm newbie. I don't know how to use things in your answers.

也请举例说明你的答案。我是新手。我不知道怎么用你的答案。

3 个解决方案

#1

Since browser's environment is event-driven you'll have to either set up a timer, bind to some event that happens around update you looking for. Alternatively, you can wrap function that does update and call your code in post-hook. Obviously, you'll need to wrap your userscript code in some function to reuse.

由于浏览器的环境是事件驱动的，所以您必须设置一个计时器，绑定到发生在您需要的更新周围的某个事件。或者，您也可以打包在post-hook中更新和调用代码的函数。显然，您需要将您的userscript代码包装在一些函数中以重用。

Here's an example with timer set up with setInterval (top of script is still the same):

这里有一个用setInterval设置计时器的例子(脚本的顶部仍然是相同的):

setInterval(function(){
    switch (document.getElementById('my_id').value) {
        case "1":
            findElem(document.documentElement.children, "blabla1").click();
            break;
        case "2":
            findElem(document.documentElement.children, "blabla2").click();
            break;
        case "3":
            findElem(document.documentElement.children, "blabla3").click();
            break;
        case "4":
            findElem(document.documentElement.children, "blabla4").click();
            break;
        default:
            break;
    }
}, 1000) // if AJAX updates happen with some specific interval, set same number here to minimize useless work

#2

You could use the mutation event handler to trigger your function each time the html is altered. However, browsersupport is not the best;)

您可以使用突变事件处理程序在每次修改html时触发您的函数。然而，浏览器支持并不是最好的;

#3

If your host using jQuery, you can use ajaxSuccess or ajaxComplete:

如果您的主机使用jQuery，您可以使用ajaxSuccess或ajaxComplete:

function mainCode(){
    // your script logic here ...
    switch (document.getElementById('my_id').value) {
        // truncated to save space
    }
}

$(document).ready(function(){
    mainCode();
    unsafeWindow.$(document).ajaxSuccess(function(e, xhr, opt) {
        mainCode();
    });
};

#1