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 相关文章推荐
用jquery实现下拉菜单效果的代码
Jul 25 Javascript
html超链接打开窗口大小的方法
Mar 05 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
JSON字符串转换JSONObject和JSONArray的方法
Jun 03 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
jquery层次选择器的介绍
Jan 18 jQuery
详解JS浏览器事件循环机制
Mar 27 Javascript
小程序实现分类页
Jul 12 Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 Javascript
jquery简易手风琴插件的封装
Oct 13 jQuery
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 多线程上下文中安全写文件实现代码
2009/12/28 PHP
PHP中文分词 自动获取关键词介绍
2012/11/13 PHP
如何判断php数组的维度
2013/06/10 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
PHP中如何使用Redis接管文件存储Session详解
2018/11/28 PHP
PHP工厂模式的日常使用
2019/03/20 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
php中array_fill函数的实例用法
2021/03/02 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
jQuery Selector选择器小结
2010/05/06 Javascript
firefox下frameset取不到值的解决方法
2010/09/06 Javascript
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
JQuery 设置checkbox值二次无效的解决方法
2016/07/22 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
Vue.js2.0中的变化小结
2017/10/24 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
vue v-model的用法解析
2020/10/19 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
NodeJS配置CORS实现过程详解
2020/12/02 NodeJs
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
python使用三角迭代计算圆周率PI的方法
2015/03/20 Python
python发送HTTP请求的方法小结
2015/07/08 Python
Python中str.format()详解
2017/03/12 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
python实现合并两个排序的链表
2019/03/03 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
StubHub德国:购买和出售门票
2017/09/06 全球购物
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
俄罗斯便宜的在线服装商店:GroupPrice
2020/04/10 全球购物
2015年七夕情人节感言
2015/08/03 职场文书