Javascript不同浏览器差异及兼容方法

JavaScript的各种兼容就是为了解决不同浏览器的差异性,了解其中的差异能够帮助你更快的解决问题,提高代码的使用质量,编写更优秀的javascript代码。

1.window.event

表示当前的时间对象,IE有这个对象,FF没有,FF通过给事件处理函数传递事件对象

2.获取事件源

IE用srcElement获取事件源,而FF用target获取事件源

以上两个兼容通常会这么写:

var evt = e||event;

var el = evt.srcTarget || evt.srcElement;

3.添加、去除事件

4.获取标签的自定义属性

IE:div1.value或div1[‘value’]

FF:可用div1.getAttribute(“value”)

5.document.getElemntByName()和document.all[name]

IE不可以,

FF可以

6.input.type的属性

7.IE支持innerText、outerHTML

FF:支持textContent

8.窗口的位置

IE、chrome、safari:支持使用window.screenLeft和window.screenTop

IE8以上、chrome、safari、firefox:支持使用window.screenX和window.screenY

兼容代码可以使用下面这段代码:


var leftX = typeof window.screenLeft == 'number' ? window.screenLeft : window.screenX;

ver topY = typeof window.screenTop == 'number' ? window.screenTop : window.screenY;

9.窗口的大小

firefox、chrome、IE9和safari:window.innerWidth和window.innerHeight

IE系列:document.body.clientWidth和document.body.clientHeight

不是IE6:document.documentElement.clientWidth和document.documentElement.clientHeight

兼容代码可以这样子写

var width = window.innerWidth;

var height = window.innerHeight;

if(typeof width != 'number'){

if(document.compatMode == 'CSS1Compat'){

width = document.documentElement.clientWidth;

height = document.docuementElement.clientHeight;

}else{

width = document.body.clientWidth;

height = document.body.clientHeight;

}

 

以上内容参考网络,由于本人学习的javascript知识还比较少,暂时不认识,所以提前学习,以便以后遇到能够快速的识别。这篇文章后面将会继续更新添加。


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流