Question

在IE 10中，脚本仅在每个选项卡的首次加载时运行。重新加载页面后，js无法运行，并且只有服务器端呈现的页面。开发人员工具中的控制台标签为空。我没有收到任何错误。该行为仅在IE 10中得以体现。在IE 11中一切正常。

添加了核心js库。应用使用gatsby框架

console.log('TestPage file'); // that console.log works fine every time
class TestPage extends React.Component {
  constructor(props) {
    super(props);
    console.log('TestPage constructor'); // that console.log works only on first load
  }

  componentDidMount() {
    console.log('TestPage  componentDidMount'); // that console.log works only on first load
  }

  render() {
    return <div>{isClient ? 'TestPage  CLIENT' : 'TestPage  SERVER'}</div>;
  }
}

isClient在客户端上为真

我希望js每次都能运行

Answer 1

React不能立即与所有版本的IE兼容

摘自官方文档：

React支持所有流行的浏览器，包括Internet Explorer 9及更高版本，尽管IE 9和IE 10等较旧的浏览器需要某些填充。

我们不支持不支持ES5方法的旧版浏览器，但是如果使用polyfill，您可能会发现您的应用程序可以在旧版浏览器中运行页面中包含诸如es5-shim和es5-sham之类的内容。你在你的如果您选择走这条路，那就拥有它。

要使您的应用程序在IE（11或9）上运行，您将必须安装React-app-polyfill：

https://www.npmjs.com/package/react-app-polyfill

功能：

每个polyfill确保存在以下语言功能：

Promise (for async / await support)
window.fetch (a Promise-based way to make web requests in the browser)
Object.assign (a helper required for Object Spread, i.e. { ...a, ...b })
Symbol (a built-in object used by for...of syntax and friends)
Array.from (a built-in static method used by array spread, i.e. [...arr])

用法

首先，使用Yarn或npm安装软件包：

npm install react-app-polyfill

现在，您可以导入要支持的最低版本的入口点。例如，如果导入IE9入口点，则其中将包括IE10和IE11支持。

Internet Explorer 9

// This must be the first line in src/index.js
import 'react-app-polyfill/ie9';

// ...

Internet Explorer 11

// This must be the first line in src/index.js
import 'react-app-polyfill/ie11';

// ...

您还可以使用以下文档将清单配置为处理不同的浏览器：https://github.com/browserslist/browserslist

示例：

"browserslist": [
    ">0.2%",
    "not dead",
    "ie >= 9"
]

在IE 10中，脚本仅在每个选项卡的首次加载时运行

1 个答案: