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 }
复制代码

 

posted @ 2018-06-04 13:35  星朝  阅读(20015)  评论(0编辑  收藏  举报