js兼容性問題小結（我的學習筆記）

兼容問題

　　1.針對於字符串，想要獲取字符串第幾位的字符出現的兼容問題

　　　  var str="abcde";
    　　　aletr(str[1]);//獲取str字符串的第二位：「b」

　　　　 可是低版本IE（5,6）不支持

　　　　 那麼有一個方法是全部瀏覽器都支持的，charAt（）；

　　　　 用法：str.charAt(1)//也是輸出「b」;

　　 2.針對DOM獲取子節點中的childNodes獲取子節點出現的兼容性問題

　　　　   childNodes:獲取子節點,
    　　　　--IE6-8:獲取的是元素節點,正常
    　　　　--高版本瀏覽器:可是會包含文本節點和元素節點(可能會不正常) 
  　　　  解決方法: 使用nodeType:節點的類型，並做出判斷
      　　　 --nodeType=3-->文本節點（知識點）
      　　    --nodeTyPE=1-->元素節點（知識點）
  　　　  例: 獲取ul裏全部的子節點，讓全部的子節點背景色變成紅色
  　　      獲取元素子節點兼容的方法:
  　　　　  var oUl=document.getElementById('ul');
  　　　　  for(var i=0;i<oUl.childNodes.length;i++){
    　　　　　　if(oUl.childNodes[i].nodeType==1){
      　　　　　　   oUl.childNodes[i].style.background='red';
    　　　　　　}
  　　　　　}
  　　　　注：上面childNodes爲咱們帶來的困擾徹底能夠有children屬性來代替。（children也有JQ方法（知識點）。。。跟find方法相似）
      　　           children屬性:只獲取元素節點,不獲取文本節點,兼容全部的瀏覽器，
      　　           比上面的好用因此咱們通常獲取子節點時,最好用children屬性。
      　　                  var oUl=document.getElementById('ul');
      　　                  oUl.children[0].style.background="red";　（這個是屬性，，，要加【0】這一類的東西）

　　 3.關於使用 event對象，出現的兼容性問題

　　　　Event 對象表明事件的狀態，好比事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。

　　　　　　得到event對象兼容性寫法 
　　　　　　event || (event = window.event（IE9如下不支持）);

 

　　　　　　得到target兼容型寫法 
　　　　　　event.target||event.srcElement（IE）

 

　　　　　　阻止瀏覽器默認行爲兼容性寫法 
　　　　　　event.preventDefault ? event.preventDefault() : (event.returnValue = false)（IE）;

 

　　　　　　阻止冒泡寫法 
　　　　　　event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true)（IE）;

 

　　　　　　event.x與event.y問題 

　　　　　　說明：IE下，event對象有x,y屬性,可是沒有pageX，pageY屬性；Firefox下，even對象有pageX，pageY屬性，可是沒有x,y屬性。 
　　　　　　解決方法：使用var x = e.x ? e.x : e.pageX; 來代替IE下的event.x或者Firefox下的e.pageX；

 

 

　　 4.DOM相關，獲取第一個，最後一個，上一個，下一個節點的兼容問題　

　　　　//DOM節點相關，主要兼容IE 6 7 8

  　　　　function nextnode(obj){//獲取下一個兄弟節點

    　　　　if (obj.nextElementSibling) {

      　　　　return obj.nextElementSibling;

    　　　　} else{

      　　　　return obj.nextSibling;

    　　　　};

  　　　　}

  　　　　function prenode(obj){//獲取上一個兄弟節點

    　　　　if (obj.previousElementSibling) {

      　　　　return obj.previousElementSibling;

    　　　　} else{

      　　　　return obj.previousSibling;

    　　　　};

  　　　　}

  　　　　function firstnode(obj){//獲取第一個子節點

    　　　　if (obj.firstElementChild) {

      　　　　return obj.firstElementChild;//非IE678支持

    　　　　} else{

      　　　　return obj.firstChild;//IE678支持

    　　　　};

  　　　　}

  　　　　function lastnode(obj){//獲取最後一個子節點

    　　　　if (obj.lastElementChild) {

      　　　　return obj.lastElementChild;//非IE678支持

    　　　　} else{

      　　　　return obj.lastChild;//IE678支持

    　　　　};

  　　　　}

　　 5.獲取非行間樣式的值得兼容問題

　　　

　　　IE不支持getComputedStyle方法

　　　　//獲取元素的非行間樣式值
　　　　function getStyle(object,oCss) {
　　　　　　if (object.currentStyle) {
　　　　　　　　return object.currentStyle[oCss];//IE
　　　　　　}else{
　　　　　　　　return getComputedStyle(object,null)[oCss];//除了IE
　　　　　　}
　　　　}

　　 6.addEventListener兼容問題

　　　　//設置監聽事件
   　　　　function addEvent(obj,type,fn){//添加事件監聽，三個參數分別爲 對象、事件類型、事件處理函數，默認爲false（事件冒泡）（例如：addEvent（obj，「click」，function））
    　　　　　　if (obj.addEventListener) {
      　　　　　　　　obj.addEventListener(type,fn,false);//非IE
    　　　　　　} else{
      　　　　　　　　obj.attachEvent('on'+type,fn);//ie,這裏已經加上on，傳參的時候注意不要重複加了
    　　　　　　};
  　　　　}
  　　　　function removeEvent(obj,type,fn){//刪除事件監聽
    　　　　　　if (obj.removeEventListener) {
      　　　　　　　　obj.removeEventListener(type,fn,false);//非IE
   　　　　　　 } else{
      　　　　　　　　obj.detachEvent('on'+type,fn);//ie，這裏已經加上on，傳參的時候注意不要重複加了
   　　　　　　 };
   　　　　}

 　7.document.body兼容性問題

