兼容性问题:函数(方法)兼容
描述:部分W3C指定的函数,有部分老的浏览器不支持
解决:
条件判断,如果有,则使用,添加原型方法,例如 String 的 trim 方法
if(!String.prototype.trim){ ???String.prototype.trim = function(){ ???????return this.replace(/^\s\s*/,‘‘).replace(/\s\s*$/,‘‘) ???}}
兼容性问题:浏览器视口、屏幕、页面宽高获取
解决:
1. 获得当前页面 HTML文档所在窗口 宽度
//所有浏览器都支持这种写法,不存在兼容性问题
var w = document.body.clientWidthvar h = document.body.clientHeight
2. 获得浏 览器窗口内部 宽度 / 高度 ,比 HTML文档所在窗口宽度 多 16px
// document.documentElement.clientWidth IE浏览器写法// window.innerWidth 其他浏览器写法var w = document.documentElement.clientWidth || window.innerWidthvar h = document.documentElement.clientHeight || window.innerHeight
3.获得 HTML页面内容 宽度 / 高度 (文档实际高度)
//没有兼容性问题var h = document.body.scrollHeightvar h = document.body.scrollWidth
4. 获得当前页面 被卷去的高度 / 宽度
//window.pageYOffset 其他浏览器写法//document.documentElement.scrollTop IE浏览器写法var offsetY = window.pageYOffset || document.documentElement.scrollTop
兼容性问题:事件
获取事件
???document.onclick=function(ev){//谷歌火狐的写法,IE9以上支持,往下不支持; ???????var e=ev; ???????console.log(e); ???} ???document.onclick=function(){//谷歌和IE支持,火狐不支持; ???????var e=event; ???????console.log(e); ???} ???document.onclick=function(ev){//兼容写法; ???????var e=ev||window.event; ???????var mouseX=e.clientX;//鼠标X轴的坐标 ???????var mouseY=e.clientY;//鼠标Y轴的坐标 ???}
JS常见兼容性问题
原文地址:https://www.cnblogs.com/xiaoliwang/p/9734641.html