jQuery兼容瀏覽器IE8方法

1.前言

　　在作前端開發的時候，公司的規範要求面向客戶的兼容到IE8，可是在IE8模式下常常會發現各類錯誤，某某方法未定義、不支持某屬性或對象等，使用jQuery的時候，jQuery從2.0開始不兼容IE8，最低支持IE9，因此須要引入更低的jQuery版原本兼容。

2.IE8不支持jQuery版本解決辦法

• 經過判斷IE瀏覽器的版原本加載對應版本的jQuery

　　使用語句<!--[if IE 8]> 僅IE8可識別 <![endif]--> 可在IE8模式下進行一些兼容操做。代碼以下：

1 <script type="text/javascript" src="<%=path%>/js/jquery-3.1.1.min.js"></script>

2 <!--[if IE 8]>

3 <script type="text/javascript" src="<%=path%>/js/jquery-1.9.1.min.js"></script>

4 <![endif]-->

　　這樣在切換到IE8時，低版本的jQuery就會覆蓋高版本的jQuery。若是在IE8下須要調整某些元素的樣式的話，最好將JS代碼放在頁面底部（並注意是否有行內樣式），否則爲某些動態加載的內容設置的樣式可能不會生效。

3.IE8不支持forEach解決辦法

• 爲不支持forEach的瀏覽器添加自定義forEach方法

　　代碼以下：

1 if (typeof Array.prototype.forEach != 'function') {

2     Array.prototype.forEach = function (callback) {

3         for (var i = 0; i < this.length; i++) {

4             callback.apply(this, [this[i], i, this]);

5         }

6     };

7 }

若是是引入的jQuery插件，可將該段代碼放在插件內容的開頭便可，這樣在IE8下執行forEach方法就不會報錯了。 

 4.IE8不支持map解決辦法

• 添加自定義forEach方法

 1 if (!Array.prototype.map) {
  2     Array.prototype.map = function(callback, thisArg) {
  3         var T, A, k;
  4         if (this == null) {
  5             throw new TypeError(" this is null or not defined");
  6  }
  7         // 1. Let O be the result of calling ToObject passing the |this| value as the argument.

 8         var O = Object(this);
  9         // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length".

10         // 3. Let len be ToUint32(lenValue).

11         var len = O.length >>> 0;
 12         // 4. If IsCallable(callback) is false, throw a TypeError exception.

13         // See: http://es5.github.com/#x9.11

14         if (typeof callback !== "function") {
 15             throw new TypeError(callback + " is not a function");
 16  }
 17         // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.

18         if (thisArg) {
 19             T = thisArg;
 20  }
 21         // 6. Let A be a new array created as if by the expression new Array(len) where Array is

22         // the standard built-in constructor with that name and len is the value of len.

23         A = new Array(len);
 24         // 7. Let k be 0

25         k = 0;
 26         // 8. Repeat, while k < len

27         while(k < len) {
 28             var kValue, mappedValue;
 29             // a. Let Pk be ToString(k).

30             // This is implicit for LHS operands of the in operator

31             // b. Let kPresent be the result of calling the HasProperty internal method of O with argument Pk.

32             // This step can be combined with c

33             // c. If kPresent is true, then

34             if (k in O) {
 35                 // i. Let kValue be the result of calling the Get internal method of O with argument Pk.

36                 kValue = O[ k ];
 37                 // ii. Let mappedValue be the result of calling the Call internal method of callback

38                 // with T as the this value and argument list containing kValue, k, and O.

39                 mappedValue = callback.call(T, kValue, k, O);
 40                 // iii. Call the DefineOwnProperty internal method of A with arguments

41                 // Pk, Property Descriptor {Value: mappedValue, : true, Enumerable: true, Configurable: true},

42                 // and false.

43                 // In browsers that support Object.defineProperty, use the following:

44                 // Object.defineProperty(A, Pk, { value: mappedValue, writable: true, enumerable: true, configurable: true });

45                 // For best browser support, use the following:

46                 A[ k ] = mappedValue;
 47  }
 48             // d. Increase k by 1.

49             k++;
 50  }
 51         // 9. return A

52         return A;
 53  };
 54 }