文档章节

(转载)JavaScript在IE浏览器和Firefox浏览器中的差异总结

小微
 小微
发布于 2012/04/24 11:27
字数 931
阅读 92
收藏 0

本文转载自:http://www.bairuiw.com/front-end-skill/3903.html

JavaScript在IE浏览器和Firefox浏览器中存在一些差异,以下对这些差异部分进行了总结,以及解决方案: 

1.HTML对象的 id 作为对象名的问题 

IE:HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用 

Firefox:不支持

解决方法:使用document.getElementById替代document.all

2.如果控件只有name,没有id, 用getElementById时

IE:可以找到对象 

Firefox:返回NULL

解决方法:所有控件必须设置ID属性

3.Eval

IE:支持,利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象

Firefox:不支持

解决方法:统一使用getElementById(idName) 代替 eval(idName)

4.Event

IE:用全局对象window.event

Firefox:event只能在事件发生的现场使用,在调用函数时传入event对象

解决方法:使用之前做一下浏览器类型判断,各用各的

5.对象名称中美元符号‘$’ 改为使用下划线‘_’ 

6.集合类对象问题

IE:可以使用()或[]获取集合类对象

Firefox:只能使用[]获取集合类对象

现有代码中存在许多,不能在 Firefox 下运行 

解决方法:统一使用[]获取集合类对象。document.form.item(“itemName”) 这样的语句改为document.form.elements["elementName"]

7.变量名与某 HTML 对象 id 相同的问题

IE:不能使用与 HTML 对象 id 相同的变量名

Firefox:可以使用 

解决方法:在声明变量时,一律加上 var ,以避免歧义,这样在 IE 中亦可正常运行。此外,最好不要取与 HTML 对象 id 相同的变量名,以减少错误

8.Event定位问题

IE:支持event.x 和event.y

Firefox:支持event.pageX和event.pageY

解决方法,统一使用event.clientX和event.clientY,但是在Firefox中event.clientX 与 event.pageX 有微妙的差别(当整个页面有滚动条的时候),不过大多数时候是等效的。如果要完全一样,可以判断浏览器类型后对应使用

9.父结点的问题

IE:parentElement parentElement.children

Firefox:parentNode parentNode.childNodes 

childNodes的下标的含义在IE和Firefox中不同,Firefox使用DOM规范,childNodes中会插入空白文本节点。一般可以通过node.getElementsByTagName()来回避这个问题。

当html中节点缺失时,IE和Firefox对parentNode的解释不同。例如: 

1
2
3
4
5
< form >
     < table >
         < input />
     </ table >
</ form >

IE:input.parentNode的值为空节点

Firefox:input.parentNode的值为form 

解决方法:Firefox中节点没有removeNode方法,必须使用如下方法 node.parentNode.removeChild(node) 

10.const 问题

IE:不支持 const 关键字。如 const constVar = 32; 在IE中这是语法错误

Firefox:支持

解决方法:不使用 const ,以 var 代替

11.body 对象

IE:在body标签完全被读入之后才存在

Firefox:在body标签没有被浏览器完全读入之前就存在

12.自定义属性问题

IE:可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性 

Firefox:只能使用getAttribute()获取自定义属性

解决方法:统一通过getAttribute()获取自定义属性

13.event.srcElement问题

IE:even.srcElement

Firefox:even.target

解决方法:使用时判断浏览器类型,各用各的

14.模态和非模态窗口

IE:支持模态和非模态窗口

Firefox:不支持

解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口

15.innerText

IE:innerText

Firefox:textContent

16.类似 obj.style.height = imgObj.height 的语句

IE:有效

Firefox:无效

解决方法:统一使用obj.style.height = imgObj.height + ‘px’;

本文转载自:http://www.bairuiw.com/front-end-skill/3903.html

小微
粉丝 117
博文 78
码字总数 81696
作品 0
海淀
程序员
私信 提问
Firefox和IE之间7个JavaScript的差异

尽管 JavaScript 历史上使用冗长而令人生厌的代码块来标的特定浏览器的时期已经结束了,但是偶尔使用一些简单的代码块和对象检测来确保一些代码在用户机器上正常工作依然是必要的。 这篇文章...

asurann
2010/01/26
101
0
兼顾性能和兼容体验:HTML5时代的浏览器全面测试

  导言:自1981年IBM推出第一台PC以来,桌面电脑以及随后不断涌现的笔记本、平板以及智能手机等设备越来越普及,而近20年来互联网的出现和高速发展,则让浏览器成为这些设备上使用率最高的...

想你一起
2012/11/20
365
7
Firefox和IE之间7个JavaScript的差异

尽管 JavaScript 历史上使用冗长而令人生厌的代码块来标的特定浏览器的时期已经结束了,但是偶尔使用一些简单的代码块和对象检测来确保一些代码在用户机器上正常工作依然是必要的。 这篇文章...

crazyinsomnia
2010/01/21
517
1
屏蔽鼠标右键的JS代码,兼容IE6 IE7 IE8 Firefox Chrome

屏蔽鼠标右键的JS代码,兼容IE6 IE7 IE8 Firefox Chrome 我转载的这篇文章,实际应用了一下并验证了在IE8,Firefox 6.0.2,chrome14.0.835版本中的确有效果。 <!DOCTYPE html PUBLIC "-//W3...

LionelShen
2011/09/19
3.5K
0
五大主流浏览器四大综合性能测试

近日,浏览器领域相继迎来了多个主要品牌产品的重要版本,厂商都宣扬各自的产品速度大幅提升、性能更加优化,原本就剑拔弩张的竞争变得更加激烈。下面是科技网站Betanews针对五大主流浏览器综...

小卒过河
2011/07/23
2.8K
21

没有更多内容

加载失败,请刷新页面

加载更多

聊聊nacos config的deleteConfig

序 本文主要研究一下nacos config的deleteConfig ConfigController nacos-1.1.3/config/src/main/java/com/alibaba/nacos/config/server/controller/ConfigController.java @Controller@Re......

go4it
昨天
4
0
面试:原来Redis的五种数据类型底层结构是这样的

关注我,可以获取最新知识、经典面试题以及微服务技术分享   在Redis中会涉及很多数据结构,比如SDS,双向链表、字典、压缩列表、整数集合等等。Redis会基于这些数据结构自定义一个对象系统...

ccww_
昨天
5
0
java发送html模板的高逼格邮件

最近做了一个监测k8s服务pod水平伸缩发送邮件的功能(当pod的cpu/内存达到指定阈值后会水平扩展出多个pod、或者指定时间内pod数应扩展到指定数量),一开始写了个格式很low的邮件,像下面这样...

码农实战
昨天
10
0
php-fpm配置文件详解/MariaDB密码重置、慢查询日志

来源:https://blog.csdn.net/Powerful_Fy php-fpm主配置文件路径:/usr/local/php-fpm/etc/php-fpm.conf #位于安装php安装目录下的etc/目录中,该文件中最后一行将配置文件指向:include=/...

asnfuy
昨天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部