# 浏览器兼容问题概览

### 浏览器兼容问题

#### 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**](https://stackoverflow.com/questions/15114279/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](https://i.stack.imgur.com/fqpzH.png)

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

**3.** [**SCRIPT1006: Expected ')'**](https://stackoverflow.com/questions/44732066/script1006-expected)**、SCRIPT1002: Syntax error**

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

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

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

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

**SCRIPT1002: Syntax error:** 不支持 class。如

```js
class Base {
  constructor() {}
}
```

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

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

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

  ```js
  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](https://umijs.org/zh-CN/config#nodemodulestransform)
* \*\*<umi@2.x.x>：\*\*的修改就比较麻烦了。
  * extraBabelIncludes 属性：定义额外需要做 babel 转换的文件匹配列表，格式为数组，数组项是 [webpack#Condition](https://webpack.js.org/configuration/module/#condition)。（尝试修改，但是没有成功）
  * chainWebpack 属性：修改 webpack 配置。（推荐）

    ```js
    // 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` 字段。

  ```js
  ['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`，还是有报错。

```js
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。（未解决）**

注：<react-dom.production@17.min.js> 报错。

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

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

**解决：**

1. 引入 [element-remove](https://github.com/chenzhenxi/element-remove) polyfill。
2. 为 Element 对象定义一个 remove 方法：

   ```js
   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的层叠规则与其他主流浏览器不一样**


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://lizh.gitbook.io/knowledge/bugs/02-liu-lan-qi-jian-rong-wen-ti-gai-lan.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.