在greasemonkey脚本中显示元素后（而不是在页面完全加载后）立即修改元素？ [英] Modify elements immediately after they are displayed (not after page completely loads) in greasemonkey script?
问题描述
我有此脚本。它适用于RottenTomatoes电影页面，并修改3个元素
（工具提示中有1个可见文本和2个文本）。
I have this script. It applies on RottenTomatoes movie pages , and modifies 3 elements
(1 visible text and 2 texts inside tooltips).
目前，（由于greasemonkey的 @ run-at document-end ）它仅在页面完全加载后才修改元素。
Currently, (due to greasemonkey's @run-at document-end) it modifies the elements only after the page has completely loaded.
此外，RottenTomates页面有很多次延迟加载，最多20秒（！），
这样我的脚本会有额外的延迟。
Additionally, there are many times where RottenTomates pages delay loading, up to 20 sec(!),
so that's additional delay to my script.
这会导致两件事：
- 延迟显示修改后的可见文字，那个，
- 如果你在完全加载页面之前将鼠标悬停在任一工具提示中，那么，在加载之后，它可能只包含没有添加的初始文本，或者只是我的补充。
要看到这一点，请安装 script 然后访问这个典型的目标页面。
To see this, install the script and then visit this typical target page.
RottenTomatoes页面通过XHR加载各种内容（正如我在Firefox Netowork Monitor中看到的那样） ），
但显示了3个元素（我要修改） im mediately ，而不是在页面完全加载时。
The RottenTomatoes pages load various content via XHR (as I've seen in Firefox Netowork Monitor),
but the 3 elements (that I want to modify) are displayed immediately, not when page has completely loaded.
我尝试过使用 MutationObserver 要监视屏幕上显示的特定文本值，但它似乎不起作用。其结构如下：
I have tried using MutationObserver to watch for the specific text value to appear on screen, but it doesn't seem to work. Its structure is like this:
var target = selector_for_element_containing_text ; // the selector is: document.querySelector('.audience-info > div:nth-child(1)');
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
modifyElements();
});
});
var config = { attributes: true, childList: true, characterData: true, subtree: true };
observer.observe(target, config);
function modifyElements(){ // This is just the current code of my script
// modify element 1
// modify element 2
// modify element 3
}
如何在之后立即修改元素它们会被显示？
推荐答案
-
让脚本以<$运行c $ c> document-start 将此代码添加到脚本元区块：
Make the script run at
document-startby adding this code to script metablock:
..............
// @run-at document-start
..............
// ==/UserScript==
现在，当脚本运行时，文档中没有任何内容，所以我们会附上文档根目录的观察者，将扫描容器元素的添加节点 .audience-info ：
var observer = new MutationObserver(function(mutations) {
for (var i=0; i<mutations.length; i++) {
var mutationAddedNodes = mutations[i].addedNodes;
for (var j=0; j<mutationAddedNodes.length; j++) {
var node = mutationAddedNodes[j];
if (node.classList && node.classList.contains("audience-info")) {
node.firstElementChild.innerHTML = node.firstElementChild.innerHTML
.replace(/[\d.]+/g, function(m) { return 2 * m });
// don't hog resources any more as we've just done what we wanted
observer.disconnect();
return;
}
}
}
});
observer.observe(document, {childList: true, subtree: true});
当调用观察者时，工具提示已存在于文档树中，因此您只需移动代码从加载函数进入观察者之前返回而不做任何改动。
When the observer is called the tooltips are already present in the document tree so you can simply move the code from "load" function into the observer before return without changing anything.
NB最好尽可能快地使观察者，特别是使用普通的用于 -loops而不是函数回调因为调用它们的开销，这可能成为一个问题。打开一个非常复杂的页面，生成数千个（非常常见的情况）或数十万个突变（非常罕见但仍然！）时PC /设备速度慢。并在工作完成后断开连接。
N.B. It's best to make the observer as fast as possible, particularly by using plain for-loops instead of function callbacks because of the overhead to call them, which might become an issue on a slow PC/device when opening a very complex page that generates thousands (quite a common case) or hundreds of thousands mutations (extremely rare but still!). And disconnect it once the job is done.
P.S。使用 setMutationHandler 函数，观察者代码将是：
P.S. With setMutationHandler function the observer code would be:
// @require https://greasyfork.org/scripts/12228/code/setMutationHandler.js
// ==/UserScript==
setMutationHandler(document, '.audience-info div:first-child', function(nodes) {
this.disconnect();
nodes.forEach(function(n) {
n.innerHTML = n.innerHTML.replace(/[\d.]+/g, function(m) { return 2*m });
});
});
这篇关于在greasemonkey脚本中显示元素后（而不是在页面完全加载后）立即修改元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
