Greasemonkey – 在执行代码技术之前等待页面加载
我正在写一个Greasemonkey userscript，并且当页面完全加载完成时，需要执行特定的代码，因为它返回了我想要显示的div数。
问题是，这个特定的页面在加载之前有时会花费一些时间。
我试过，文档$(function() { }); 和$(window).load(function(){ }); 包装。 然而，似乎没有人为我工作，但我可能会错误地应用它们。
我能做的最好的是使用setTimeout(function() { }, 600); 尽pipe并不总是可靠的，
什么是Greasemonkey中使用最好的技术，以确保页面加载完成后，将执行特定的代码？
Greasemonkey（通常）没有jQuery。 所以常用的方法是使用
window.addEventListener('load', function() { // your code here }, false);
在你的脚本里面
这是一个常见的问题，正如你所说，等待页面加载是不够的 – 因为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 }
给出一个更具体的例子的目标网页的确切细节。
将我的脚本封装在$(window).load(function(){ })永远不会失败。
也许你的网页已经完成，但仍然有一些Ajax内容被加载。
如果是这样的话，那么来自Brock Adams的这段代码可以帮助你：
https://gist.github.com/raw/2625891/waitForKeyElements.js
我通常使用它来监视回发时出现的元素。
像这样使用它： waitForKeyElements("elementtowaitfor", functiontocall)
从Greasemonkey 3.6（2015年11月20日）开始，元数据密钥@run-at支持新值document-idle 。 简单地把它放在Greasemonkey脚本的元数据块中：
// @run-at document-idle
文档描述如下：
该脚本将在页面和所有资源（图像，样式表等）被加载并且页面脚本已经运行之后运行。
布洛克的答案是好的，但我想提供AJAX问题的另一个解决scheme，完整性。 由于他的脚本也使用setInterval()来定期检查（300ms），所以它不能立即响应。
如果您需要立即响应，可以使用MutationObserver()来侦听DOM更改，并在创build该元素后立即对其进行响应
(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});
