javascript DOMNodeInserted事件

最新推荐文章于 2025-06-18 13:15:37 发布

weixin_33896726

最新推荐文章于 2025-06-18 13:15:37 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/guomingliang/blog/387784

本文探讨了一种使用DOMNodeInserted事件优化内容注入的方法。该方法可在第三方AJAX加载的内容中适时插入自定义元素，确保操作时目标DOM已完全加载。文章还对比了定时检查DOM存在的方法，并针对不同浏览器的支持情况提供了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

最近一个插件的功能需求，需要在第三方的ajax载入回来的内容中通过contentscript来插入一些我们的内容。在什么时候去插，这是个很麻烦的问题。因为要使插入这个动作生效，那在执行插入时，被插入的DOM部分一定是已经load完成的。之前试过第一次插入时，通过setTimeout来循环判断DOM是否已经在页面上，然后在进行插入。这个办法解决的第一次时候能够正常插入，但是在页面不刷新的情况下，又一次ajax载入的内容就不会生效了。想到了去捕捉ajax完成后的触发某一事件，但好像并没有哪一种方法能够实现，倒是让我发现了 DOMNodeInserted 事件。

DOMNodeInserted 从字面理解比较简单，就是每次页面有DOM插入时都会触发。运用这个事件，提到的需求就变的简单了，我只要在每次触发这个事件获取到的event.target，判断其DOM内容是否有我将要插入部分的结构特征然后来进行插入就行了。与这个事件成对的还有一个 DOMNodeRemoved 事件。有兴趣的话，可以在W3C中查找相关资料。当然这个事件IE是不支持的，在IE下要实现开头提到的需求，估计还是得要用setTimeout来循环监听。

转载于:https://my.oschina.net/guomingliang/blog/387784