前端开发js兼容问题

前端开发js兼容问题|前端开发者

常见的JavaScript兼容性及解决方案整理:
1.选择器兼容性

getElementsByClassName ( IE9以及以上支持)
querySelector/querySelectorAll (IE8以及以上支持)

2.获取计算后的样式

getComputedStyle (IE9以及以上支持)
currentStyle(所有IE都支持,它是一个属性)
兼容方法:封装函数
javascript 代码

3.trim方法去除字符串前后空格 (支持IE9以及以上)

兼容方法:在原型上对trim方法用正则表达式去除空格
javascript 代码

4.forEach()遍历数组( IE9及以上能支持)

javascript 代码

兼容方法:for循环数组
javascript 代码

5.获取DOM节点

firstChild
lastChild
nextSibling
previousSibling
以上方法都是兼容的,但是各个浏览器取到的结果不一样。
IE8以下的非标准浏览器获取到的是标签节点,标准浏览器获取到的不一定是标签节点为 #text。
javascript 代码

6.滚动条距离

BOM属性:(IE9以及以上支持)
window.pageXOffset;
window.pageYOffset;
DOM属性:
scrollTop/scrollLeft
document.documentElement.scrollTop (其它的浏览器从document身上去获取)
document.body.scrollTop ( chrome从body身上获取)
兼容方法:
javascript 代码

7.event对象
IE9以及以上支持
IE6,7,8的事件对象是window身上的一个属性

兼容方法:
javascript 代码

8.addEventListener绑定事件

addEventListener( IE9以及以上支持)
attachEvent (IE678支持),但是要注意它的事件名字参数要加on。
兼容方法:绑定函数封装
javascript 代码

9.滚轮事件兼容

mousewheel IE/chrome支持
滚动的方向 event.wheelDelta
上:120(正数)
下:-120(负数)
DOMMouseScroll FireFox(必须用addEventListener添加)支持
滚动的方向 event.detail
上:-3(负数)
下:3(正数)
兼容方法:滚轮事件封装
javascript 代码

10.Ajax兼容
 Ajax的兼容包括:
1. XMLHttpRequest对象的兼容  (IE6以下不兼容)
2.完成事件onreadystatechange、onload的兼容
    onreadystatechange: readyState的值发生改变时触发的事件,只要这个值有变化就会触发
    onload: 所有请求成功完成后触发,此时readystate的值为4 (IE678不支持)
  (新的XMLHttpRequest不推荐用onreadystatechange,使用onload)
 **兼容方法:完整的Ajax封装**
 注意:因为JSON对象是不兼容的,所以在引入封装好的Ajax之前,需要引入json2.js文件,保证JSON对象在所有平台的兼容。[地址](https://github.com/douglascrockford/JSON-js)
**javascript 代码**

前端开发js兼容问题|前端开发者

https://www.rokub.com

» 本文来自:前端开发者 » 《前端开发js兼容问题》
» 本文链接地址:https://www.rokub.com/2781.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!