(转)Firefox中Iframe的blur与focus事件问题

2009年04月21日
by junstyle
503 views
0 comments

最近在做一个网站的HTML文章发布功能，用到了HTML编辑器，这个是以Iframe为基础的编辑器（貌似网上大多的都是用iframe 的）。却发现一个问题，IE下运行得好好的，在Firefox里却始终不能提交更新后的数据到服务器上，找了半天原因才发现原来是在iframe的 onblur事件里面调了更新数据内容的方法，但firefox下却没有执行。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 />
</body>

试了一下果真可以直接触发，效果跟在IE下的一样。回过头去分析了一下代码，发现firefox中原来iframe上的事件挂到了iframe中的 contentWindow中去了，与真接在html元素里面写事件属性相比，IE可能把iframe上的事件关联到了contentWindow上了， 可firefox却不是这样的，还是各是各的。这样带来的问题是firefox想要给iframe加事件只能够用脚本去加了。
本来以为IE和firefox中对iframe的事件这部分定义不一样，回头去再去看看了HTML4.0中关于iframe的定义，果真是 iframe上面就没有任何事件的定义，看来是IE顺手给加上的。firefox号称最符合html标准，那么写在iframe上的“事件”没有任何响 应，自然也是合情合理的。DHTML手册上有一句话，由于没有“window”元素，body 元素将作为下列 window 对象事件的宿主：onblur, onbeforeunload, onfocus, onload 和 onunload。可HTML4.0里面body是有这两个事件的，所以也就不难解释为什么用脚本给iframe的contentWindow挂上事件就可以触发了，实际上这个事件是来自于contentWindow里面的body元素。

JAVASCRIPT, 未分类