JavaScript中瀏覽器兼容問題

JavaScript中瀏覽器兼容問題(轉)

　　瀏覽器兼容性問題是在實際開發中容易忽略而又最重要的一部分。咱們在講老版本瀏覽器兼容問題以前，首先要了解什麼是能力檢測，它是來檢測瀏覽器有沒有這種能力，即判斷當前瀏覽器是否支持要調用的屬性或者方法。下面作了一些簡短的介紹。

一、innerText 和 innerContent

1）innerText 和 innerContent 的做用相同

2）innerText IE8以前的瀏覽器支持

3）innerContent 老版本的Firefox支持

4）新版本的瀏覽器兩種方式都支持

1 // 老版本瀏覽器兼容  innerText 和 innerContent
2  if (element.textContent) {
3        return element.textContent ;
4   } else {
5       return element.innerText;
6   }

二、獲取兄弟節點/元素的兼容性問題

 1）兄弟節點，全部瀏覽器都支持

        ①nextSibling 下一個兄弟節點，多是非元素節點；會獲取到文本節點

        ②previousSibling  上一個兄弟節點，多是非元素節點；會獲取到文本節點

 2）兄弟元素，IE8之前不支持

        ①previousElementSibling 獲取上一個緊鄰的兄弟元素，會忽略空白 

        ②nextElementSibling   獲取下一個緊鄰的兄弟元素，會忽略空白     

  //兼容瀏覽器
 1 // 獲取下一個緊鄰的兄弟元素
 2 function getNextElement(element) {
 3    // 能力檢測
 4   if(element.nextElementSibling) {
 5       return element.nextElementSibling;
 6    } else {
 7          var node = element.nextSibling;
 8          while(node && node.nodeType !== 1) {
 9                  node = node.nextibling;
10          }
11          return node;
12     }
13  }

 1 /**
 2 * 返回上一個元素
 3 * @param element
 4 * @returns {*}
 5 */
 6 function getPreviousElement(element) {
 7     if(element.previousElementSibling) {
 8         return element.previousElementSibling;
 9     }else {
10         var el = element.previousSibling;
11         while(el && el.nodeType !== 1) {
12             el = el.previousSibling;
13             }
14         return el;
15     }
16 }

 1 /**
 2 * 返回第一個元素firstElementChild的瀏覽器兼容
 3 * @param  parent
 4 * @returns {*}
 5 */
 6 function getFirstElement(parent) {
 7     if(parent.firstElementChild) {
 8         return parent.firstElementChild;
 9     }else {
10         var el = parent.firstChild;
11         while(el && el.nodeType !== 1) {
12             el = el.nextSibling;
13             }
14         return el;
15     }
16 }

/**
* 返回最後一個元素
* @param  parent
* @returns {*}
*/
function getLastElement(parent) {
    if(parent.lastElementChild) {
        return parent.lastElementChild;
    }else {
        var el = parent.lastChild;
        while(el && el.nodeType !== 1) {
            el = el.previousSibling;
            }
        return el;
    }
}

/**
*獲取當前元素的全部兄弟元素
* @param  element
* @returns {Array}
*/
function sibling(element) {
    if(!element) return ;
    
    var elements = [ ];
    var el = element.previousSibling;
    while(el) {
        if(el.nodeType === 1) {
            elements.push(el);
        }
        el = el.previousSibling;
    }
     el = element.previousSibling;
     while(el ) {
        if(el.nodeType === 1) {
            elements.push(el);
        }
        el = el.nextSibling;
    }
        return elements;
}

三、array.filter();   

 // 使用指定的函數測試全部元素，並建立一個包含全部經過測試的元素的新數組

 1 // 兼容舊環境
 2 if (!Array.prototype.filter)
 3 {
 4   Array.prototype.filter = function(fun /*, thisArg */)
 5   {
 6     "use strict";
 7     if (this === void 0 || this === null)
 8       throw new TypeError();
 9     var t = Object(this);
10     var len = t.length >>> 0;
11     if (typeof fun !== "function")
12       throw new TypeError();
13     var res = [];
14     var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
15     for (var i = 0; i < len; i++)
16     {
17       if (i in t)
18       {
19         var val = t[i];
20         // NOTE: Technically this should Object.defineProperty at
21         //       the next index, as push can be affected by
22         //       properties on Object.prototype and Array.prototype.
23         //       But that method's new, and collisions should be
24         //       rare, so use the more-compatible alternative.
25         if (fun.call(thisArg, val, i, t))
26           res.push(val);
27       }
28     }
29     return res;
30   };
31 }

四、array.forEach();

