JS常見兼容性問題

兼容性問題：函數（方法）兼容

描述：部分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軸的座標
    }