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 相关文章推荐
from 表单提交返回值用post或者是get方法实现
Aug 21 Javascript
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
Nov 26 Javascript
JavaScript实现动态删除列表框值的方法
Aug 12 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 Javascript
vue添加class样式实例讲解
Feb 12 Javascript
记录一次完整的react hooks实践
Mar 11 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 Javascript
wx-charts 微信小程序图表插件的具体使用
Aug 18 Javascript
详解Vue之事件处理
Jul 10 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
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
jQuery 使用手册(二)
2009/09/23 Javascript
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
JS实现排行榜文字向上滚动轮播效果
2019/11/26 Javascript
Vue实现简单计算器案例
2020/02/25 Javascript
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
Python 的类、继承和多态详解
2017/07/16 Python
python中实现延时回调普通函数示例代码
2017/09/08 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
浅谈html5 响应式布局
2014/12/24 HTML / CSS
说出数据连接池的工作机制是什么?
2013/04/19 面试题
教师实习自我鉴定
2013/12/13 职场文书
简单的辞职信范文
2014/01/18 职场文书
化工工艺设计求职信
2014/06/25 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
大学社团招新的通讯稿
2014/09/10 职场文书
村党组织公开承诺书
2015/04/30 职场文书
银行服务理念口号
2015/12/25 职场文书
python opencv通过按键采集图片源码
2021/05/20 Python
MySQL数据库安装方法与图形化管理工具介绍
2022/05/30 MySQL