如何检测 DOM 修改事件答案

【问题标题】：How to detect DOM modification event如何检测 DOM 修改事件
【发布时间】：2018-05-19 13:00:30
【问题描述】：

我已经尝试了几个小时来监听 DOM 更改事件，但仍然无法正常工作。

我需要将Chrome Debug Tools 中显示的事件检测为显示为粉红色的更改。

这是我尝试过的

  function listenForDomModified(node, listener) {
            node.addEventListener("DOMSubtreeModified", listener, false);
            var iframes = node.getElementsByTagName("iframe");
            for (var i = 0, len = iframes.length, doc; i < len; ++i) {
                // Catch and ignore errors caused by iframes from other domains
                try {
                    doc = iframes[i].contentDocument || iframes[i].contentWindow.document;
                    doc.addEventListener("DOMSubtreeModified", listener, false);
                } catch (ex) {}
            }
        }
        var findElements = function () {
            elements.iframeBlock = $(SELECTOR.IFRAME_BLOCK);
        };
        var onIframeChange = function (e) {

            console.log("CHANGE !!!");
            alert("DOM CHANGES");
        };
        var setListeners = function () {
            listenForDomModified(elements.iframeBlock[0],onIframeChange);
            elements.iframeBlock.bind('DOMSubtreeModified', function(e) {
                  if (e.target.innerHTML.length > 0) {
                    alert("ON CHANGE");
                  }
                  alert("ON CHANGE");
            });
            //elements.iframeBlock.change(onIframeChange);
        };

请注意，我分别尝试了这些方法。

但仍然无法调用我的函数。但是Chrome 显示了这些更改。

如果有任何帮助，我将不胜感激。

谢谢

【问题讨论】：

标签： javascript jquery dom iframe

【解决方案1】：

你试过了吗

$(document).on('change', function () { /*code*/ });

【讨论】：

是的，从我的问题可以看出，它只是被注释掉了
您的代码中没有任何文档的更改监听器。函数底部的注释行与我所做的不同。另请注意，您甚至不调用函数 setListeners()，您只需定义它。

【解决方案2】：

试试这个 jQuery 方法：

$("iframe").contents().find('body').on("change", function() {
   alert("DOM CHANGES");
});

未测试...

【讨论】：