IE与FF下javaｓｃｒｉｐｔ的兼容性

Javaｓｃｒｉｐｔ兼容性一直是个大问题，Web开发人员很长一段时间。正式规范的差异，事实上的标准，和各种实现方式使许多开发商上下日夜做饭。为此，我们主要总结了IE和Firefox的Javaｓｃｒｉｐｔ兼容性从以下方面：
复制代码代码如下所示：
1。功能和方法的差异；
两。样式访问和设置；
三、DOM方法和对象引用；
四。事件处理；
五、兼容处理其他差异。
一、功能和方法的差异

1。getYear（）方法

{分析}首先查看以下代码：

复制代码代码如下所示：
VaR年=新的日期（）GetYear（）；
document.write（年）；
在伊江获得的日期是2010 。在Firefox中看到的日期是110

{兼容治疗}加上一年的判断，例如：

复制代码代码如下所示：
VaR年=新的日期（）GetYear（）；
年份=（年份＜1900（1900年以上）：年份）；
document.write（年）；
它也可以通过调用返回完整年份getutcfullyear：

复制代码代码如下所示：
VaR年=新的日期（）GetFullYear（）；
document.write（年）；
2。eval（）函数

在分析伊江{ }，你可以使用eval（idname ）或getElementById（idname ）获得的ID是idname HTML对象，和Firefox只能使用getElementById（idname ）到Firefox的对象。

兼容处理使用getElementById（idname ）获得idname HTML对象ID。

三.Const语句

{分析}在ie中没有使用const关键字，例如：

复制代码代码如下所示：
const constvar = 32；
在伊江，这是一个语法错误。

{兼容处理}不使用常量，而不使用const。

4。VaR

{分析}请参阅以下代码：

复制代码代码如下所示：
函数（STR）{
document.write（STR）；
}
这个函数在IE上正常运行，但在Firefox中是错误的。

{兼容处理}并在回声之前添加var是正常的，这是我们引用var的目的。

5。const的问题

{分析}没有在IE.使用例如关键字const，const constvar = 32；在伊江，这是一个语法错误。

{解决方案}不使用const，而不使用const。

两。样式访问和设置

1的浮点属性。CSS

{分析} Javaｓｃｒｉｐｔ来访问一个给定的CSS值最基本的语法object.style.property，但一些CSS属性在Javaｓｃｒｉｐｔ中的保留字相同，如浮

把这个写在伊江：

复制代码代码如下所示：
document.getelementbyid（头）。style.stylefloat =左；
用Firefox写这个：

复制代码代码如下所示：
document.getelementbyid（头）。style.cssfloat =左；
{兼容处理}在写入之前添加判断以确定浏览器是否IE：

复制代码代码如下所示：
如果（文件all）{ / /
document.getelementbyid（头）。style.stylefloat =左；
}
否则{未定义
document.getelementbyid（头）。style.cssfloat =左；
}
2。访问标记

{分析}，与浮点属性一样，还需要使用一个不可见的语法区别来访问标签中的。

把这个写在伊江：

复制代码代码如下所示：
VaR MyObject = document.getelementbyid（mylabel ）；
无功myattribute = myobject.getattribute（htmlFor ）；
用Firefox写这个：

复制代码代码如下所示：
VaR MyObject = document.getelementbyid（mylabel ）；
无功myattribute = myobject.getattribute（）；
兼容性的解决方案也是第一个判断浏览器类型的。

三.访问和设置类属性

