在执行代码技术之前等待页面加载的用户脚本？

Question

我正在编写一个 Greasemonkey 用户脚本，并希望在页面完全加载完成时执行特定代码，因为它返回我想要显示的 div 计数。

问题是，这个特定页面有时需要一些时间才能加载所有内容。

我已经尝试过，记录 $(function() { }); 和 $(window).load(function(){ }); 包装器。但是，似乎没有一个对我有用，尽管我可能会错误地应用它们。

我能做的最好的就是使用setTimeout(function() { }, 600);，虽然它并不总是可靠的。

在 Greasemonkey 中使用什么技术来确保在页面完成加载时执行特定代码的最佳技术是什么？

Answer 1

Greasemonkey（通常）没有 jQuery。所以常用的做法是使用

window.addEventListener('load', function() {
    // your code here
}, false);

在您的用户脚本中

Answer 2

这是一个常见问题，正如您所说，等待页面加载是不够的——因为 AJAX 可以并且确实在此之后很长时间内改变了事情。

对于这些情况，有一个标准（ish）强大的实用程序。我是the waitForKeyElements() utility。

像这样使用它：

// ==UserScript==
// @name     _Wait for delayed or AJAX page load
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a major design
    change introduced in GM 1.0.
    It restores the sandbox.
*/

waitForKeyElements ("YOUR_jQUERY_SELECTOR", actionFunction);

function actionFunction (jNode) {
    //-- DO WHAT YOU WANT TO THE TARGETED ELEMENTS HERE.
    jNode.css ("background", "yellow"); // example
}

---

为更具体的示例提供目标页面的确切详细信息。

Answer 3

从 Greasemonkey 3.6（2015 年 11 月 20 日）开始，元数据键 @run-at 支持新值 document-idle。 只需将其放在 Greasemonkey 脚本的元数据块中：

// @run-at      document-idle

documentation 描述如下：

脚本将在页面和所有资源（图像、样式表等）加载完毕并且页面脚本运行后运行。

Answer 4

Brock's answer 很好，但我想为 AJAX 问题提供另一种更现代、更优雅的解决方案。

由于他的脚本和大多数其他人一样，也使用setInterval() 定期检查（300 毫秒），因此无法立即响应并且总是有延迟。其他解决方案使用 onload 事件，这通常会比您希望在动态页面上更早触发。

您可以使用MutationObserver() 来监听 DOM 变化并在元素创建后立即响应

(new MutationObserver(check)).observe(document, {childList: true, subtree: true});

function check(changes, observer) {
    if(document.querySelector('#mySelector')) {
        observer.disconnect();
        // code
    }
}

虽然check() 会在每次 DOM 更改时触发，但如果 DOM 经常更改或您的条件需要很长时间来评估，这可能会很慢，因此不要观察 document，而是尝试通过观察来限制范围一个尽可能小的 DOM 子树。

这种方法非常通用，可以应用于很多情况。要多次响应，请不要在触发时断开观察者的连接。

另一个用例是，如果您不寻找任何特定元素，而只是等待页面停止更改，则可以将其与计时器结合使用。

var observer = new MutationObserver(resetTimer);
var timer = setTimeout(action, 3000, observer); // wait for the page to stay still for 3 seconds
observer.observe(document, {childList: true, subtree: true});

// reset timer every time something changes
function resetTimer(changes, observer) {
    clearTimeout(timer);
    timer = setTimeout(action, 3000, observer);
}

function action(observer) {
    observer.disconnect();
    // code
}

这个方法非常通用，你也可以监听属性和文本的变化。只需在选项中将attributes 和characterData 设置为true

observer.observe(document, {childList: true, attributes: true, characterData: true, subtree: true});

Answer 5

在$(window).load(function(){ }) 中包装我的脚本对我来说从来没有失败过。

也许您的页面已经完成，但仍有一些 ajax 内容正在加载。

如果是这样，Brock Adams 的这段代码可以帮助你：
https://gist.github.com/raw/2625891/waitForKeyElements.js

我通常用它来监控出现在postback上的元素。

像这样使用它：waitForKeyElements("elementtowaitfor", functiontocall)

Answer 6

如果你想操作节点，比如获取节点的值或者改变样式，你可以使用这个函数等待这些节点

const waitFor = (...selectors) => new Promise(resolve => {
    const delay = 500
    const f = () => {
        const elements = selectors.map(selector => document.querySelector(selector))
        if (elements.every(element => element != null)) {
            resolve(elements)
        } else {
            setTimeout(f, delay)
        }
    }
    f()
})

然后使用promise.then

// scripts don't manipulate nodes
waitFor('video', 'div.sbg', 'div.bbg').then(([video, loading, videoPanel])=>{
    console.log(video, loading, videoPanel)
    // scripts may manipulate these nodes
})

或使用async&await

//this semicolon is needed if none at end of previous line
;(async () => {
    // scripts don't manipulate nodes
    const [video, loading, videoPanel] = await waitFor('video','div.sbg','div.bbg')
    console.log(video, loading, video)
    // scripts may manipulate these nodes
})()

这是一个例子icourse163_enhance

Answer 7

为了检测 XHR 是否在网页中完成加载，它会触发一些功能。 我从How do I use JavaScript to store "XHR finished loading" messages in the console in Chrome? 得到这个，它确实有效。

    //This overwrites every XHR object's open method with a new function that adds load and error listeners to the XHR request. When the request completes or errors out, the functions have access to the method and url variables that were used with the open method.
    //You can do something more useful with method and url than simply passing them into console.log if you wish.
    //https://stackoverflow.com/questions/43282885/how-do-i-use-javascript-to-store-xhr-finished-loading-messages-in-the-console
    (function() {
        var origOpen = XMLHttpRequest.prototype.open;
        XMLHttpRequest.prototype.open = function(method, url) {
            this.addEventListener('load', function() {
                console.log('XHR finished loading', method, url);
                display();
            });

            this.addEventListener('error', function() {
                console.log('XHR errored out', method, url);
            });
            origOpen.apply(this, arguments);
        };
    })();
    function display(){
        //codes to do something;
    }

但是如果页面中有很多 XHR，我不知道如何过滤确定的 XHR。

另一个方法是 waitForKeyElements() 很好。 https://gist.github.com/BrockA/2625891
有 Greasemonkey 使用的示例。 Run Greasemonkey script on the same page, multiple times?