　　　　經常使用來獲取瀏覽器的寬高；　　

　　　　　　var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//網頁可見區域寬
　　　　　　var winH=document.body.clientHeight||document.docuemntElement.clientHeight;//網頁可見區域寬
　　　　　　//以上爲不包括邊框的寬高，若是是offsetWidth或者offsetHeight的話包括邊框

　　　　　　var winWW=document.body.scrollWidth||document.docuemntElement.scrollWidth;//整個網頁的寬（包括未滾動到的地方和以滾動被遮蓋的地方）
　　　　　　var winHH=document.body.scrollHeight||document.docuemntElement.scrollHeight;//整個網頁的高（包括未滾動到的地方和以滾動被遮蓋的地方）

　　　　　　var scrollTop=document.body.scrollTop||document.docuemntElement.scrollTop;//網頁被捲去的高
　　　　　　var scrollLeft=document.body.scrollLeft||document.docuemntElement.scrollLeft;//網頁左卷的距離

　　　　　　var offsetTop=obj.offsetTop||obj.offsetTop;//元素距離最近一個相對定位的上移距離
　　　　　　var offsetLeft=obj.offsetLeft||obj.offsetLeft;//元素距離最近一個相對定位的左移距離

　　　　　　var screenH=window.screen.height;//屏幕分辨率的高
　　　　　　var screenW=window.screen.width;//屏幕分辨率的寬
　　　　　　var screenX=window.screenLeft;//瀏覽器窗口相對於屏幕的x座標（除了FireFox
　　　　　　var screenXX=window.screenX;//FireFox相對於屏幕的X座標
　　　　　　var screenY=window.screenTop;//瀏覽器窗口相對於屏幕的y座標（除了FireFox）
　　　　　　var screenYY=window.screenY;//FireFox相對於屏幕的y座標

       8.自定義屬性問題 

　　　　說明：IE下,可使用獲取常規屬性的方法來獲取自定義屬性,也可使用getAttribute()獲取自定義屬性，Firefox下，只能使用getAttribute()獲取自定義屬性。 
　　　　   解決方法：統一經過getAttribute()獲取自定義屬性，不過更推薦直接經過「點」運算符訪問元素屬性。

 　  9.innerText的問題

　　　　innerText在IE中能正常工做，可是innerText在FireFox中卻不行，需用textContent；　　　　　　

　　　　　　　　if (navigator.appName.indexOf("Explorer") > -1) {

　　　　　　　　　　document.getElementById('element').innerText = "my text";

　　　　　　　　} else {

　　　　　　　　　　document.getElementById('element').textContent = "my text";

　　　　　　　　}

 　　10.ajax獲取XMLHTTP的區別

　　　　var xml;

　　　　if （window.XMLHttpRequest） {

　　　　　　xml = new XMLHttpRequest()'

　　　　} else {

　　　　　　xml = new Activexobject("Microsoft.XMLHttp");

　　　　}

　　　　注意：在IE中，xml.send(content)方法的content能夠爲空，而firefox則不能爲null，應該用send("")，不然會出現411錯誤。

　　11.const問題

　　　　說明:Firefox下,可使用const關鍵字或var關鍵字來定義常量;IE下,只能使用var關鍵字來定義常量.

　　　   解決方法:統一使用var關鍵字來定義常量.

　　12.window.location.href問題

　　　　說明:IE或者Firefox2.0.x下,可使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location.

　　　  解決方法:使用window.location來代替window.location.href.

　　13.模態和非模態窗口問題

　　　　說明:IE下,能夠經過showModalDialog和showModelessDialog打開模態和非模態窗口;Firefox下則不能.

　　　　解決方法:直接使用window.open(pageURL,name,parameters)方式打開新窗口。(實例：

　　　　　　window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no')

　　　　　　　　page.html：能夠是你的html地址，也能夠是網絡地址

　　　　　　　　newwindow 彈出窗口的名字（不是文件名），非必須，可用空''代替；

　　　　　　　    height=100 窗口高度；
　　　　　　　    width=400 窗口寬度；
　　　　　　　    top=0 窗口距離屏幕上方的象素值；
　　　　　　　    left=0 窗口距離屏幕左側的象素值；
　　　　　　　    toolbar=no 是否顯示工具欄，yes爲顯示；
　　　　　　　    menubar，scrollbars 表示菜單欄和滾動欄。
　　　　　　　    resizable=no 是否容許改變窗口大小，yes爲容許；
　　　　　　　    location=no 是否顯示地址欄，yes爲容許；
　　　　　　　    status=no 是否顯示狀態欄內的信息（一般是文件已經打開），yes爲容許;       　

　　　　　　)

　　　　若是須要將子窗口中的參數傳遞迴父窗口,能夠在子窗口中使用window.opener來訪問父窗口. 例如：var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";