关于javascript:ie8兼容性情况-记录

5次阅读

共计 3487 个字符，预计需要花费 9 分钟才能阅读完成。

ps: 第四节写了我碰到的问题和解决办法，对后面不感兴趣的能够间接跳到那里
在我的项目的进行中，原有的失常显示在 win7 零碎中呈现许多异样，起因是因为 win7 自带的 ie 版本是 ie8，而现金罕用的 win10 自带的是 ie11，在编写代码的时候没有思考周全是一点，另外一点须要留神的是，即便在 win10 环境下把以后 ie 调节成 ie8，器兼容性的测试也是存在差别的，局部在 ie8 中无奈兼容的函数，在 win10 中的 ie8 中兼容（如 Array.isArray），临时未找到具体起因。因而在我的项目中须要兼容 ie8 的许多内容。

因为习惯了框架的写法，忽然转到原生 jquery 的世界还有许多有余的中央，很多的操作都是边查边写，也闹出了不少那种在外行里看来滑稽的操作手法，不过能实现就行了（强行阿 Q）。过后问了大佬这种原生兼容性的有什么比拟好的，快捷的，不便的写法，被举荐引入 polyfill，被框架惯坏了的人，是真的要去多补充一点 babel 和 webpack 相干的常识了，在 polyfill 的帮忙下，我能够尽量少的去更改我原有的一些习惯写法，这一切都是那么的完满，工作进度也失常的推动，实现了编写后，本人简略的测试一下，没有任何异样，直到测试关上了 win7 零碎，不能说是全副不能用，也就大部分间接炸穿，款式畸形，接口返回异样。

兼容性异样的问题次要集中在以下几个局部：

款式异样：具体表现就是移位错位，这部分相对来说好改，之前思考了局部款式兼容的问题；
对象不存在：通常来说就是你想用的这个快捷办法函数或者性能是在 ie8 外面不反对的；
ie8 不反对跨域拜访：如果接口都是 get 申请还好，然而 post 跨域是相对会被毙掉的，手都不给你握，就是这么任性；
局部事件响应机制的异样，绑定的 keydown 和你想要的不统一，监听函数写法也存在差别

以下问题都是在 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 申请无奈跨域