2009年4月

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

最近在做一个网站的HTML文章发布功能,用到了HTML编辑器,这个是以Iframe为基础的编辑器(貌似网上大多的都是用iframe 的)。却发现一个问题,IE下运行得好好的,在Firefox里却始终不能提交更新后的数据到服务器上,找了半天原因才发现原来是在iframe的 onblur事件里面调了更新数据内容的方法,但firefox下却没有执行。GOOGLE,发现了一个老外写的如下代码:

[code lang="html"]
<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>
[/code]

试了一下果真可以直接触发,效果跟在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元素。

Ajax操作中维持历史记录

进行了一个ajax操作后,如何才能在浏览器的历史记录里显示呢,IE里可以通过放一个隐藏的iframe,改变iframe的location或者dom内容即可在history里面显示记录,firefox中就比较简单了,只需改变页面地址就可以产生一条历史记录,如在url后面加#XXX,

轻松去掉flash中的右键菜单

在flash父容器里hack:firefox下阻止mousedown默认事件及事件传播;IE下给父容器setCapture。JavaScript脚本如下:

functionNoRightClick(pid){//pid:flash's parentNode id  说明:flash父容器的id
 
varel=document.getElementById(pid);
 
if(el.addEventListener){
 
el.addEventListener("mousedown",function(event){
  
if(event.button==2){
    
event.stopPropagation();//for firefox
    
event.preventDefault()//for chrome
  
}
 
},true);
 
}else{
 
el.attachEvent("onmousedown",function(){
  
if(event.button==2){
    
el.setCapture();
  
}
 
});
 
el.attachEvent("onmouseup",function(){
  
el.releaseCapture();
 
});
 
el.oncontextmenu=function(){
  
returnfalse;
 
};
 
}
};
 
html页面中的代码如下:
<body>
 
<divid="testContent"style="width:800px">
 
</div>
 
<scripttype="text/javascript">
  var so = new SWFObject("test.swf", "t1", "800", "550", "9", "#000000");
  so.addParam("quality", "high");
  so.addParam("name", "t1");
  so.addParam("id", "t1");
  so.addParam("algin", "middle");
  so.addParam("AllowScriptAccess", "sameDomain");
  so.addParam("menu", "false");
  so.addParam("wmode", "opaque");
  so.addParam("pluginspage", "http://www.adobe.com/go/getflashplayer");
  so.write("testContent");
 
  NoRightClick("testContent");
 
</script>
</body>