IE11下React应用window.location跳转异常，求技术解决方案

我之前维护兼容IE11的React项目时，碰到过完全一样的问题——打开开发者工具时用window.location跳转就崩溃，还经常被重定向到那个res://ieframe.dll/acr_error.htm#错误页，折腾了好一阵才总结出几个可行的解决办法：

1. 替换跳转API，用location.assign()替代直接赋值 #

IE11对直接给window.location或window.location.href赋值的兼容性很差，尤其是调试状态下容易触发内核冲突。换成标准的assign方法试试：

// 替换前
// window.location = "目标URL";
// window.location.href = "目标URL";

// 替换后
window.location.assign("目标URL");

我当时替换后，开发者工具打开时的崩溃问题直接就解决了，这个方法是最有效的。

2. 给跳转加极短延迟（应对极端场景） #

如果assign方法还是偶尔出问题，可以给跳转加个100ms左右的延迟，让IE11先处理完当前页面的任务再执行跳转：

setTimeout(() => {
  window.location.assign("目标URL");
}, 100);

延迟时间别太长，不会影响用户体验，却能避开IE11的线程冲突问题。

3. 确保跳转前异步任务已完成 #

IE11对ES6异步语法的支持本来就有缺陷，如果跳转前有未完成的Promise、fetch请求或者React的异步setState，很容易和跳转逻辑冲突导致崩溃。可以把跳转放在异步任务完成后执行：

// 比如等待所有关键请求完成后再跳转
Promise.all([fetchData1(), fetchData2()]).then(() => {
  window.location.assign("目标URL");
});

4. 规避IE11的跨协议跳转限制 #

如果跳转的URL和当前页面协议不同（比如http→https，或者反过来），IE11的安全机制可能会触发错误重定向。可以检查目标URL的协议是否和当前页面一致，或者业务允许的话，用window.open()在当前标签打开：

window.open("目标URL", "_self");

5. 检查React项目的IE11兼容性配置 #

如果项目的polyfill没配全，也会导致这类奇怪的运行时错误。确保：

• 在项目入口文件（比如index.js）开头引入必要的polyfill：

  import 'core-js/stable';
  import 'regenerator-runtime/runtime';
  

• package.json中的browserslist包含ie 11配置：

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "ie 11"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 11"
    ]
  }
  

内容的提问来源于stack exchange，提问作者Sombir Kumar