jquery - 检测 iframe 变化的内容，内容是动态的（jQuery mobile）

Question

好的，我在 iFrame 中加载了一个支持 jQuery 移动的页面。

通常，如果我想检测 iframe 内容更改，我会使用：

$('iframe').load(function(){
   //content changed!
});

但在这种情况下，它不同，这个 iframe 加载了一个启用了 jQuery 移动的页面（它是一个移动站点）。jQuery mobile 使用 ajax 从服务器获取 html 数据。然后更改页面内容而不重新加载。我认为它被称为动态内容。

注意：iframe 内页面的域与父窗口域相同。

那么我将如何检测此 iframe 内容更改？

Answer 1

未经测试，但你有 ajaxStart 和 ajaxComplete 方法，它会触发，你可以尝试：

$('#iframe').bind('load',function(){
    var instance = this.contentWindow.jQuery,
        doc = this.contentWindow.document;

    instance(doc).ajaxStart(function(){console.log('ajaxStart');});
    instance(doc).ajaxComplete(function(){console.log('ajaxComplete');});
});

Answer 2

如果您不想使用 jQuery 旧的“绑定”，请尝试：

$('#my-iframe-id').load(function(){

    var instance = this.contentWindow.jQuery,
    doc = this.contentWindow.document;

    instance(doc).ajaxStart(function(){
        console.log('ajaxStart');
    });
    instance(doc).ajaxStop(function(){
        console.log('ajaxStop');
        // This is the place to check or compare window heights = changed content
    });
    instance(doc).ajaxComplete(function(){
        console.log('ajaxComplete');
    });

});