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

时间:2011-11-02 11:08:08

标签: javascript jquery html

<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/

2 个答案:

答案 0 :(得分:4)

您可以使用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/

答案 1 :(得分:3)

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

请参阅此jsfiddle示例:http://jsfiddle.net/d4PMB/9/

仅在dom更改时显示的警告消息,似乎是您想要的,您还可以使用事件类型对其进行完全自定义。