使用 jQuery 和函数 .live() 检测到页面上的任何更改？

Question

<span id="one"> one </span>
<span id="two"> two </span>


$("#one").mouseover(function(){
   $(this).css('background-color', 'red');
});

$("#two").click(function(){
   $(this).css('background-color', 'green');
});


    if (any changes on the site) {
        alert('changes detected');
    }

如何检测页面上的任何更改？这可能吗？我想使用函数 .live()，但是如何？

我不想单独检查页面上的每个功能。

直播：http://jsfiddle.net/d4PMB/1/

Answer 1

您可以使用window.setTimeout()，捕获正文的当前 HTML (document.body.innerHTML) 并将其与之前保存的 HTML 进行比较：

var lastBodyHTML = "";
var changes = 0;

function test() {
    if (lastBodyHTML == "") {
        lastBodyHTML = document.body.innerHTML;
    }

    if (lastBodyHTML != document.body.innerHTML) {
        changes++;
        alert("CHANGE #" + changes);
        lastBodyHTML = document.body.innerHTML;
    }
    window.setTimeout(test, 1000);

};

test();

工作示例：http://jsfiddle.net/d4PMB/7/

Answer 2

你也可以处理DOMAttrModified，它比在你的页面上设置超时更干净......

查看这个 jsfiddle 示例：http://jsfiddle.net/d4PMB/9/

仅当 dom 更改时才会显示警报消息，似乎是您想要的，您也可以完全自定义它，使用事件类型。