1 序言
ps: 第四节写了我碰到的问题和解决办法，对后面不感兴趣的能够间接跳到那里
在我的项目的进行中，原有的失常显示在 win7 零碎中呈现许多异样，起因是因为 win7 自带的 ie 版本是 ie8，而现金罕用的 win10 自带的是 ie11，在编写代码的时候没有思考周全是一点，另外一点须要留神的是，即便在 win10 环境下把以后 ie 调节成 ie8，器兼容性的测试也是存在差别的，局部在 ie8 中无奈兼容的函数，在 win10 中的 ie8 中兼容（如 Array.isArray），临时未找到具体起因。因而在我的项目中须要兼容 ie8 的许多内容。
2 开始
因为习惯了框架的写法，忽然转到原生 jquery 的世界还有许多有余的中央，很多的操作都是边查边写，也闹出了不少那种在外行里看来滑稽的操作手法，不过能实现就行了（强行阿 Q）。过后问了大佬这种原生兼容性的有什么比拟好的，快捷的，不便的写法，被举荐引入 polyfill，被框架惯坏了的人，是真的要去多补充一点 babel 和 webpack 相干的常识了，在 polyfill 的帮忙下，我能够尽量少的去更改我原有的一些习惯写法，这一切都是那么的完满，工作进度也失常的推动，实现了编写后，本人简略的测试一下，没有任何异样，直到测试关上了 win7 零碎，不能说是全副不能用，也就大部分间接炸穿，款式畸形，接口返回异样。
3 起因
兼容性异样的问题次要集中在以下几个局部：
- 款式异样：具体表现就是移位错位，这部分相对来说好改，之前思考了局部款式兼容的问题；
- 对象不存在：通常来说就是你想用的这个快捷办法函数或者性能是在 ie8 外面不反对的；
- ie8 不反对跨域拜访：如果接口都是 get 申请还好，然而 post 跨域是相对会被毙掉的，手都不给你握，就是这么任性；
- 局部事件响应机制的异样，绑定的 keydown 和你想要的不统一，监听函数写法也存在差别
4 问题和解决办法
以下问题都是在 ie8 下的兼容解决，不确定在其余环境能够胜利
问题：input 无奈获取焦点的，怎么点都不显示
解决办法：input 不能设置为通明背景或者 none，另外，ie9 以下不反对 type=search
问题：对象不存在
我碰到的次要有以下几种，其中 bind 是为了应用监听函数引入的
/**
* @desc 兼容 ie6 7 8 JSON
* @author baidu
*/
if (!window.JSON) {
window.JSON = {parse: function (jsonStr) {return eval("(" + jsonStr + ")");
},
stringify: function (jsonObj) {
var result = "",
curVal;
if (jsonObj === null) {return String(jsonObj);
}
switch (typeof jsonObj) {
case "number":
case "boolean":
return String(jsonObj);
case "string":
return '"'+ jsonObj +'"';
case "undefined":
case "function":
return undefined;
default:
break;
}
switch (Object.prototype.toString.call(jsonObj)) {case "[object Array]":
result += "[";
for (var i = 0, len = jsonObj.length; i < len; i++) {curVal = JSON.stringify(jsonObj[i]);
result += (curVal === undefined ? null : curVal) + ",";
}
if (result !== "[") {result = result.slice(0, -1);
}
result += "]";
return result;
case "[object Date]":
return (
'"' +
(jsonObj.toJSON ? jsonObj.toJSON() : jsonObj.toString()) +
'"'
);
case "[object RegExp]":
return "{}";
case "[object Object]":
result += "{";
for (i in jsonObj) {if (jsonObj.hasOwnProperty(i)) {curVal = JSON.stringify(jsonObj[i]);
if (curVal !== undefined) {result += '"'+ i +'":'+ curVal +",";}
}
}
if (result !== "{") {result = result.slice(0, -1);
}
result += "}";
return result;
case "[object String]":
return '"'+ jsonObj.toString() +'"';
case "[object Number]":
case "[object Boolean]":
return jsonObj.toString();
default:
break;
}
}
};
}
// 兼容 Array.isArray
if (!Array.isArray) {Array.isArray = function (arg) {return Object.prototype.toString.call(arg) === "[object Array]";
};
}
// 兼容 bind 函数
if (!Function.prototype.bind) {Function.prototype.bind = function () {if (typeof this !== "function") {
throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
}
var _this = this;
var obj = arguments[0];
var ags = Array.prototype.slice.call(arguments, 1);
return function () {_this.apply(obj, ags);
};
};
}问题：也是对象不存在，不过时监听函数
我因为有对页面中的 iframe 传 message，还有就是全局监听单击事件，所有须要
addEventListener和removeEventListener，然而在 ie8 中不反对，还有一点很重要的就是，在 ie8 中不能间接写window.attachEvent("onkeydown", keyDownSaveAs());这样的，他会异样，必须要写 function 套住才行，具体实现方法如下：
// 监听函数
if (window.attachEvent) {window.attachEvent("onkeydown", function (e) {// keyDownSaveAs(e); 这里写本人的函数办法
stopDefault(e);
});
} else if (window.addEventListener) {window.addEventListener("keydown", function (e) {// keyDownSaveAs(e); 这里写本人的函数办法
stopDefault(e);
});
}
// 阻止默认浏览器行为
function stopDefault(e) {
// 如果提供了事件对象，则这是一个非 IE 浏览器
if (e && e.preventDefault) {// 阻止默认浏览器动作(W3C)
e.preventDefault();} else {
//IE 中阻止函数器默认动作的形式
window.event.returnValue = false;
}
return false;
}
// 解除监听
if (window.removeEventListener) {window.removeEventListener("keydown", keyDownSaveAs, false);
} else {window.detachEvent("onkeydown", keyDownSaveAs.bind(window));
}问题：post 申请无奈跨域
讲真，我查了很久，找了很多办法，如果有人碰到了问题，能够先借鉴这位 不意识，然而和我的异样截然不同 的解决办法。然而我在用了所有办法之后还是存在问题，不分明是不是因为 jsp 写页面的起因（我也是第一次接触 jsp），而后就向后端大佬求救，他把原来的接口映射到了以后域名，就没有了跨域问题了。。。。。
ps2: 真的真的真的记得写兼容性前对不确定的办法函数查一下 Can I Use 会少走很多弯路