JavaScript 浏览器兼容性总结及常用浏览器兼容性分析


Posted in Javascript onMarch 30, 2016

本文是三水点靠木小编日常整理些关于js兼容性问题,及IE与Firefox等常用浏览器的兼容性分析,对js浏览器兼容性相关知识感兴趣的朋友一起学习吧!

1. children与childNodes

IE提供的children、childNodes和firefox下的childNodes的行为是有区别的,firefox下childNodes会把换行和空白字符都算作父节点的子节点,而IE的childNodes和children不会。比如:

<div id="dd">
<div>yizhu2000</div>
</div>

d为dd的div在IE下用childNodes查看,其子节点数为1,而ff下为三,我们可以从firefox的dom查看器里面看到他的childNodes为["\n ", div, "\n"]。

要在firefox下模拟children的属性我们可以这样做:

if (typeof(HTMLElement) != "undefined" && !window.opera) {
HTMLElement.prototype.__defineGetter__("children", function() {
for (var a = [], j = 0, n, i = 0; i < this.childNodes.length; i++) {
n = this.childNodes[i];
if (n.nodeType == 1) {
a[j++] = n;
if (n.name) {
if (!a[n.name])
a[n.name] = [];
a[n.name][a[n.name].length] = n;
}
if (n.id)
a[n.id] = n;
}
}
return a;
});
}

2. firefox和ie的事件

window.event只能在IE下使用,而不能用在Firefox下,这是因为Firefox的event只能在事件发生的现场使用。 Firefox必须从源处加入event作参数传递。IE忽略该参数,用window.event来读取该event。

比方说下面这个在ie下获得鼠标位置的方法:

<button onclick="onClick()" >获得鼠标点击横坐标</button>
<script type="text/javascript">
function onclick(){
alert(event.clientX);
}
</script>

需要改成

<button onclick="onClick(event)">获得OuterHTML</button>
<script type="text/javascript">
function onclick(event){
event = event || window.event;
alert(event.clientX);
}
</script>

才能在两种浏览器下使用

3.HTML对象获取问题

FireFox获取方式document.getElementById("idName")

ie使用document.idname或者document.getElementById("idName")

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

4. const问题

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

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

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

5.frame问题

以下面的frame为例:

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

a)访问frame对象

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

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

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

b) 切换frame内容

在 IE和Firefox中都可以使用

window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"

来切换frame的内容;

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

parent.document.form1.filename.value="Aqing";

6. body问题

Firefox的body在body标签没有被浏览器完全读入之前就存在;而IE的body则必须在body标签被浏览器完全读入之后才存在;

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

IE:obj.parentElement

firefox:obj.parentNode

解决方法:因为firefox与IE都支持DOM,因此全部使用obj.parentNode

8.innerText的问题

innerText在IE中能正常工作,但是innerText在FireFox中却不行,需用textContent;

解决方法:

if (navigator.appName.indexOf("Explorer") > -1) {
document.getElementById('element').innerText = "my text";
} else {
document.getElementById('element').textContent = "my text";
}

9.AJAX获取XMLHTTP的区别

var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} elseif (window.ActiveXObject) { // IE的获取方式
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

注意:在IE中,xmlhttp.send(content)方法的content可以为空,而firefox则不能为null,应该用send(""),否则会出现411错误。

关于本文给大家介绍的JavaScript 浏览器兼容性总结及常用浏览器兼容性分析,小编就给大家介绍到这里,希望对大家有所帮助!

Javascript 相关文章推荐
JavaScript的Cookies
Jan 16 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 Javascript
Javascript引用指针使用介绍
Nov 07 Javascript
JS格式化数字保留两位小数点示例代码
Oct 15 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
JavaScript  cookie 跨域访问之广告推广
Apr 20 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
浅谈angular懒加载的一些坑
Aug 20 Javascript
AngularJs每天学习之总体介绍
Aug 07 Javascript
vue中使用gojs/jointjs的示例代码
Aug 24 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 Javascript
详解Vue3中对VDOM的改进
Apr 23 Javascript
JavaScript 不支持 indexof 该如何解决
Mar 30 #Javascript
React.js入门学习第一篇
Mar 30 #Javascript
Node.js操作mysql数据库增删改查
Mar 30 #Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 #Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 #Javascript
jQuery表格插件datatables用法汇总
Mar 29 #Javascript
基于javascript实现tab切换特效
Mar 29 #Javascript
You might like
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
PHP+SQL 注入攻击的技术实现以及预防办法
2011/01/27 PHP
浅析PHP Socket技术
2013/08/02 PHP
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
分享10个优化代码的CSS和JavaScript工具
2016/05/11 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
python中验证码连通域分割的方法详解
2018/06/04 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
同步和异步有何异同,在什么情况下分别使用他们?
2012/12/28 面试题
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
应届中专生自荐书范文
2014/02/13 职场文书
计算机系本科生求职信
2014/05/31 职场文书
委托书的格式
2014/08/01 职场文书
授权委托书
2015/01/28 职场文书
会议新闻稿
2015/07/17 职场文书
Java并发编程之Executor接口的使用
2021/06/21 Java/Android