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 会少走很多弯路
发表回复