不同的瀏覽器尿褪，對(duì)不同的/相同的屬性、方法等的支持程度也會(huì)有所差別得湘，要想達(dá)到滿意的效果杖玲，需要做一些處理、給不同的瀏覽器量體裁衣淘正，也就是所說的達(dá)到兼容摆马。
常見的處理方式：（能力檢測(cè)和瀏覽器檢測(cè)）
1、三目運(yùn)算式
typeof A=='B'?A:C
瀏覽器的類型A是B嗎鸿吆，是的話就用A囤采，否則就用C。
2惩淳、邏輯或（沒有1可靠）
var A=B||C
瀏覽器存在B或C其一蕉毯，或者都存在。都存在默認(rèn)用B。
3代虾、檢測(cè)瀏覽器引擎和版本號(hào)
BrowserDetect.browser == 'Internet Explorer' && BrowserDetect.version <= 7
根據(jù)不同的瀏覽器做不同的方案處理进肯。
上栗子
1、獲取窗口相對(duì)于屏幕左邊和上邊的位置
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 屬性，分別用于表示窗口相對(duì)于屏幕左邊和上邊的位置含蓉。Firefox 則在screenX 和screenY 屬性中提供相同的窗口位置信息频敛，Safari 和Chrome 也同時(shí)支持這兩個(gè)屬性。但是不建議在Opera中使用screenX 和screenY馅扣。
在IE斟赚、Opera 中，screenLeft 和screenTop 中保存的是從屏幕左邊和上邊到由window 對(duì)象表示的頁(yè)面可見區(qū)域的距離（包括工具欄）差油，而在Chrome拗军、Firefox 和Safari 中，screenY 或screenTop中保存的是整個(gè)瀏覽器窗口相對(duì)于屏幕的坐標(biāo)值蓄喇，即在窗口的y 軸坐標(biāo)為0 時(shí)返回0发侵。
2、跨瀏覽器獲取頁(yè)面視口的大小妆偏。
outerWidth 和outerHeight返回瀏覽器窗口本身的尺寸大小刃鳄。而innerWidth 和innerHeight則表示該容器中頁(yè)面視圖區(qū)的大小（減去邊框?qū)挾龋?/p>
document.documentElement.clientWidth 和
document.documentElement.clientHeight 中保存了頁(yè)面視口的信息钱骂。在IE6中叔锐，這些屬性在標(biāo)準(zhǔn)模式（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樹中搜索的起點(diǎn),結(jié)果不包含該節(jié)點(diǎn)} node
* @param {string,要獲取的類名} classname
* @return {list列表,帶有classname的元素}
*不適用于多個(gè)類名
*/
function getElementsByClassName(node,classname){
if(node.getElementsByClassName){
return node.getElementsByClassName(classname);
}else{
var results=[],
elems=node.getElementsByTagName('*');//獲取該節(jié)點(diǎn)下的所有元素節(jié)點(diǎn)
console.log(elems)
for(var i=0;i<elems.length;i++){
if(elems[i].className.indexOf(classname)!=-1){
results[results.length]=elems[i];
}
}
return results;
}
}
4愉烙、關(guān)于ajax
- 獲取請(qǐng)求對(duì)象
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();
}
- 獲取響應(yīng)
function getNewContent(){
var request=getHTTPObject();
if(request){
request.open('GET','url.txt',true);//異步get請(qǐng)求
request.onreadystatechange=funciton(){//服務(wù)器返回響應(yīng)時(shí)觸發(fā)該函數(shù)
if(request.readyState==4){//4表示完成，0表示初始化解取，1表示加載步责，2表示加載完成，3表示正在交互
var para=document.createElement('p');
var text=document.createTextNode(request.responseText);//創(chuàng)建的文本節(jié)點(diǎn)就是返回的響應(yīng)數(shù)據(jù)
para.appendChild(text);
console.log(para);
}
};
request.send(null);//get請(qǐng)求把發(fā)送的數(shù)據(jù)放到url上禀苦，post請(qǐng)求放到send上
}else{
alert('your browser do not support XMLHttpRequest');
}
}
