首页 > 编程语言> 文章详细

javascript-在润滑脂脚本中显示元素后立即修改元素(而不是在页面完全加载后)吗？

2019-10-12 07:37:27 阅读：182 来源： 互联网

标签：html javascript xmlhttprequest greasemonkey

我有this script.它适用于RottenTomatoes电影页面,并修改了3个元素
(工具提示中有1个可见文本和2个文本).

当前,(由于lublessmonkey的@ run-at文档结尾),它仅在页面完全加载后才修改元素.

此外,RottenTomates页面在很多情况下会延迟加载时间,最长可达20秒(！),
因此这会额外延迟我的脚本.

这导致两件事：

>延迟显示修改后的可见文本,并且,
>如果在页面完全加载之前将鼠标悬停在任一工具提示中,则在页面加载之后,它可能仅包含初始文本,而无需添加或仅添加.

要查看此信息,请安装script,然后访问this typical target page.

RottenTomatoes页面通过XHR加载各种内容(正如我在Firefox Netowork Monitor中看到的那样),
但是3个元素(我要修改)会立即显示,而不是在页面完全加载时显示.

我尝试使用MutationObserver来查看要显示在屏幕上的特定文本值,但是它似乎不起作用.其结构如下：

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 
}

元素显示后如何立即修改？

解决方法:

>通过将以下代码添加到脚本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});

调用观察者时,工具提示已存在于文档树中,因此您可以简单地将代码从“加载”功能移至观察者中,然后再返回,而无需进行任何更改.

注：最好使观察者尽可能快,特别是使用普通的for循环而不是函数回调,因为调用它们的开销很大,当打开一个非常复杂的页面并生成数千个页面时,这可能会在速度较慢的PC /设备上成为问题(非常常见)或成千上万的突变(极其罕见,但仍然如此！).作业完成后,断开连接.

附：使用setMutationHandler功能时,观察者代码为：

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

标签：html,javascript,xmlhttprequest,greasemonkey
来源： https://codeday.me/bug/20191012/1898572.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-在润滑脂脚本中显示元素后立即修改元素(而不是在页面完全加载后)吗？