本文整理了IE与Firefox在JavaScript开发中的常见兼容性问题及解决方案,涵盖window.event获取、Form提交屏蔽、事件源识别、事件监听注册、innerText模拟、长度单位处理、子节点获取以及XmlHttp发送数据等关键场景的具体写法与注意事项。
IE与Firefox JavaScript兼容性处理指南
1. window.event 兼容脚本
2. 屏蔽 Form 提交事件
3. 获取事件源
4. 添加事件兼容写法
5. Firefox 注册 innerText 写法
6. 长度
7. 父控件下的子控件
8. XmlHttp
1. window.event 兼容脚本
function getEvent(){ // 获取浏览器事件,同时兼容 ie 和 ff 的写法
if(document.all) return window.event;
func=getEvent.caller;
while(func!=null){
var arg0=func.arguments[0];
if(arg0){
if((arg0.constructor==Event arg0.constructor ==MouseEvent)
(typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){
return arg0;
}
}
func=func.caller;
}
return null;
}
每次用事件之前 Firefox 都需要用 getEvent() 获取一下,否则就是空
2. 屏蔽 Form 提交事件
event.returnValue=false;// for IE
evt.preventDefault();//for firefox
3. 获取事件源
var source=event.srcElement //IE
var source=event.target //firefox
4. 添加事件兼容写法
function addEvent(oElement,sEvent,func){
if (oElement.attachEvent){
oElement.attachEvent(sEvent,func);
}
else{
sEvent=sEvent.substring(2,sEvent.length);
oElement.addEventListener(sEvent,func,false);
}
}
用法:addEvent(window,"onload",Start);
5. Firefox 注册 innerText 写法
//注册 firefox innerText
HTMLElement.prototype.__defineGetter__("innerText",
function(){
var anyString = "";
var childS = this.childNodes;
for(var i=0; i if(childS[i].nodeType==1)
anyString += childS[i].tagName=="BR" ? '\n' : childS[i].innerText;
else if(childS[i].nodeType==3)
anyString += childS[i].nodeValue;
}
return anyString;
}
);
HTMLElement.prototype.__defineSetter__("innerText",
function(sText){
this.textContent=sText;
}
);
6. 长度:FireFox 长度必须加“px”,IE 无所谓
7. 父控件下的子控件:IE 是“children”,FireFox 是“childNodes”
8. XmlHttp
在 IE 中,XmlHttp.send(content) 方法的 content 可以为空,而 firefox 则不能为空,应该用 send(" "),否则会出现 411 错误