当前位置：首页 > 资讯 > 技术文档

IE和Firefox的Javascript兼容性总结[推荐收藏]

时间：2022-12-05 11:24 编辑：来源：阅读：
扫一扫，手机访问

摘要：IE和Firefox的Javascript兼容性总结[推荐收藏]

长久以来JavaScript兼容性一直是Web开发者的一个主要问题。在正式规范、事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬。为此，主要从以下几方面差异总结IE和Firefox的Javascript兼容性: 　　一、函数和方法差异；　　二、样式访问和设置；　　三、DOM方法及对象引用；　　四、事件处理；　　五、其他差异的兼容处理。 [b]一、函数和方法差异 [/b]1. getYear()方法【分析说明】先看一下以下代码：

[url=http://www.1sucai.cn/article/28594.htm]IE和FireFox中的childNodes区别[/url]》 8. Firefox不能对innerText支持【分析说明】Firefox不支持innerText，它支持textContent来实现innerText，不过textContent没有像innerText一样考虑元素的display方式，所以不完全与IE兼容。如果不用textContent，字符串里面不包含HTML代码也可以用innerHTML代替。也可以用js写个方法实现，可参考《[url=http://www.1sucai.cn/article/21194.htm]为firefox实现innerText属性[/url]》一文。【兼容处理】通过判断浏览器类型来兼容：

[u]复制代码[/u] 代码如下:

if(document.all){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}

[b]四、事件处理 [/b]　　如果在使用javascript的时候涉及到event处理，就需要知道event在不同的浏览器中的差异，主要的JavaScript的事件模型有三种（参考《Supporting Three Event Models at Once》），它们分别是NN4、IE4+和W3C/Safar。 1. window.event 【分析说明】先看一段代码

[u]复制代码[/u] 代码如下:

function et()
{
alert(event);//IE: [object]
}

　　以上代码在IE运行的结果是[object]，而在Firefox无法运行。　　因为在IE中event作为window对象的一个属性可以直接使用，但是在Firefox中却使用了W3C的模型，它是通过传参的方法来传播事件的，也就是说你需要为你的函数提供一个事件响应的接口。【兼容处理】添加对event判断，根据浏览器的不同来得到正确的event：

[u]复制代码[/u] 代码如下:

function et()
{
evt=evt?evt:(window.event?window.event:null);
　　//兼容IE和Firefox
alert(evt);
}

2. 键盘值的取得【分析说明】IE和Firefox获取键盘值的方法不同，可以理解，Firefox下的event.which与IE下的event.keyCode相当。关于彼此不同，可参考《键盘事件中keyCode、which和charCode 的兼容性测试》【兼容处理】

[u]复制代码[/u] 代码如下:

function myKeyPress(evt){
//兼容IE和Firefox获得keyBoardEvent对象
evt = (evt) ? evt : ((window.event) ? window.event : "")
//兼容IE和Firefox获得keyBoardEvent对象的键值
var key = evt.keyCode?evt.keyCode:evt.which;
if(evt.ctrlKey && (key == 13 || key == 10)){
　　　　　　//同时按下了Ctrl和回车键
//do something;
}
}

3. 事件源的获取【分析说明】在使用事件委托的时候，通过事件源获取来判断事件到底来自哪个元素，但是，在IE下，event对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性。【兼容处理】

[u]复制代码[/u] 代码如下:

ele=function(evt){ //捕获当前事件作用的对象
evt=evt||window.event;
　　return
　　(obj=event.srcElement?event.srcElement:event.target;);
}

4. 事件监听【分析说明】在事件监听处理方面，IE提供了attachEvent和detachEvent两个接口，而Firefox提供的是addEventListener和removeEventListener。【兼容处理】最简单的兼容性处理就是封装这两套接口：

[u]复制代码[/u] 代码如下:

function addEvent(elem, eventName, handler) {
　　if (elem.attachEvent) {
　　　　elem.attachEvent("on" + eventName, function(){
　　　　　　　　　　　　　　　　　　　　handler.call(elem)});
　　　　//此处使用回调函数call()，让this指向elem
　　} else if (elem.addEventListener) {
　　　　elem.addEventListener(eventName, handler, false);
　　}
}
function removeEvent(elem, eventName, handler) {
　　if (elem.detachEvent) {
　　　　elem.detachEvent("on" + eventName, function(){
　　　　　　　　　　　　　　　　　　　　handler.call(elem)});
　　　　//此处使用回调函数call()，让this指向elem
　　} else if (elem.removeEventListener) {
　　　　elem.removeEventListener(eventName, handler, false);
　　}
}

　　需要特别注意，Firefox下，事件处理函数中的this指向被监听元素本身，而在IE下则不然,可使用回调函数call，让当前上下文指向监听的元素。 5. 鼠标位置【分析说明】IE下，even对象有x，y属性，但是没有pageX，pageY属性；Firefox下，even对象有pageX，pageY属性，但是没有x，y属性。【兼容处理】使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX。复杂点还要考虑绝对位置。

[u]复制代码[/u] 代码如下:

function getAbsPoint(e){
var x = e.offsetLeft, y = e.offsetTop;
while (e = e.offsetParent) {
x += e.offsetLeft;
y += e.offsetTop;
}
alert("x:" + x + "," + "y:" + y);
}

[b]五、其他差异的兼容处理 [/b]1. XMLHttpRequest 【分析说明】new ActiveXObject("Microsoft.XMLHTTP");只在IE中起作用，Firefox不支持，但支持XMLHttpRequest。【兼容处理】

[u]复制代码[/u] 代码如下:

function createXHR() {
var xhr=null;
if(window.XMLHttpRequest){
xhr=new ActiveXObject("Msxml2.XMLHTTP");
}else{
try {
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
catch() {
xhr=null;
}
}
if(!xhr)return;
return xhr;
}

2. 模态和非模态窗口【分析说明】IE中可以通过showModalDialog和showModelessDialog打开模态和非模态窗口，但是Firefox不支持。【解决办法】直接使用window.open(pageURL,name,parameters)方式打开新窗口。如果需要传递参数，可以使用frame或者iframe。 3. input.type属性问题 IE下 input.type属性为只读，但是Firefox下可以修改 4. 对select元素的option操作设置options，IE和Firefox写法不同： Firefox:可直接设置 option.text = 'foooooooo'; IE:只能设置 option.innerHTML = 'fooooooo'; 删除一个select的option的方法： Firefox:可以 select.options.remove(selectedIndex); IE7:可以用 select.options[i] = null; IE6:需要写 select.options[i].outerHTML = null; 5. img对象alt和title的解析【分析说明】img对象有alt和title两个属性，区别在于，alt：当照片不存在或者load错误时的提示。 title：照片的tip说明, 在IE中如果没有定义title，alt也可以作为img的tip使用，但是在Firefox中，两者完全按照标准中的定义使用在定义img对象时。【兼容处理】最好将alt和title对象都写全，保证在各种浏览器中都能正常使用。 6. img的src刷新问题【分析说明】先看一下代码：

[u]复制代码[/u] 代码如下:

<img id="pic" onclick= "this.src= 'a.jpg'"
src="aa.jpg" style="cursor: pointer"/>

在IE 下，这段代码可以用来刷新图片，但在FireFox下不行。主要是缓存问题。【兼容处理】在地址后面加个随机数就解决了:

[u]复制代码[/u] 代码如下:

<img id="pic" onclick= "javascript:this.src=this.src+'?'
　　　　　+Math.random()"src="a.jpg" style="cursor: pointer"/>

总结　　IE和Firefox的Javascript方面存在着不少的差异，要做到兼容，我觉得很有必要把一些常见的整理成一个js库，如DOM的操作，事件的处理，XMLHttpRequest请求等，或者也可以选择使用现有的一些库(如jQuery，YUI，ExtJs等)，不过我觉得还是有必要了解一下这些差异，这样对于我们参加兼容性和可用性代码很有帮助。　　办法总比问题多，无论浏览器兼容如何折腾人，做前端开发的总能迎刃而解的！

全部评论(0)

上一篇：一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
下一篇：JavaScript自学笔记(必看篇)

资讯排行榜
更多>>

联系客服

客服电话：
400-000-3129

微信版

扫一扫进微信版

返回顶部