{这两个浏览器使用不同的Javaｓｃｒｉｐｔ方法获取这个属性，原因是类是一个Javaｓｃｒｉｐｔ保留字。
所有的IE版本在IE8.0写：

复制代码代码如下所示：
VaR MyObject = document.getelementbyid（头）；
无功myattribute = myobject.getattribute（类名）；
对于IE8.0和Firefox的写作：

复制代码代码如下所示：
VaR MyObject = document.getelementbyid（头）；
无功myattribute = myobject.getattribute（类）；
此外，同样有差异的两个浏览器之间的setAttribute（）时用于设置类的属性。

复制代码代码如下所示：
setAttribute（类名
这种写作风格适用于所有版本的IE在IE8.0，并注意IE8.0不支持类名属性。

setAttribute（班

{兼容处理}

第一，这两个都写了：

复制代码代码如下所示：
VaR MyObject = document.getelementbyid（头）；
myobject.setattribute（班
myobject.setattribute（名
头班classvalue / /套
方法2，IE和FF都支持object.classname，所以你可以这样写：

复制代码代码如下所示：
VaR MyObject = document.getelementbyid（头）；
MyObject。类名=classvalue ；头班classvalue / /套
方法三，首先判断浏览器的类型，然后根据浏览器的类型使用相应的样式。

4。对象范围指派问题

{分析}在Firefox的陈述，类似于obj.style.height = imgobj.height无效。

{ }兼容处理统一使用obj.style.height = imgobj.height + 'px'；

5。添加样式

{分析}即使用addrules（）添加样式的方法，如stylesheet.addrule（P 如stylesheet.insertrule（p { color: # CCC }

{兼容处理}

复制代码代码如下所示：
如果（样式表。insertrule）{
/ / insertrule（）方法
其他{ }
/ / addrule（）方法
}
6。最后的风格

{分析}有时我们的自定义样式将失败，因为图案重叠，如一个类选择器和一个标签选择器定义的样式定义的风格，当后者失败。最终的风格是需要在这个时候。最后在伊江风格的ele.currentstyle写。属性名称，使用DOM标准写document.defaultview对象，如document.defaultview.getcomputedstyle（爱乐，null），这种方法是兼容FF。

{兼容处理}首先判断浏览器（文档all），然后执行上面的方法。

三、DOM方法和对象引用

1。使用方

{分析}首先查看一组代码：
复制代码代码如下所示：
<输入id按钮
价值=我nclick =警报（id.value只）：
在Firefox中，按钮没有响应。在伊江，它是可以的，因为对于IE，HTML元素的ID可以直接作为变量名在脚本中使用，而不是在Firefox中使用。

尝试使用W3C DOM兼容{写}治疗，当访问对象，使用document.getelementbyid（ID）的ID来访问对象，并在页面的ID必须是唯一的，并在标签名称同时访问对象，使用document.getelementsbytagname（div）{ 0 }。这是通过更多的浏览器支持。
复制代码代码如下所示：
输入按钮单击
onclick=警报（document.getelementbyid（'id'）。值）：
2。集合类对象访问

{ ie分析，可以使用（或）{ }获得对象的集合；Firefox只能使用{ }获取对象的集合：

（document.forms document.write（formname）。Src）；

如何能 / /伊江的表单对象的生命属性的访问

{ }兼容处理改变document.forms（formname ）的文件。形式{formname}。统一使用{ }获取对象的集合。

参考3。框架

{解析}可以通过ID或名称访问框架对应的窗口对象，而Firefox只能通过名称访问框架对应的窗口对象。

例如，如果框架标记是在顶层窗口中的HTM中写入的，则可以以这种方式访问它：

即：window.top.frameid或window.top.framename访问窗口对象；

火狐：访问此窗口对象的唯一方法是window.top.framename。

{兼容性处理}使用帧的名称访问帧对象，此外，在伊江和Firefox中都可以

Window.document.getElementById（frameid）是用于访问框架对象。

4。parentelement

{分析} IE支持和parentelement parentNode获取父节点的使用，和Firefox只能使用parentNode。

{ }因为兼容Firefox和IE支持DOM，所以父节点是用于访问父节点。

5。表操作

{分析}有没有效果，innerHTML或appendChild插入在伊江，而其他浏览器正常显示表。

兼容性过程的解决方案是添加到表的元素中，如下所示：

复制代码代码如下所示：
无功行= document.createelement（TR）；
VaR细胞= document.createelement（TD）；
无功cell_text = document.createtextnode（插入内容）；
cell.appendchild（cell_text）；
row.appendchild（细胞）；
document.getelementsbytagname（把）{ 0 }。appendChild（行）；
6。删除节点（）和removechild removeNode（）（）

{分析} appendnode可以IE和Firefox下正常使用，但只能用在IE removeNode

方法对removeNode功能是删除一个节点，语法node.removenode（假）或node.removenode（真正的），和返回值是删除节点。

RemoveNode（假）表明，只有指定的节点被删除，和节点的原子节点晋升为原来的父节点的子节点。

removeNode（真）表示指定节点的删除和所有下级节点，删除节点成为孤立的节点不再有孩子和父母。

{在Firefox兼容处理}节点没有removeNode方法，它只能由removechild法代替。首先，它返回父节点，并从父节点删除要删除的节点。

node.parentnode.removechild（节点）；

为了能够在伊江和Firefox中正常使用，以及父节点的一层，然后删除。

7。获得子节点

{分析}子的下标的意思是伊江和Firefox不同，看看下面的代码：

复制代码代码如下所示：

一
二
三

<输入类型=按钮值单击我！onclick=
警报（document.getelementbyid（主）。ChildNodes。长）>
分别用IE和Firefox，IE的结果是3，而Firefox 7，Firefox使用DOM规范，#文本来表示文本（实际上是毫无意义的空格和换行符，等等）在Firefox中，它也将被解析为一个节点。在伊江，唯一有意义的文本将被分解成#文本。

{兼容处理}

方法1，当一个孩子节点得到的，问题是可以避免的node.getelementsbytagname getElementsByTagName（）。但明显减少遍历DOM结构比使用复杂的子子，因为能更好的处理DOM的层次结构。

方法二，在实际使用中，当Firefox遍历子节点时，可以将其添加到for循环中。

如果（子节点。节点名= =#文本继续）； / /或节点类型= = 1。

这可以跳过一些文本节点。

延伸阅读

在伊江和Firefox子之间的差异

8。火狐浏览器不支持InnerText

{分析} Firefox不支持InnerText，它支持文本内容实现innerText，但内容不考虑显示为一个元素像innerText，所以它是不与IE.完全兼容，如果你不使用的内容，你可以使用innerHTML代替HTML代码里面的字符串，也可以用js写的一个方法，这可以作为一个参考的火狐innerText属性。

兼容性处理是通过判断浏览器的类型来兼容的：

复制代码代码如下所示：
如果（文件all）{
document.getelementbyid（'element）。innerText =我的短信；
别的{ }
document.getelementbyid（'element）。内容=我的短信；
}
四。事件处理

如果使用Javaｓｃｒｉｐｔ涉及事件的处理，有必要了解在不同的浏览器中的Javaｓｃｒｉｐｔ事件不同，三主要的事件模型（支持三事件模型在参考曾经），他们是NN-，IE4 +和W3C /萨法。

1。window.event

{分析}首先查看一段代码

复制代码代码如下所示：
函数et（）
{
警报（事件）；
}
在伊江运行的上述代码的结果是{ }，并且它不在Firefox上运行。

因为在伊江，事件可以直接用作窗口对象的属性，但在Firefox中，W3C模型是通过引用的方式来传播事件的。也就是说，你需要为你的函数提供一个事件响应接口。

{兼容性处理}添加事件判断并根据不同的浏览器获得正确的事件：

复制代码代码如下所示：
函数et（）
{
EVT = evtevt：（窗口。eventwindow。事件：空）；
与IE和Firefox兼容
警报（EVT）；
}
2。键盘值的获取

{分析显示} IE和Firefox具有不同的获取键盘值的方法。这是event.which在Firefox是相当于在IE.的情况下相互理解，兼容性测试的键码，其中，在键盘事件字符码可以称。

{兼容处理}

复制代码代码如下所示：
功能mykeypress（EVT）{
与IE和Firefox兼容的移动对象/
极值理论（EVT）=（EVT：（窗口。事件）window.event：）
用IE和Firefox / /得到的移动对象的关键兼容
var关键字= EVT。keycodeevt。关键词：evt.which；
如果（evt.ctrlkey（关键= = 13 | | {关键= = 10））
在同一时间输入和输入
做某事；
}
}
收购3。事件源

{注}使用事件委托分析时，可以从该事件到底确定哪些元素，通过事件源，然而，在伊江，事件对象有一个srcelement财产，但没有目标属性；Firefox，即使对象有一个属性，但不是srcelement属性。

{兼容处理}

复制代码代码如下所示：
元=功能（EVT）{ / /捕获当前事件对象
EVT = EVT | | window.event；
返回
（obj =事件。srcelementevent。srcelement：事件。目标；）；
}
4。事件监测

在事件监听器处理{分析}，即提供attachevent和detachevent两个接口，而Firefox提供addEventListener和removeEventListener。

最简单的兼容性处理是封装两套接口：

复制代码代码如下所示：
函数AddEvent（元素、事件，Handler）{
如果（元素。attachevent）{
elem.attachevent（+事件名称，函数（）{
handler.call（元）}）；
我们使用调用回调函数（ / /），让这一点元素
} else if（元素。addEventListener）{
elem.addeventlistener（事件，处理，假）；
}
}
功能removeevent（元素、事件，Handler）{
如果（元素。detachevent）{
elem.detachevent（+事件名称，函数（）{
handler.call（元）}）；
我们使用调用回调函数（ / /），让这一点元素
} else if（元素。removeEventListener）{
elem.removeeventlistener（事件，处理，假）；
}
}
我们需要特别注意。在Firefox中，事件处理函数中的这个值指向侦听器本身，而不是在IE.，可以使用回调函数调用使当前上下文指向侦听器的元素。

5。鼠标的位置

{分析}在IE，即使对象x和y的属性，但没有pagex，pagey属性；Firefox，即使对象有pagex和pagey属性，但没有X，X属性。

{ }兼容处理使用MX（MX =事件。X事件。X：事件。pagex；）而不是event.pagex IE下的事件下，X或Firefox。复杂点必须考虑的绝对位置

复制代码代码如下所示：
功能getabspoint（e）{
var x = y = e.offsettop e.offsetleft；
而（E = e.offsetparent）{
x = e.offsetleft；
Y = e.offsettop；
}
警报（）
}
五、兼容处理其他差异

1。对象

{分析}新的ActiveX对象（微软。XMLHTTP ）；它只在伊江工作，Firefox不支持，但支持XMLHttpRequest。

{兼容处理}

复制代码代码如下所示：
功能createxhr（）{
VaR XHR = null；
如果（窗口。XMLHttpRequest）{
XHR =新的ActiveX对象（MSXML2. XMLHTTP ）；
其他{ }
{试
XHR =新的ActiveX对象（微软。XMLHTTP ）；
}
catch（）{
XHR = null；
}
}
如果（！XHR) return;
返回XHR；
}
2。模态和非模态窗口

{分析}即可以打开模态和非模态窗口通过showModalDialog和showmodelessdialog，但Firefox不支持。

{解}打开一个新窗口直接使用window.open（pageurl、名称、参数）。如果你需要传递的参数，你可以使用iframe框架或。

三.input.type属性问题

在IE的input.type属性是只读的，但可以修改下火狐

4。选择元素的选项操作

设置选项IE和Firefox是不同的：

Firefox：可以直接设置

复制代码代码如下所示：
option.text = 'foooooooo；
ie：只能设置

复制代码代码如下所示：
option.innerhtml = 'fooooooo；
删除选择选项的方法：

火狐：可以

复制代码代码如下所示：
Select.options.remove（SelectedIndex）；
IE7：可以用

复制代码代码如下所示：
选择；
IE6：需要写

复制代码代码如下所示：
选择。选择{我} outerHTML = null；
5分析。img对象alt和title

{分析} img alt和title对象有两个属性，不同的是，ALT：暗示当图片不存在或者当负载是错误的。

标题：画面的提示显示，如果标题没有定义在伊江，ALT也可作为小费IMG，但在Firefox，他们在标准中的定义一致的充分利用。

当此对象的定义。

{兼容处理}最好写ALT和标题对象，以确保所有浏览器都能正常使用。

6。IMG SRC刷新问题

{分析}首先查看代码：

复制代码代码如下所示：
在IE下，这个代码可以用来刷新图片，但不是在Firefox下，主要的问题是缓存。

{兼容处理}地址后面的一个随机数被解决了：

复制代码代码如下所示：
总结

在Javaｓｃｒｉｐｔ中的IE和Firefox的诸多差异，实现兼容性，我认为有必要把一些常见的合并成一个js库，如DOM操作、事件的处理XMLHttpRequest的请求，或者你也可以选择使用一些现有的库（如jQuery，YUI，ExtJS等）但我认为有必要了解这些差异，所以我们参与代码的兼容性和可用性是非常有帮助的。

这个方法比问题多，不管浏览器如何兼容人，前端开发都可以很容易地解决！