我正在编写一个Greasemonkey用户脚本，希望在页面完全加载完成后执行特定的代码，因为它返回了一个我想要显示的div计数。
问题在于，这个特定的页面有时需要一点时间才能加载完成。
我尝试了使用$(function() { });和$(window).load(function(){ });包装器，但是似乎都没有起作用，虽然可能是我使用不正确。
我能做的最好的事情就是使用setTimeout(function() { }, 600);，虽然它并不总是可靠。
Greasemonkey中最好的技术是什么，以确保特定的代码将在页面加载完成后执行？
Greasemonkey（通常）没有jQuery。因此，常见的方法是使用
window.addEventListener('load', function() {
// your code here
}, false);
@require http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js一样简单。我已经将它们放到了模板脚本中，因为我通常使用它们。同时加入this.$ = this.jQuery = jQuery.noConflict(true);以避免常见的冲突。 - m3nda这是一个常见的问题，正如你所说，等待页面加载是不够的 - 因为 AJAX 可以在之后长时间改变事物。
针对这些情况，有一个标准（或相似的）稳健实用程序。它就是 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.
If in Tampermonkey, use "// @unwrap" to enable sandbox instead.
*/
waitForKeyElements ("YOUR_jQUERY_SELECTOR", actionFunction);
function actionFunction (jNode) {
//-- DO WHAT YOU WANT TO THE TARGETED ELEMENTS HERE.
jNode.css ("background", "yellow"); // example
}
提供目标页面的确切细节，以获得更具体的示例。
@grant GM_addStyle时也不会破坏任何内容。这就是它存在的原因。 - Brock AdamswaitForKeyElements的第三个参数传递为true。 - StarwarswiisetInterval()或setTimeout()来定期检查元素，因此无法立即响应，总会有一些延迟。其他解决方案使用onload事件，在动态页面上往往会提前触发。
解决方案：使用MutationObserver()直接监听DOM变化，以便在元素插入后立即响应。(new MutationObserver(check)).observe(document, {childList: true, subtree: true});
function check(changes, observer) {
if(document.querySelector('#mySelector')) {
observer.disconnect();
// actions to perform after #mySelector is found
}
}
check函数会立即触发。这允许您指定任意的触发条件，以便在执行自己的代码之前等待页面处于所需的确切状态。document。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});
从Greasemonkey 3.6版本（2015年11月20日）开始，元数据键@run-at支持新值document-idle。
将其简单地放置在您的Greasemonkey脚本的元数据块中：
// @run-at document-idle
根据文档描述：
这个脚本会在页面和所有资源（图片、样式表等）加载完成后以及页面脚本运行之后运行。
waitForKeyElements 或 MutationObserver 的方法仍然更加健壮。 - Brock Adams$(window).load(function(){ }) 中，对我从未失败过。waitForKeyElements("elementtowaitfor", functiontocall)。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
这是一个关于it技术的示例。要检测XHR是否在网页中加载完成，然后触发一些函数。我从如何使用JavaScript在Chrome控制台中存储“XHR已完成加载”消息？中了解到这一点，它确实有效。
//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使用示例。
在同一页上运行多次Greasemonkey脚本？
(function init(){var counter = document.getElementById('id-of-element');if (counter) { /* 对计数器元素进行操作 */ } else { setTimeout(init, 0);}})();来持续轮询元素的存在性。这是最通用的解决方案。 - Rob W@run-at值，其中包括document-idle和context-menu，这可能会有用。另外，看起来油猴正在添加支持document-idle尽管它目前还没有被记录下来。 - Mr. Llama