不同浏览器对事件触发的条件可能有点略微区别，今天我们说下Firefox浏览器中Iframe的focus和blur事件触发无效问题。
解决方案：
1：利用contentWindow，直接使用jquery的blur和focus，如果使用原生，加一个浏览器判断然后attachEvent 和 addEventListener就行了
| 代码如下 | 复制代码 |
|
$($('#frame')[0].contentWindow).blur(function(){}) $($('#frame')[0].contentWindow).focus(function(){}) |
|
2：setTimeout解决它
| 代码如下 | 复制代码 |
|
$('#target').focusout(function() { setTimeout(function() { $(this).focus(); }, 0); }); |
|
为什么FF存在这种问题？其实在HTML标准中iframe是没有这些事件的，但是IE给加上了。在火狐下可以通过contentWindow这种方式来处理这种事件
再次深度GOOGLE，发现了一个老外写的很不错的代码：
| 代码如下 | 复制代码 |
|
<script> function setit(){ if(document.all){ document.getElementById("myframe").attachEvent("onblur",dothis); }else{ document.getElementById("myframe").contentWindow.addEventListener("blur",dothis,false); } } function dothis(){ alert("blurred"); } </script> <body onload="setit()"> <iframe width="155" height="144" id="myframe"></iframe> <input /> |
|
试了一下果真可以直接触发，效果跟在IE下的一样。回过头去分析了一下代码，发现firefox中原来iframe上的事件挂到了iframe中的contentWindow中去了，与真接在html元素里面写事件属性相比，IE可能把iframe上的事件关联到了contentWindow上了，可firefox却不是这样的，还是各是各的。这样带来的问题是firefox想要给iframe加事件只能够用脚本去加了。
时间： 2024-10-29 04:44:12