重构之处理IE浏览器兼容问题

目录

情景 1 ：判断是否为 IE 浏览器

情景 2 ：" TypeError : 对象不支持 “ includes ” 属性或方法 "

情景 3 ：报错  SCRIPT5022 : SecurityError sockjs.js (1683,3)

情景 4 ：get 自动请求来自缓存的问题

情景 5 ：tr、td 标签不兼容 HTML contenteditable 属性

情景 6 ：IE 浏览器不兼容之 css 篇

情景 7 ：在 IE 上如何查看浏览器缓存 ？

---

情景 1 ：判断是否为 IE 浏览器

    问题描述：谷歌浏览器 使用 v-model 绑定控制 input 框高的值能够实时反应并生效 ， 

而到了 IE 浏览器上就没有同步的效果了 ，其中一边改了 ，另一边的话只有点击了输入框使其聚焦后才会发生改动后的改变效果 ， 所以就打算通过判定一下是否为 IE 浏览器后并通过代码控制使其进行自动聚焦，也可达到类似的效果，下面则就是如何判断浏览器的知识点：

知识点 : 

navigator.userAgent.indexOf  来 判断 浏览器 类型

$(document).ready(function(){
	var ua = navigator.userAgent;
	if(ua.indexOf("Android")>0 || ua.indexOf("iPhone")>0 || ua.indexOf("iPad")>0) { //移动端
		location.href="${ctx}/live/wap";
	} else { // pc端
		location.href="${ctx}/live/index";
	}
});

<script language="JavaScript">
  function getOs() {
    var OsObject = "";
    if (navigator.userAgent.indexOf("MSIE") > 0) {
      return "MSIE";
    }
    if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) {
      return "Firefox";
    }
    if (isSafari = navigator.userAgent.indexOf("Safari") > 0) {
      return "Safari";
    }
    if (isCamino = navigator.userAgent.indexOf("Camino") > 0) {
      return "Camino";
    }
    if (isMozilla = navigator.userAgent.indexOf("Gecko/") > 0) {
      return "Gecko";
    }
  }
  alert("您的浏览器类型为:" + getOs());
</script>
 
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
  http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
  http_request = new ActiveXObject("Microsoft.XMLHTTP");
}

前端 浏览器 navigator.userAgent 操作

var userAgent = navigator.userAgent;  // 取得浏览器的 userAgent 字符串
console.log(userAgent)

/* 是否是火狐  ，火狐内核 Gecko */
var isFirefox = navigator.userAgent.indexOf('Firefox') > -1 
console.log('火狐' + isFirefox) // 返回 true  则是 ，false  则不是
/* 是否是 WebKit 内核 */
var isWebKit = navigator.userAgent.indexOf('WebKit') > -1
console.log('谷歌内核' + isWebKit) // 返回 true  则是，false  则不是
/* 是否是 谷歌 */
var isChrome = navigator.userAgent.indexOf('Chrome') > -1
console.log('谷歌' + isChrome) // 返回 true  则是 ，false  则不是
/* 是否是 opera ， opera 内核 Presto */
var isOpera = navigator.userAgent.indexOf('Opera') > -1
console.log('Opera' + isOpera) // 返回 true  则是 ，false  则不是
/* 是否是 IE 内核 */
var isTrident = navigator.userAgent.indexOf('Trident') > -1
console.log('IE内核' + isTrident) // 返回 true  则是 ，false  则不是
/* 判断是否 IE 浏览器 */
var isIE = navigator.userAgent.indexOf("compatible") > -1 && navigator.userAgent.indexOf("MSIE") > -1 && !isOpera
console.log('IE ' + isIE)

// 因为 IE10 - IE11 的版本问题，不再支持 document.all 判断，所以 IE 判断函数要重新写
var isIeL = !!window.ActiveXObject || "ActiveXObject" in window
console.log('IELLQ ' + isIeL) // 判断是否IE浏览器
/* 判断是否 IE9 ; 如果是其他 IE 版本，则 MSIE 7.0   MSIE 8.0 */
var isIE9 = navigator.userAgent.indexOf("MSIE 9.0") > 0
console.log('IE999' + isIE9)

