尝试在 IE11 中加载损坏的 JS 时保留 HTML 而不是显示空白页面

Question

我正在开发一个节点项目，该项目在构建网站时使用 create-react-app 和 webpack 来捆绑 JavaScript 文件。我不打算支持 IE，但是我希望向使用 IE 打开应用程序的用户显示一条消息，因为默认情况下，由于 create-react-app 缺少对浏览器的支持，应用程序崩溃而没有polyfills。

这个想法是在 Webpack 使用的 HTML 模板中包含一条加载消息，当 React 完成渲染时将其删除。如果 React 无法正确呈现或浏览器不支持某些 JS，则加载消息应该保留在那里。但是，当 JS 文件包含在浏览器中时，由于 JavaScript 文件中的错误（即 IE 不支持的功能），整个页面就变成空白，因此消息也消失了。

有什么办法可以防止页面变成空白，而是保留之前的 HTML？

Answer 1

我建议您尝试在文件开头添加下面的 polyfill index.js。import 'react-app-polyfill/ie11';import 'react-app-polyfill/stable';如有必要，添加其他 polyfill。在文件中添加IE 11开发。browserlistpackage.json"browserslist": {&nbsp; &nbsp; "production": [&nbsp; &nbsp; &nbsp; "ie 11",&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; ">0.2%",&nbsp; &nbsp; &nbsp; "not dead",&nbsp; &nbsp; &nbsp; "not op_mini all"&nbsp; &nbsp; ],&nbsp; &nbsp; "development": [&nbsp; &nbsp; &nbsp; "ie 11",&nbsp; &nbsp; &nbsp; "last 1 chrome version",&nbsp; &nbsp; &nbsp; "last 1 firefox version",&nbsp; &nbsp; &nbsp; "last 1 safari version"&nbsp; &nbsp; ]&nbsp; }删除.cache文件夹内的node_modules文件夹，然后再次尝试运行该应用程序。应用程序应在 IE 11 浏览器中加载。之后尝试使用下面的 JS 代码并将其添加到您的 React 应用程序中。下面的代码将使用用户代理识别 IE 浏览器，您可以向用户显示有用的消息。&nbsp;function detectIE() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var ua = window.navigator.userAgent;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var msie = ua.indexOf('MSIE ');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if (msie > 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return "IE " + parseInt( ua.substring(msie + 5, ua.indexOf('.', msie)), 10);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var trident = ua.indexOf('Trident/');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if (trident > 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var rv = ua.indexOf('rv:');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return "IE " + parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// other browser&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return "false";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var result=detectIE();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if (result=="false")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("info").innerHTML +="<h2>Welcome to the site...</h2>";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;else&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("info").innerHTML += "<h2>Dear user you are using " + result + " This browser is not supported by this site. Kindly use supported browser...</h2>";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}此外，您可以根据自己的要求修改代码示例。