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 相关文章推荐
免费空间广告万能消除代码
Sep 04 Javascript
比较详细的关于javascript 解析json的代码
Dec 16 Javascript
Javascript实现Array和String互转换的方法
Dec 21 Javascript
详解iframe与frame的区别
Jan 13 Javascript
微信小程序前端源码逻辑和工作流
Sep 25 Javascript
移动端基础事件总结与应用
Jan 12 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 Javascript
vue-loader教程介绍
Jun 14 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
Webpack 4如何动态切割JS注入文件名详解
Jul 09 Javascript
layui-table获得当前行的上/下一行数据的例子
Sep 24 Javascript
vue双向绑定数据限制长度的方法
Nov 04 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
php中几种常见安全设置详解
2010/04/06 PHP
10款实用的PHP开源工具
2015/10/23 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
2010/03/04 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
2012/02/13 Javascript
javascript学习(二)javascript常见问题总结
2013/01/02 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
Python实现Smtplib发送带有各种附件的邮件实例
2017/06/05 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
实习单位接收函
2014/01/11 职场文书
优秀管理者获奖感言
2014/02/17 职场文书
小学一年级学生评语
2014/04/22 职场文书
成立公司计划书
2014/05/07 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书