Javascript 在IE 10中,脚本仅在每个选项卡的第一次加载时运行

Javascript 在IE 10中,脚本仅在每个选项卡的第一次加载时运行,javascript,reactjs,gatsby,Javascript,Reactjs,Gatsby,在IE 10中,脚本仅在每个选项卡的第一次加载时运行。重新加载页面后,js不会运行,只会得到一个服务器端呈现的页面。开发工具中的控制台选项卡为空。我没有收到任何错误。这种行为只在IE 10中表现出来。在IE 11中一切正常 添加了核心js库。应用程序使用盖茨比框架 console.log('TestPage file'); // that console.log works fine every time class TestPage extends React.Component { co

在IE 10中,脚本仅在每个选项卡的第一次加载时运行。重新加载页面后,js不会运行,只会得到一个服务器端呈现的页面。开发工具中的控制台选项卡为空。我没有收到任何错误。这种行为只在IE 10中表现出来。在IE 11中一切正常

添加了核心js库。应用程序使用盖茨比框架

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>;
  }
}
console.log('TestPage文件');//console.log每次都可以正常工作
类TestPage扩展了React.Component{
建造师(道具){
超级(道具);
console.log('TestPage构造函数');//该console.log仅在第一次加载时工作
}
componentDidMount(){
console.log('TestPage componentDidMount');//该console.log仅在第一次加载时工作
}
render(){
返回{isClient?'TestPage CLIENT':'TestPage SERVER'};
}
}
iClient在客户端上为true


我认为js每次运行时都会反应,但这与IE的所有版本都不兼容

从官方文件:

React支持所有流行的浏览器,包括Internet Explorer 9和更高版本,但对于IE 9和IE 10等较旧的浏览器,需要一些多边形填充

我们不支持不支持ES5方法的旧浏览器,但是 你可能会发现你的应用程序在旧的浏览器中也能正常工作 如es5垫片和es5假垫片包含在页面中。你在路上 如果您选择走这条路,请选择own


要使您的应用程序在IE(11或9)上运行,您必须安装React应用程序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])
用法

首先,使用纱线或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';

// ...

您还可以使用以下文档配置清单以处理不同的浏览器:

例如:

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

您是否正在加载一些旧浏览器所需的文件?(见附件)是的。如果我不这样做的话,第一次加载不会很好。如果你已经包含了polyfills,那么你在gatsby的结构中包含了它们吗?在gatsby-browser.js文件中有响应,但是我的代码中已经包含了polyfills。在第一次页面加载正确。重新加载页面时会出现问题