// 遍歷數組

 1 //兼容舊環境
 2 // Production steps of ECMA-262, Edition 5, 15.4.4.18
 3 // Reference: http://es5.github.io/#x15.4.4.18
 4 if (!Array.prototype.forEach) {
 5   Array.prototype.forEach = function(callback, thisArg) {
 6     var T, k;
 7     if (this == null) {
 8       throw new TypeError(' this is null or not defined');
 9     }
10     // 1. Let O be the result of calling toObject() passing the
11     // |this| value as the argument.
12     var O = Object(this);
13     // 2. Let lenValue be the result of calling the Get() internal
14     // method of O with the argument "length".
15     // 3. Let len be toUint32(lenValue).
16     var len = O.length >>> 0;
17     // 4. If isCallable(callback) is false, throw a TypeError
18     exception. // See: http://es5.github.com/#x9.11
19     if (typeof callback !== "function") {
20       throw new TypeError(callback + ' is not a function');
21     }
22     // 5. If thisArg was supplied, let T be thisArg; else let
23     // T be undefined.
24     if (arguments.length > 1) {
25       T = thisArg;
26     }
27     // 6. Let k be 0
28     k = 0;
29     // 7. Repeat, while k < len
30     while (k < len) {
31       var kValue;
32       // a. Let Pk be ToString(k).
33       //    This is implicit for LHS operands of the in operator
34       // b. Let kPresent be the result of calling the HasProperty
35       //    internal method of O with argument Pk.
36       //    This step can be combined with c
37       // c. If kPresent is true, then
38       if (k in O) {
39         // i. Let kValue be the result of calling the Get internal
40         // method of O with argument Pk.
41         kValue = O[k];
42         // ii. Call the Call internal method of callback with T as
43         // the this value and argument list containing kValue, k, and O.
44         callback.call(T, kValue, k, O);
45       }
46       // d. Increase k by 1.
47       k++;
48     }
49     // 8. return undefined
50   };
51 }

五、註冊事件

1 2 3 4 5

.addEventListener =  function  (type,listener,useCapture ) { }; //第一個參數 事件名稱 //第二個參數 事件處理函數（監聽者） //第三個參數 true捕獲 false冒泡 //IE9之後才支持

// 兼容舊環境

 1  var EventTools = {
 2         addEventListener: function (element, eventName, listener) {
 3             //能力檢測
 4             if(element.addEventListener) {
 5                 element.addEventListener(eventName, listener,false);
 6             }else if(element.attachEvent) {
 7                 element.attachEvent("on" + eventName, listener);
 8             }else{
 9                 element["on" + eventName] = listener;
10             }
11         },
12 
13 //    想要移除事件，不能使用匿名函數
14         removeEventListener: function (element, eventName, listener) {
15             if(element.removeEventListener) {
16                 element.removeEventListener(eventName,listener,false);
17             }else if(element.detachEvent) {  //IE8之前註冊.attachEvent和移除事件.detachEvent
18                 element.detachEvent("on"+eventName,listener);
19             }else{
20                 element["on" + eventName] = null;
21             }
22         }
23     };

六、事件對象

 1)事件參數e，就是事件對象，標準的獲取方式

btn.onclick = function(e) { }

 2)e.eventPhase 事件階段，IE8之前不支持

 3)e.target 始終是觸發事件的對象（點擊的按鈕）

        i）IE8之前 srcElement

        ii）瀏覽器兼容

var target = e.target || window.event.srcElement;

1 // 獲取事件對象 兼容瀏覽器
2  getEvent: function(e) {
3     return e || window.event;  
4  }
5 // 兼容target
6  getTarget: function(e) {
7     return e.target || e.srcElement;
8  }// e事件對象 標準的獲取方式； window.event IE8之前獲取事件對象的方式

七、獲取鼠標在頁面上的位置

①在可視區域中的位置：  e.clientX   e.clientY

②在文檔中的位置： 

        i） e.pageX      e.pageY

        ii）瀏覽器兼容

1 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
2 var pageY = e.clientY + scrollTop;

八、獲取頁面滾動的距離

1 // 兼容瀏覽器
2 var scrollTop = document.documentElement.scrollTop || document.body.scrolltop;

九、取消文本的選擇

1 // 兼容瀏覽器
2  window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

　　

【總結】這裏只是作了一部分的小結，實際開發中也還會遇到各類瀏覽器兼容的問題。不一樣瀏覽器在PC端和手機端也會遇到不一樣適配問題，這些就有待童鞋們一塊兒去發掘總結啦~~但願能幫到你們，不足的地方請多指教啦~~~