gpt4 book ai didi

jquery - DOMNodeInserted 无法正常工作

转载 作者:行者123 更新时间:2023-12-01 07:15:21 24 4
gpt4 key购买 nike

我有一个问题..

“DOMNodeInserted”没有按预期工作。我不确定我是否正确使用它。

有什么想法吗?

最佳答案

<子>编辑:使用MutationObserver进一步向下滚动以获得更好的方法。 .

<小时/>

在页面加载时构建 DOM 时,不会触发任何 DOMNodeInserted 事件。我认为没有办法让 HTML 在渲染之前通过过滤器(或者如果有的话我不知道)。

相反,对 DOMContentLoaded 进行过滤可能足够快,用户不会注意到差异(或者至少不会太麻烦)。

当然,您必须监听 DOM 中的动态变化(例如通过 AJAX 加载的内容等)并动态过滤它。 <强> MutationObserver 可能会派上用场。

看看这个演示代码,让您开始使用这种方法:

ma​​nifest.json
(请注意,要实现此功能,您不需要需要以下任何内容:
browser_actionpage_action背景权限)

...
"content_scripts": [
{
"matches": [
"http://stackoverflow.com/*",
"http://www.stackoverflow.com/*"
],
"js": ["content.js"],
"run_at": "document_start",
"all_frames": true
}
],
...

content.js

// Implement your filtering mechanism
// Good luck trying not to break the HTML :)
var doFilter = function(elem) {
// Demo filtering: highlighting links
// (and possibly breaking HTML in many pages)
elem.innerHTML = elem.innerHTML.replace(
/(<a[^>]*)(>[^<]*<\/a>)/ig,
"$1 style=\"background-color: yellow;\"$2");
};

window.addEventListener("DOMContentLoaded", function() {
doFilter(document.body);
});
<小时/>

更新

这是使用 MutationObserver 的不同方法,甚至更快。使用这种方法,更改实际上对用户来说应该是“透明的”。
(这仍然需要twicking,例如处理动态节点更新。)

content.js

// Highligth the element by giving it a yellow background
var doFilter = function(link) {
link.style.backgroundColor = "yellow";
}

// Create a MutationObserver to handle events (i.e. filtering <a> elements)
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes) {
for (var i = 0; i < mutation.addedNodes.length; i++) {
var node = mutation.addedNodes[i];
if (node.nodeName == "A") {
doFilter(node);
}
}
}
});
});

// Start observing "childList" events in document and its descendants
observer.observe(document, {
childList: true,
subtree: true
});

如果您决定选择MutationObserver 方法,这个 JS 库应该会让你的生活更轻松: mutation-summary

关于jquery - DOMNodeInserted 无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19554353/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com