// 判断是否为移动端
var browser = {
  versions: function () {
    var u = navigator.userAgent;
    return {
      trident: u.indexOf('Trident') > -1,   // IE 内核
      presto: u.indexOf('Presto') > -1,     // opera 内核
      webKit: u.indexOf('AppleWebKit') > -1, // 苹果、谷歌内核
      gecko: u.indexOf('Firefox') > -1,     // 火狐内核 Gecko
      mobile: !!u.match(/AppleWebKit.*Mobile.*/), // 是否为 移动终端
      ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios
      android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, // android
      iPhone: u.indexOf('iPhone') > -1,     // iPhone
      iPad: u.indexOf('iPad') > -1,         // iPad
      webApp: u.indexOf('Safari') > -1      // Safari
    };
  }()
}
var isPhone = browser.versions.mobile || browser.versions.ios || browser.versions.android || browser.versions.iPhone || browser.versions.iPad
console.log("是否为移动端" + isPhone)

// JS 判断浏览器是否是 IE9 以下，处理可能遇到的兼容性问题
if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE", "")) < 9) {
  console.log("您的浏览器版本过低, 请使用 IE9 及以上版本");
}

项目内所用 ：

src  /  utils  /

/**
 * 判断是否为 IE 浏览器
 */
const isIE = function () {
  if (window.ActiveXObject || "ActiveXObject" in window) {
    return true;
  } else {
    return false;
  }
};

export { isIE };

组件内使用 ：

<template>
  <div>
    <el-input ref="addressInput" v-model="address" :readonly="true"></el-input>
    <el-button
      class="copy-ad"
      type="primary"
      size="medium"
      @click="copyAddress(address)"
      >复制链接</el-button
    >
  </div>
</template>

<script>
import { isIE } from "../../../utils/tools";
export default {
  methods: {
    data() {
      return {
        address: "https://www.baidu.com",
      };
    },
    copyAddress(url) {
      // 拷贝地址
      this.$refs.addressInput.select(); // 输入框内容选中效果
      if (isIE()) {
        this.$message.success("复制成功");
      } else {
        this.$copyText(url)
          .then((res) => {
            this.$message.success("复制成功");
          })
          .catch((err) => {
            this.$message.error("该浏览器不支持自动复制, 请手动复制");
          });
      }
    },
  },
};
</script>

<template>
  <div>
    文本框高 :
    <el-input
      v-model="data.answerInputRow"
      :maxlength="2"
      :disabled="data.quInputType !== '1'"
      placeholder="3 / 行"
      @input="rowNumInput($event, data.answerInputRow, data)"
    ></el-input>
  </div>
</template>

<script>
import digitalInput from "../../../utils/digitalInput";
import { isIE } from "../../../utils/tools";

export default {
  rowNumInput(event, modelValue, data) {
    // 限制用户输入非数字内容(文本框高)
    data.answerInputRow = digitalInput(event, modelValue);
    // IE 浏览器使其自动聚焦
    if (isIE()) {
      this.$nextTick(() => {
        document.getElementById("ieFocus").focus();
      });
    }
  },
};
</script>

---

情景 2 ：" TypeError : 对象不支持 “ includes ” 属性或方法 "

    问题描述：我在利用 Vue 脚手架 vue-cli4 进行开发时，用了 ElementUI 这个组件库里的 InfiniteScroll 无限滚动 组件 ，但是我运行项目在谷歌里跑的好好的，用 IE 浏览器再打开编译好的页面时，就遇到了兼容性问题：组件功能实现不了 ，控制台报错为：

[ Vue warn ] : Error in directive infinite-scroll inserted hook :

" TypeError : 对象不支持 “ includes ” 属性或方法 "  found in  --->

而且最神奇的是我的项目中压根就还没有用到 includes 这个方法呀 ，

我在全局搜索 includes 也都没有找到 ， 然后去对应的文件（ HomePage.vue 文件，index.vue 文件，App.vue 文件 里进行局部搜索 includes 也都没有找到 includes ）

这报错好神奇啊 ， 压根就没有还能报错 （ 可能是Element UI 组件库的底层用到了吧 ）

后来百度查找 ，通过下面这个方法安转一个插件后解决：
第一步、安装 babel-polyfill 插件

1.在项目中安装 babel-polyfill ， $   npm install --save babel-polyfill 

2.在 index.html 里面加上：<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>Document</title>
</head>

<body>
  <div id="app"></div>
</body>

</html>

3.在 main.js 里面引入     import 'babel-polyfill'

4. webpack.base.conf.js 下修改配置项： ( 老版本配置了 ，可忽略此步骤 )

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: ["babel-polyfill", "./src/main.js"]
  }

.....}

