iframe 内容更改事件？答案

【问题标题】：iframe contents change event?iframe 内容更改事件？
【发布时间】：2010-03-12 16:04:03
【问题描述】：

如何检测 iframe 内容何时发生变化，并根据下面的更改伪代码执行某些操作

 $('#waframe').contents().change(function(){
   //do stuff
  });

【问题讨论】：

标签： jquery iframe

【解决方案1】：

好吧，浏览器似乎在包含页面上下文中的<iframe> 元素上生成了一个“加载”事件。当“src”改变时“load”触发；不确定当 iframe 自身发生变化时它是否会触发。

编辑：是的，当页面“内部”重新加载时，它似乎会触发

因此你可以尝试：

$('iframe#yourId').load(function() {
  alert("the iframe has been loaded");
});

【讨论】：

这在 safari 或 opera 中似乎不会触发我尚未检查 ie 或 chrome
嗯。好吧，Microsoft 文档对此主题并不清楚。为了测试它，我所做的只是有一个带有 iframe 的小页面，然后我将 iframe 指向我的一个随机域。在测试页面中，我只是为 iframe 元素上的“加载”设置了一个 jQuery 事件监听器。
它确实可以在 ff 中使用，这很酷，但我需要一些可以在整个电路板上或至少在大多数情况下都可以使用的东西
我已经在 Chrome 24.0.1312.XX、Opera 12.14、Epiphany（GNOME 浏览器）和 Mozilla 18.0.2 中进行了测试。它适用于所有这些浏览器。我的操作系统是 Linux 12.04 Ubuntu。谢谢@Pointy。

【解决方案2】：

我正在做一个小把戏（很脏，但它有效）:) 来显示加载对象

function changeDet(old){ //detect src changes
    if($("iframe#ifID").attr('src') != old){
        $("iframe#ifID").width(0); //error if i hide ...?
    }

    setTimeout('changeDet("' + $("#db").attr('src') + '")',10);
}

var df = $('#iframe#ifID');

df.load(function(){ //content loaded
setTimeout('$("#db").width(var_default_width);',100);
});

changeDet();

$(function(){   
    //jq stuffs...
})
</script>

【讨论】：

不太可行，因为您必须每 10 毫秒进行一次字符串比较，当文档大小增加到 MB 时，这很容易成为负担。
避免在setTimeout 中使用字符串a) 存在安全风险，b) 速度慢，c) JS 解释器无法正常处理。

【解决方案3】：

您可以使用它来触发更改事件。适用于 IE8 和 firefox

if(document.addEventListener){
    yourIFrameObject.contentWindow.document.addEventListener('keyup', yourFunction, false);
   // window.frames[0].document.addEventListener('keyup', yourFunction, false);
}
else{
//for IE8
    yourIFrameObject.contentWindow.document.attachEvent('onkeyup', yourFunction);
}

如有必要，您可以使用mouseup 语句

【讨论】：