JavaScript在IE和FF下的兼容性问题

JavaScript在不同浏览器下存在着兼容性问题，主要是由于浏览器厂商对于JavaScript规范的实现存在差异。其中，IE与Firefox是JavaScript最常用的两个浏览器，就其在两者下的兼容性问题，本文将提供完整攻略，帮助我们解决问题。

1.常见的兼容性问题

在IE和Firefox中，常见的JavaScript兼容性问题如下：

• DOM元素属性的设置
• 事件绑定方式
• XMLHttpRequest对象的创建方式
• 本地存储对象的使用方式
• 对象方法的支持程度

2.解决方案

针对上述问题，我们可以采用以下解决方案：

2.1 DOM元素属性的设置

在IE浏览器下，设置DOM元素属性方式如下：

document.getElementById('myId').innerText='new text';

在Firefox浏览器下，设置DOM元素属性方式如下：

document.getElementById('myId').textContent='new text';

因此，我们可以采用以下方式解决：

var element = document.getElementById('myId');
if (element.innerText) {
    element.innerText = 'new text';
} else {
    element.textContent = 'new text';
}

2.2 事件绑定方式

在IE浏览器下，绑定事件方式如下：

var element = document.getElementById('myId');
element.attachEvent('onclick', function() {
    //perform action
});

在Firefox浏览器下，绑定事件方式如下：

var element = document.getElementById('myId');
element.addEventListener('click', function() {
    //perform action
}, false);

因此，我们可以采用以下方式解决：

var element = document.getElementById('myId');
if (element.attachEvent) {
    element.attachEvent('onclick', function() {
        //perform action
    });
} else {
    element.addEventListener('click', function() {
        //perform action
    }, false);
}

3.示例说明

以下是两条典型的兼容性示例：

3.1 对象方法的支持程度

在IE浏览器下，不支持indexOf()方法，我们可以通过以下代码检测是否支持该方法：

if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function(item) {
        var result = -1;
        for (var i = 0, len = this.length; i < len; i++) {
            if (this[i] === item) {
                result = i;
                break;
            }
       }
       return result;
    }
}

在Firefox浏览器下不需要这段代码，因为Firefox浏览器默认支持indexOf()方法。

3.2 XMLHttpRequest对象的创建方式

在IE浏览器下，创建XMLHttpRequest对象需要使用ActiveXObject方式，我们可以通过以下代码实现：

var xmlhttp;
if (window.XMLHttpRequest) {
    xmlhttp=new XMLHttpRequest();
} else if (window.ActiveXObject) {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

在Firefox浏览器下不需要这段代码，因为Firefox浏览器默认支持XMLHttpRequest对象。