码迷,mamicode.com
首页 > Web开发 > 详细

JS常见兼容性问题

时间:2018-10-01 15:04:54      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:window   document   鼠标   OLE   doc   html   没有   win   ie浏览器   

兼容性问题:函数(方法)兼容

描述:部分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.clientWidth var h = document.body.clientHeight

2. 获得浏 览器窗口内部 宽度 / 高度 ,比 HTML文档所在窗口宽度 多 16px

// document.documentElement.clientWidth IE浏览器写法
// window.innerWidth 其他浏览器写法
var w = document.documentElement.clientWidth || window.innerWidth
var h = document.documentElement.clientHeight || window.innerHeight

3.获得 HTML页面内容 宽度 / 高度 (文档实际高度)

//没有兼容性问题
var h = document.body.scrollHeight
var 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常见兼容性问题

标签:window   document   鼠标   OLE   doc   html   没有   win   ie浏览器   

原文地址:https://www.cnblogs.com/xiaoliwang/p/9734641.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!