Question

好的，我在iFrame中加载了启用jQuery mobile的页面。

通常情况下，如果我想检测iframe内容的变化，请使用：

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

但在这种情况下它的不同，这个iframe加载了一个启用了jQuery mobile的页面（它是一个移动站点）。 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');
    });

});

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

2 个答案: