浏览器兼容问题概览

浏览器兼容问题

IE浏览器

1.Symbol 未定义

**解决：**添加 babel-polyfill 或者直接引入 https://cdn.bootcdn.net/ajax/libs/babel-polyfill/7.12.1/polyfill.min.js。

备注：polyfill 文件需要在其他 .js 文件（尤其是报错的js文件）之前引入。

2. SCRIPT5022 SecurityError。WebSocket on IE10 giving a SecurityError

**原因：**打开一个本地(内部网)域的 websocket，IE抛出一个安全性错误（SecurityError）

**解决：**禁用IE识别本地站点的自动算法：Tools > Internet Options > Security > Local Intranet > Sites.

取消选中的 include all local (intranet) sites not listed in other zones ，或者取消所有选中的复选框。

intranet detection settings

备注：修改后，重启IE浏览器。

3. SCRIPT1006: Expected ')'、SCRIPT1002: Syntax error

**原因：**IE浏览器不支持es6的一些新语法。

一般项目编译，会将项目根目录下 src 等文件夹下的所有.js|jsx 文件中的 ES6 语法转换成 ES5，且会将node_modules文件夹下所有文件忽略，而部分node_modules 下的包会包含了ES6语法。

SCRIPT1006: Expected ')': 不支持函数的默认参数。如：

function correlation (xMatrix, xMatrix = xMatrix, options = {} ) {
}

SCRIPT1002: Syntax error: 不支持 class。如

class Base {
  constructor() {}
}

解决： 用转换器，将ES6转成ES5。比如 babel。

采用不同工具创建的项目，修改 babel配置的方法不一样。

• **webpack 配置文件：**在 module -> rules 的 babel-loader 的 include 属性中追加 resolve('node_modules')。

  module.exports = {
    module: {
      rules: [
        {
          test: /\.js$/,
          loader: 'babel-loader',
          include: [
            resolve('src'),
            resolve('test'),
            resolve('node_modules')
          ],
        }
      ]
    }
  }

• umi@3.1.x：配置 nodeModulesTransform 设置 node_modules 目录下依赖文件的编译方式。nodeModulesTransform
• **umi@2.x.x：**的修改就比较麻烦了。

  • extraBabelIncludes 属性：定义额外需要做 babel 转换的文件匹配列表，格式为数组，数组项是 webpack#Condition。（尝试修改，但是没有成功）
  • chainWebpack 属性：修改 webpack 配置。（推荐）

    // config.js
    export default {
      chainWebpack: config => {
        config.module
        .rule('js-in-node_modules')
        .before('js')
        .test(/\.(js|jsx|ts|tsx)$/)
        .include.add(/node_modules/)
         .end()
        .use('babel')
        .loader('babel-loader')
        .options({
          presets: [
            ['@babel/preset-env', { targets: 'defaults', modules: false }],
            ['@babel/preset-react'],
            ['@babel/preset-typescript'],
          ],
        });    
      }
    }

    https://github.com/umijs/umi/issues/2025

4. IE浏览器会缓存GET请求

• 在 get 请求的 url 中增加随机标识。如：时间戳。

• 请求头 headers 添加两个键值参数。服务端需要在 Access-Control-Allow-Header 里面添加 cache-control、Pragma 字段。

  ['Cache-Control'] = 'no-cache';
  ['Pragma'] = 'no-cache';

• 修改浏览器配置。Internet选项 >> 浏览历史记录 >> 设置 >> Internet 临时文件的选项改为‘每次访问网页时’

• 在服务端设置 header(“Cache-Control: no-cache, must-revalidate”)

• 改为 post 接口

5. This browser lacks typed array (Uint8Array) support which is required by buffer v5.x. Use buffer v4.x if you require old browser support。（未解决）

备注：将 buffer 版本回退到4.3.0，还是有报错。

npm list buffer
├── buffer@4.3.0
└─┬ umi-plugin-react@1.15.8
  └─┬ webpack@4.41.1
    └─┬ node-libs-browser@2.2.1
      └── buffer@4.3.0  deduped

6. cannot call a class as a function。（未解决）

注：[e-mail] 报错。

7. DOM 对象不支持 remove 属性或方法

原因： IE 浏览器的 Element 对象是没有remove方法的

解决：

1. 引入 element-remove polyfill。
2. 为 Element 对象定义一个 remove 方法：

   if (!('remove' in Element.prototype)) {
     Element.prototype.remove = function() {
       if (this.parentNode) {
         this.parentNode.removeChild(this);
       }
     };
   }

8. transform: translate|translateY 等对 table 中的 display: table-header-group|table-row-group 元素（thead、tbody）无效。

9. 不支持event.target.files（IE10）

解决：可修改为 event.srcElement.files || event.target.files

10. 不支持 new FormDate() （IE9）

解决：引入 FormData 的 polyfill。参考 https://gist.github.com/Rob--W/8b5adedd84c0d36aba64、https://github.com/henryluki/FormData

11. 无法获取file对象（IE9）

解决：参考 https://blog.csdn.net/weixin_34352005/article/details/91918449、http://www.zhishichong.com/article/83379

360浏览器

1. z-index的层叠规则与其他主流浏览器不一样