JavaScript的瀏覽器兼容性問題小結。

   JavaScript的瀏覽器兼容問題是前端開發中一直存在的一個問題，和css兼容性同樣，咱們在開發過程當中必須瞭解一些基本的兼容性處理方法，下面從如下幾個方面總結下js開發常碰到的問題：一、經常使用的方法兼容；二、樣式訪問兼容； 三、DOM選取及對象引用； 四、事件處理； 五、其餘兼容；六、瀏覽器判斷。

.getYear方法：
獲取日期時常常用到的方法，例如 var year = new Date().getYear(); 在ie中獲得的是當前年份2011，可是在Firefox中是111。
解決方法：year = year<1900?1900+year:year  或者用getFullYear方法。

.Css的float屬性
Js訪問給定css的屬性方法是：obj.style.property 可是css中個別屬性和js保留字是同樣的，因此在獲取這些
特殊的css屬性時寫法不一樣 例如獲取一個對象的float屬性:IE中 Obj.style.styleFloat  火狐中: Obj.style.cssFloat
解決方法：添加瀏覽器判斷。

.訪問設置class屬性
class也是js的保留字，獲取class的方法也有不一樣。
ie8以前版本的ie:Obj.getAttribute(「className」);
ie8 ie9 以及火狐:Obj.getAttribute(「class」);
setAttribute方法和getAttribute的方式同樣。
解決方法：先判斷瀏覽器或者使用obj.className直接設置。

.對象高寬問題
火狐中若是將一個對象的height屬性值賦給另外一個對象的height樣式，obj.style.height=imgObj.height這種寫法是沒法識別的，這個問題在使用對象的clientHeight和clientWidth屬性時也會遇到。
解決方法：obj.style.height=imgobj.height+」px」 在給樣式賦值時後面加上px。

.集合對象訪問
Ie下可使用()或[]獲取集合類對象，火狐只能用[]。
Alert(document.forms(「formName」)) 火狐沒法識別，Alert(document.forms[「formName」]) 均可以識別。
處理方式：使用[]獲取。

.Iframe引用
ie能夠經過id或者name訪問這個iframe的window對象，可是火狐只能經過name訪問。
解決方法：統一用name獲取iframe對象或者使用document.getElementById(「frameId」)獲取。
例如 alert(window.fr2); //火狐得不到 alert(window.fr1); //都能獲得

.獲取父節點
ie中支持parentElement和parentNode，火狐中只能用parentNode獲取。
解決方法：統一用parentNode獲取，obj.parentNode

.childNodes獲取子節點
<ul id="ul" >
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
火狐獲得長度是7 ie是3。
解決方法：使用jQuery或者在經過nodeName==「#text」在循環中把文本節點剔除以下：
var ch=document.getElementById("ul").childNodes;
for(i= 0;i .if(ch[i].nodeName=="#text"){
  if(ch[i].nodeName=="#text"){
     alert("文本節點");continue;
   }
alert("每個li節點我會彈出一次");
}

.節點操做removeChild和removeNode，removeNode()參數爲false或者true。
false：只刪除自己
true：刪除自己以及下屬節點
在火狐中沒有removeNode方法，只能經過removeChild方法代替。
解決方法：用removeChild實現刪除節點的效果

或者用jQuery的方法以下
< ul id="ul" >
< li>1< /li>
< li>2< /li>
< li>3< /li>
</ul>
var ul= document.getElementById("ul");
ul.removeNode(true);//ie刪除方法
ul.parentNode.removeChild(ul);//火狐刪除方法

.innerText的用法
innerText獲取節點內的文本嗎，ie中正常，火狐中不識別火狐中使用的是textContent。

解決方法：判斷瀏覽器或者使用jQuery

.Window.event事件對象
ie中能夠獲取，火狐中沒法獲取
Function test1(){
    alert(event);//ie存在火狐不存在
}
Function test2(ev){
    alert(ev);//ie存在火狐存在
}
解決方法：傳遞event參數給調用的方法，以下
< input type="button" value="test" onclick="testEvent(event)" / >
function testEvent(eventTa){
var e = eventTa||window.event;
var srcElement= e.srcElement||e.target;
}
其中e.srcElement是id獲取事件源對象，e.target是火狐獲取事件源對象varsrcElement=e.srcElement||e.target;是兼容寫法。

.offsetX offsetY
獲取鼠標當前座標，包含滾動 火狐不支持。
解決方法：
用layerX和layerY替代，效果同樣。
.Event.X和event.Y獲取鼠標當前座標，不包含滾動 火狐不支持。
解決方法：用pageX和pageY代替。

.捕獲鍵盤值
ie中event.keyCode獲取 火狐中用event.which獲取。以下：
function testEvent(eventTa){
//獲取時間對象
vare = eventTa||window.event;
//獲取事件源對象
varsrcElement= e.srcElement||e.target;
//獲取按鍵對象
varkey = e.which||e.keyCode;
//若是同時按下ctrl和回車鍵則進入
if(e.ctrlKey&&(key==13)){
    alert("ctrl+enter");
}
}

.鼠標位置，事件對象綜合示例:
< input style="height:20px;width:130px;border:1px solid #000;" onclick="caTest(event,this)"  / >
function caTest(eventTa,obj){
//若是tip對象已經存在，則狀況其內容，而且刪除該對象
if(document.getElementById("tip")){
  //若是tip對象已經存在，則狀況其內容，而且刪除該對象
  if(document.getElementById("tip")){
      document.getElementById("tip").innerHTML="";
  if(navigator.userAgent.indexOf(「MSIE」)!=-1){//ie刪除節點方法
      document.getElementById("tip").removeNode();
  }else{
    //火狐
    document.getElementById("tip").parentNode.removeChild(document.getElementById("tip"));
  }
}
//obj爲input對象自己，這裏獲取input對象的座標
varobjx= obj.offsetLeft;
varobjy= obj.offsetTop;
//獲取事件對象和當前鼠標的位置
vare = eventTa||window.event;
varx = e.pageX||e.x;
vary = e.pageY||e.y; 見下頁
//建立一個div對象
vardiv = document.createElement("div");
div.id="tip";
//設置爲絕對定位
div.style.position="absolute";
//設置div的位置，x和y是以前取得的鼠標位置
div.style.top=y+"px";
div.style.left=x+"px";
//設置div大小顏色等
div.style.border="1px solid #123";
div.style.width="200px";
div.style.height="100px";
div.style.background="#fee「;
將div對象寫入body中
document.getElementById("body").appendChild(div);
document.getElementById("tip").innerHTML="提示信息提示信息提示信";
}