如何检测 DOM 修改事件

Posted 2023-05-09

【中文标题】如何检测 DOM 修改事件

【英文标题】：How to detect DOM modification event

【发布时间】：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 显示了这些更改。

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

谢谢

【参考方案1】：

你试过了吗

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

【讨论】：

是的，从我的问题可以看出，它只是被注释掉了

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

【参考方案2】：

试试这个 jQuery 方法：

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

未测试...