如何检测DOM修改事件

时间:2017-12-05 19:02:50

标签: javascript jquery dom iframe

我一直试图听几个小时的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会显示这些更改。

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

由于

2 个答案:

答案 0 :(得分:0)

你试过吗

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

答案 1 :(得分:0)

尝试这种jQuery方法:

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

未经过测试......