1.HTML对象获取问题

FireFox:document.getElementById(“idName”);

ie:document.idname或者document.getElementById(“idName”).

解决办法:统一使用document.getElementById(“idName”);

2.const问题

说明:Firefox下,可以使用const关键字或var关键字来定义常量;

IE下,只能使用var关键字来定义常量.

解决方法:统一使用var关键字来定义常量.

3.event.x与event.y问题

说明:IE下,event对象有x,y属性,但是没有pageX,pageY属性;

Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.

解决方法:使用mX(mX   =   event.x   ?   event.x   :   event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.

4.window.location.href问题

说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;

Firefox1.5.x下,只能使用window.location.

解决方法:使用window.location来代替window.location.href.

5.frame问题

以下面的frame为例:

1
<frame  src=”xxx.html”  id=”frameId”  name=”frameName”  />

(1)访问frame对象:

IE:使用window.frameId或者window.frameName来访问这个frame对象.frameId和frameName可以同名。

Firefox:只能使用window.frameName来访问这个frame对象.

另外,在IE和Firefox中都可以使用window.document.getElementById(“frameId”)来访问这个frame对象.

(2)切换frame内容:

在 IE和Firefox中都可以使用window.document.getElementById(“testFrame”).src   =   “xxx.html”或window.frameName.location   =   “xxx.html”来切换frame的内容.

如果需要将frame中的参数传回父窗口(注意不是opener,而是parent   frame),可以在frame中使用parent来访问父窗口。例如:parent.document.form1.filename.value=”Aqing”;

6.模态和非模态窗口问题

说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.

解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。

如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口.

例如:var   parWin   =   window.opener;   parWin.document.getElementById(“Aqing”).value   =   “Aqing”;

7.firefox与IE的父元素(parentElement)的区别

IE:obj.parentElement

firefox:obj.parentNode

解决方法:   因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择.

8.document.formName.item(”itemName”) 问题

问题说明:IE下,可以使用document.formName.item(”itemName”) 或document.formName.elements [“elementName”];Firefox 下,只能使用document.formName.elements[“elementName”]。

解决方法:统一使用document.formName.elements[“elementName”]。

9.集合类对象问题

问题说明:IE下,可以使用 () 或 [] 获取集合类对象;Firefox下,只能使用 [ ]获取集合类对象。

解决方法:统一使用 [] 获取集合类对象。

10.自定义属性问题

问题说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute() 获取自定义属性;Firefox下,只能使用getAttribute() 获取自定义属性。

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

11.input.type属性问题

问题说明:IE下input.type属性为只读;但是Firefox下input.type属性为读写。

解决办法:不修改input.type属性。如果必须要修改,可以先隐藏原来的input,然后在同样的位置再插入一个新的input元素。

12.event.srcElement问题

问题说明:IE下,even对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性。

解决方法:使用srcObj = event.srcElement ?event.srcElement : event.target;

如果考虑第8条问题,就改用myEvent代替event即可。

13.body载入问题

问题说明:Firefox的body对象在body标签没有被浏览器完全读入之前就存在;而IE的body对象则必须在body标签被浏览器完全读入之后才存在。

[注] 这个问题尚未实际验证,待验证后再来修改。

[注] 经验证,IE6、Opera9以及FireFox2中不存在上述问题,单纯的JS脚本可以访问在脚本之前已经载入的所有对象和元素,即使这个元素还没有载入完成。

14.事件委托方法

问题说明:IE下,使用document.body.onload = inject; 其中function inject()在这之前已被实现;在Firefox下,使用document.body.onload = inject();

解决方法:统一使用document.body.onload=new Function('inject()'); 或者document.body.onload = function(){/* 这里是代码 */}

[注意] Function和function的区别。

15.Table操作问题

问题说明:ie、firefox以及其它浏览器对于 table 标签的操作都各不相同,在ie中不允许对table和tr的innerHTML赋值,使用js增加一个tr时,使用appendChild方法也不管用。

解决方法://向table追加一个空行:

var row = otable.insertRow(-1);var cell = document.createElement(“td”);cell.innerHTML = “”;cell.className = “XXXX”;row.appendChild(cell);[注] 由于俺很少使用JS直接操作表格,这个问题没有遇见过。建议使用JS框架集来操作table,如JQuery。

16.对象宽高赋值问题

问题说明:FireFox中类似obj.style.height = imgObj.height的语句无效。

Ø CSS

1.cursor:hand   VS   cursor:pointer

firefox不支持hand,但ie支持pointer

解决方法:   统一使用pointer

2.innerText在IE中能正常工作,但在FireFox中却不行.

需用textContent。

菜鸟一只,如有不对之处,还望大神指正

原生js浏览器兼容性问题的更多相关文章

  1. [转载]JS浏览器兼容性问题

    from:http://dada-fangfang.iteye.com/blog/811749 做BS开发就难免会用到javascript,而每个浏览器对javascript的支持有不同.这就需要我们 ...

  2. 常用原生JS方法总结(兼容性写法)

    经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...

  3. 原生js方法document.getElementsByClassName在ie8及其以下的兼容性问题

    document.getElementsByClassName在ie8及其以下浏览器的兼容性问题,在ie8及其以下浏览器中不能使用,针对这个问题,下面给出详细的解决方法,感兴趣的朋友可以参考下     ...

  4. addEventListener和attachEvent介绍, 原生js和jquery的兼容性写法

    也许很多同仁一听到事件监听,第一想到的就是原生js的 addEventListener()事件,的确如此,当然如果只是适用于现代浏览器(IE9.10.11 | ff, chorme, safari, ...

  5. 浏览器兼容性-JS篇

    总结一下平时遇到的浏览器兼容性问题,本篇关于JS. 1.事件绑定 兼容写法: function add(obj,event){ if (obj.addEventListener) { obj.addE ...

  6. 兼容各版本浏览器,封装原生Js获取ClassName

    web前端开发工作中常常会用到获取元素的className,用jQuery的$(".class")方法也可以获取className,但是有时候牵扯到数据而影响的加载顺序的原因会获取 ...

  7. 浏览器兼容性小整理和一些js小问题(后面会继续更新)

    最近在啃jQuery的源码,估计会啃到很多浏览器兼容性的问题,所以整理一下 1,IE下的内存泄露. 在IE中不在DOM树中的独立节点有javascript变量引用它的时候不会被回收. 解决:手动将该j ...

  8. tab.js分享及浏览器兼容性问题汇总

    在 样式布局分享-基于frozen.js的移动OA 文章中,用了到第三方组件 tab.js(带菜单的横屏滑动插件),其兼容性很差,进行优化后,已兼容全平台(且支持IE6+). tab.js GitHu ...

  9. 基于原生js的返回顶部组件,兼容主流浏览器

    基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...

随机推荐

  1. join方法,wait()和sleep()

    join方法解释:方法x.join()的作用是使所属线程x 正常执行run()中的方法,而使得调用x.join()的线程处于无限期阻塞状态,等待x线程销毁后再继续执行线程z后面的代码. 1.方法joi ...

  2. zabbix4.2配置监控MySQL

    1.在被监控主机安装好MySQL 相关步骤省略. 2.创建监控所需要的MySQL账户(MySQL服务器端) MariaDB [(none)]>grant usage on *.* to zabb ...

  3. kao shi di er ti(还没有订正)

    // 离散化点 思路应该是对的 吧 但没时间去检查编译上的错误 #include <bits/stdc++.h> using namespace std; ; #define ri reg ...

  4. 后台异常 - org/apache/oro/text/regex/MalformedPatternException

    解决办法 1.将JDK换成1.6.023或者以上的,如果不行进行下面的办法操作 2.缺少了jakarta-oro-2.0.8.jar文件,将此包放入工程中

  5. IDEA与Tomcat相关配置

    idea会为每一个Tomcat部署的项目,独立建一份配置文件. 配置文件所在位置 怎么部署的(查看虚拟目录)使用的第三种部署方式 部署项目存放的路径 项目目录和Tomcat部署目录 Tomcat真正访 ...

  6. 1.5 面试问题整理:cl

    1.自我介绍2.介绍测试的项目> 期望答案:让你介绍项目,目的是想知道你参与过该项目后,对该项目的认识程度和认识层次,从而判断你在项目中到底起多大作用. 即:测试的流程.用例设计的方法.在项目中 ...

  7. optm.adam

    optm.adam 待办 https://www.cnblogs.com/dylancao/p/9878978.html 这个优化包 理解求导过程,来理解神经网络.

  8. 路飞-后台xadmin配置

    xadmin后台管理 安装:luffy虚拟环境下 # >: pip install https://codeload.github.com/sshwsfc/xadmin/zip/django2 ...

  9. Ultra-Thin LED Downlight Selection: 6 Things

    LED Decorative Light Manufacturer    description: ultra-thin LED downlight features can maintain the ...

  10. Custom LED Keychain, Small And Surefire Gifts

    The    LED Keychain    makes it easy for people to carry their keys with them and carry them with th ...