不同的瀏覽器，對不同的/相同的屬性、方法等的支持程度也會有所差別，要想達到滿意的效果，需要做一些處理、給不同的瀏覽器量體裁衣，也就是所說的達到兼容。

常見的處理方式：(能力檢測和瀏覽器檢測)

1、三目運算式

typeof A=='B'?A:C

瀏覽器的類型A是B嗎，是的話就用A，否則就用C。

2、邏輯或(沒有1可靠)

var A=B||C

瀏覽器存在B或C其一，或者都存在。都存在默認用B。

3、檢測瀏覽器引擎和版本號

BrowserDetect.browser == 'Internet Explorer' && BrowserDetect.version <= 7

根據不同的瀏覽器做不同的方案處理。

上栗子

1、獲取窗口相對于屏幕左邊和上邊的位置var?leftPos=(typeof?window.screenLeft=='number')?window.screenLeft:window.screenX;var?topPros=(typeof?window.screenTop=='number')?window.screenTop:window.screenY;

IE、Safari、Opera 和Chrome 都提供screenLeft 和screenTop 屬性，分別用于表示窗口相對于屏幕左邊和上邊的位置。Firefox 則在screenX 和screenY 屬性中提供相同的窗口位置信息，Safari 和Chrome 也同時支持這兩個屬性。但是不建議在Opera中使用screenX 和screenY。

在IE、Opera 中，screenLeft 和screenTop 中保存的是從屏幕左邊和上邊到由window 對象表示的頁面可見區域的距離(包括工具欄)，而在Chrome、Firefox 和Safari 中，screenY 或screenTop中保存的是整個瀏覽器窗口相對于屏幕的坐標值，即在窗口的y 軸坐標為0 時返回0。

2、跨瀏覽器獲取頁面視口的大小。

outerWidth 和outerHeight返回瀏覽器窗口本身的尺寸大小。而innerWidth 和innerHeight則表示該容器中頁面視圖區的大小(減去邊框寬度)。

document.documentElement.clientWidth 和

document.documentElement.clientHeight 中保存了頁面視口的信息。在IE6中，這些屬性在標準模式(document.compatMode == "CSS1Compat")下才有效，在混雜模式(document.compatMode == "BackCompat")下必須通document.body.clientWidth和document.body.clientHeight來獲取var?pageWidth=window.innerWidth,

pageHeight=window.innerHeight;if(typeof?pageWidth!='number'){??if(document.compatMode=='CSS1ompat'){

pageWidth=document.documentElement.clientWidth;

pageHeight=document.documentElement.clientHeight;

}else{

pageWidth=document.body.clientWidth;

pageHeight=document.body.clientHeight;

}

}

3、瀏覽器兼容getElementsByClassName()方法/**

*?@param?{obj,dom樹中搜索的起點,結果不包含該節點}?node

*?@param?{string,要獲取的類名}?classname

*?@return?{list列表,帶有classname的元素}

*不適用于多個類名

*/function?getElementsByClassName(node,classname){????if(node.getElementsByClassName){????????return?node.getElementsByClassName(classname);

}else{????????var?results=[],

elems=node.getElementsByTagName('*');//獲取該節點下的所有元素節點

console.log(elems)????????for(var?i=0;i

results[results.length]=elems[i];

}

}????????return?results;

}

}

4、關于ajax獲取請求對象function?getHTTPObject(){????if(typeof?XMLHttpRequest=='undefined'){

XMLHttpRequest=function(){//ie低版本

try{return?new?ActiveXObject('Msxml2.XMLHTTP.6.0');}????????????????catch(e){}????????????try{return?new?ActiveXObject('Msxml2.XMLHTTP.3.0');}????????????????catch(e){}????????????try{return?new?ActiveXObject('Msxml2.XMLHTTP');}????????????????catch(e){}????????????return?false;

}

}????return?new?XMLHttpRequest();

}獲取響應function?getNewContent(){????var?request=getHTTPObject();????if(request){

request.open('GET','url.txt',true);//異步get請求

request.onreadystatechange=funciton(){//服務器返回響應時觸發該函數

if(request.readyState==4){//4表示完成，0表示初始化，1表示加載，2表示加載完成，3表示正在交互

var?para=document.createElement('p');????????????????var?text=document.createTextNode(request.responseText);//創建的文本節點就是返回的響應數據

para.appendChild(text);????????????????console.log(para);

}

};

request.send(null);//get請求把發送的數據放到url上，post請求放到send上

}else{

alert('your?browser?do?not?support?XMLHttpRequest');

}

}

作者：fenerchen

鏈接：https://www.jianshu.com/p/d830d08ac9d8

總結

以上是生活随笔為你收集整理的js ajax 浏览器兼容,JS跨浏览器兼容，一点点总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。