如何拦截javascript中的innerHTML更改？

Posted 2023-02-16

【中文标题】如何拦截javascript中的innerHTML更改？

【英文标题】：how to intercept innerHTML changes in javascript?

【发布时间】：2011-11-14 22:16:42

【问题描述】：

我需要拦截网页内单元格内容的任何更改。

以下代码显示 addEventListener 不起作用。

function modifyText() 
alert("!");


var el=document.getElementById("mycell");
el.innerhtml="a"
el.addEventListener("change", modifyText, false); 
// After next instruction I expect an alert message but it does not appear...
el.innerHTML="Z";

代码只是一个玩具示例。在我的真实案例中，页面（以及单元格中）的更改是由我无法控制的 web 应用程序进行的。

【问题讨论】：

你在什么浏览器类型中测试这个？记住 IE 使用非标准的 .attachEvent() 方法。

首先发生了什么变化？当您说“网络应用程序”时，这对我来说意味着构建并返回页面内容的服务器端应用程序。如果是这种情况，那么 javascript 代码将无法检测到更改，因为“更改”在 JavaScript 的范围甚至适用之前就发生在服务器上。从页面上的 JavaScript 来看，没有任何变化。

【参考方案1】：

有一种现代的方法可以捕捉 innerhtml 的变化：

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe

例子：

// identify an element to observe
elementToObserve = window.document.getElementById('y-range').children[0];

// create a new instance of 'MutationObserver' named 'observer', 
// passing it a callback function
observer = new MutationObserver(function(mutationsList, observer) 
    console.log(mutationsList);
);

// call 'observe' on that MutationObserver instance, 
// passing it the element to observe, and the options object
observer.observe(elementToObserve, characterData: false, childList: true, attributes: false);

innerHTML 更改时会触发 childList 突变。

【讨论】：

最佳答案，甚至适用于 iframe 儿童

【参考方案2】：

Most efficient method of detecting/monitoring DOM changes? 有帮助吗？

似乎没有任何 100% 跨浏览器的解决方案，解决方法之一是轮询感兴趣的元素以查看它们的 innerHTML.length 是否发生变化！

【参考方案3】：

您不能以这种方式收听 DOM 元素 change。 change 活动主要针对inputs

还有一些其他新的 DOM 3 事件可以帮助您解决此问题。

这里有一些：

DOMCharacterDataModified //草稿

DOMSubtreeModified

【讨论】：

不幸的是，所有的突变事件都被弃用了！有没有像 DOMCharacterDataModified 这样的神奇事件来监听 innerHTML 值的变化？