Userscript在执行代码技术之前等待页面加载？

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)稳健实用程序.它的waitForKeyElements()效用.

像这样使用它:

// ==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

该文档描述,如下所示:

该脚本将在页面之后运行,并且所有资源(图像,样式表等)都已加载并且页面脚本已运行.

Answer 4

包装我的脚本$(window).load(function(){ })永远不会失败.

也许你的页面已经完成,但仍然有一些ajax内容被加载.

如果是这样的话,Brock Adams的这段精彩代码可以帮到你:https:
//gist.github.com/raw/2625891/waitForKeyElements.js

我通常用它来监视回发时出现的元素.

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

Answer 5

Brock的回答很好，但是为了完整起见，我想提供另一种解决AJAX问题的方法。由于他的脚本还用于setInterval()定期检查（300毫秒），因此无法立即响应。

如果需要立即响应，则可以使用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更改非常频繁或您的条件需要很长时间才能评估，则这可能会很慢。

另一个用例是，如果您不查找任何特定元素，而只是等待页面停止更改。您也可以结合使用它setTimeout()来等待。

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});

function resetTimer(changes, observer) {
    clearTimeout(timer);
    timer = setTimeout(action, 3000, observer);
}

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

这种方法用途广泛，您还可以侦听属性和文本更改。只需设置attributes并characterData以true在选项

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

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