【 这一步我没有配置 ， 可能是因为我在 vue.config.js 内配置过了 ， 反正当初也是拿的别的项目模板复制粘贴上去的 ， 最后再运行 IE ，确实不再报错了 ， 好神奇 】
5.重新运行程序  重新运行程序  重新运行程序 重要的事情说三遍，一定要重新运行

然后用 IE 浏览器访问程序，显示正常。

---

情景 3 ：报错  SCRIPT5022 : SecurityError sockjs.js (1683,3)

问题描述：Vue  IE 报错  SCRIPT5022 : SecurityError sockjs.js (1683,3)

1、找到  / node_modules / sockjs-client / dist / sockjs.js

2、找到代码的 1605 行

3、保存后 刷新

---

情景 4 ：get 自动请求来自缓存的问题

src / utils / request.js  内的请求拦截器内

// request 请求拦截器
axios.interceptors.request.use(
  (config) => {
    // 从 session 中拿到 userId, 如果不存在, 说明没有登录, 就去登录页
    let userToken = window.sessionStorage.getItem('userId')
    if (userToken && userToken != null && userToken != 'null') {
      config.headers['userId'] = userToken
      config.headers['If-Modified-Since'] = '0'
      config.headers['Cache-Control'] = 'no-cache' // 清除 IE 接口缓存问题
    } else {
      window.sessionStorage.clear() // 删除登录的所有状态
      if (process.env.NODE_ENV === 'development') {
        window.location.href = `${process.env.VUE_APP_BASE_API}/login`
      } else {
        window.location.href = `${process.env.VUE_APP_BASE_API}/login`
      }
    }
    config.headers["Content-Type"] = "application/json";
    console.log(config, "config");
    // config.timeout = 10000
    return config;
  },
  (error) => {
    // 请求失败拦截
    console.log("request-error:" + error); // for debug
    return Promise.error(error);
  }
);

　　IE 浏览器的缓存问题非常的严重，网上也没有一篇完整的解决思路和文档，特此写下解决方法，供自己以后查看。。。

问题描述：IE 浏览器 get 会自动请求来自缓存的问题

项目在 IE 浏览器内的 get 请求 会在 “ 已接收 ” 下提示显示 （ 来自缓存 ），

并且右边的 标头 下的 请求标头 内容看着很明显不对劲

正文  里的  响应正文  内容也不对

所以最后讨论推导得出的就是因为 get 请求在 IE 里面走了 缓存

解决方案 ： （简单）就直接在 get 请求里多携带一个 时间戳 参数就 OK 啦

new Date().getTime()

---

通过以上两种方法中的任意一种，都可以解决 IE 浏览器中因为缓存问题，

而导致 bootstrap-table 插件中网页的数据与数据库数据不一致的问题；

---

解决 IE 浏览器 axios 发起 get 请求自动请求来自缓存的问题

---

情景 5 ：tr、td 标签不兼容 HTML contenteditable 属性

知识点 ： HTML contenteditable 属性

HTML contenteditable 属性 | 菜鸟教程

---

情景 6 ：IE 浏览器不兼容之 css 篇

1、display : flex ;

(1) align-items: center;  // IE 不生效

解决方案 ：使用 padding 的上下边距来实现一个上下居中假效果

padding : 15px 32px;

(2) 

2、url 路径

// IE 不兼容此写法
.radio {
  content: url('~@/assets/image/radio.png')
}

3、不支持简写形式

(1) border: 1px solid gray;  // IE 不生效

解决方案 ：拆分开来写

border-width: 1px;      // 边框宽度
border-style: solid;    // 边框样式
border-color: #ccc;    // 边框颜色

4、color 颜色值

color: #cccc;  // IE 不生效

解决方案 ： 

设置为 color: #ccc;  或者  color: #cccccc;

5、

---

情景 7 ：在 IE 上如何查看浏览器缓存 ？

以前一直用 chrome 谷歌浏览器 , 查看缓存很方便 , 

开发工具 F12 后点击 Application -> Storage -> local Storage 即可查看 。

现在要用 IE 查看 , IE 没有像  Chrome  一样直接列出 ,

可以在 IE 浏览器的 控制台 输入 localStorage 或者 sessionStorage

IE 查看 ，localStorage 作为 全局对象 ，只需要在控制台中输入 localStorage 即可查看。

• 如果 IE 想清除 ，输入 localStorage.clear() 回车即可 。

---

情景 8 ：