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

javascript – 如何在不使用DOM突变事件的情况下检测AJAX节点插入？

2019-07-26 01:36:54 阅读：193 来源： 互联网

标签：javascript jquery twitter greasemonkey mutation-events

我正在尝试编写一个改变Twitter帖子中关键字的Greasemonkey脚本.麻烦的是,内容是“延迟加载”,并在用户请求时添加.

如果我向添加的元素添加事件监听器,我可以使用JQuery的委托().因为我只是想在加载时更改内容,这似乎不合适.

变异事件似乎符合要求.它们是Gecko特有的,但这对于Greasemonkey脚本来说并不重要.问题是,they have been depreciated和一组very good reasons.

当然我可以使用计时器并定期轮询DOM,但这看起来很蹩脚.

如何检测DOM的添加内容并对插入的元素做出反应？

解决方法:

如果你想检测AJAX创建的节点你的选择(除了你明智要排除的Mutation事件)是：

>使用间隔或计时器进行轮询.
>尝试挂钩页面的AJAX请求(如果有的话).
>拼接,劫持或替换页面的javascript.

我已经一次完成了所有这些,除了一个以外都有一个主要的缺点：

>拼接到页面的javascript并不总是很容易(特别是对于匿名函数),通常需要对代码进行复杂的解构,并且很容易.页面的javascript更改,恕不另行通知.
>挂钩页面的AJAX请求有时候非常简单,但是通过沙箱屏障传输信息通常会使它比它的价值更麻烦.
>投票工作在实践中很好,实施起来很简单,而且成本通常很低.

我建议您使用the waitForKeyElements() utility并完成它.
它非常易于使用.例如：

// ==UserScript==
// @name    Highlight good comments
// @include http://SOME_SITE/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require https://gist.github.com/raw/2625891/waitForKeyElements.js
// ==/UserScript==

function highlightGoodComments (jNode) {
    if (/beer/i.test (jNode.text () ) ) {
        jNode.css ("background", "yellow");
    }
}

waitForKeyElements ("#userBlather div.comment", highlightGoodComments);

标签：javascript,jquery,twitter,greasemonkey,mutation-events
来源： https://codeday.me/bug/20190726/1538818.html

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

ICode9

javascript – 如何在不使用DOM突变事件的情况下检测AJAX节点插入？