javascript - 尝试在 IE11 中加载损坏的 JS 时保留 HTML 而不是显示空白页面
问题描述
我正在开发一个节点项目,该项目在构建网站时使用 create-react-app 和 webpack 捆绑 JavaScript 文件。我不打算支持 IE,但是我希望向使用 IE 打开应用程序的用户显示一条消息,因为默认情况下,由于 create-react-app 缺少对浏览器的支持,应用程序会崩溃填充物。
这个想法是在 Webpack 使用的 HTML 模板中包含一个加载消息,当 React 完成渲染时将其删除。如果 React 无法正确渲染或浏览器不支持某些 JS,加载消息应该保留在那里。但是,当浏览器中包含 JS 文件时,由于 JavaScript 文件中的错误(即 IE 不支持的功能),整个页面只是空白,因此该消息也消失了。
有什么方法可以防止页面变为空白,而是保留之前的 HTML?
解决方案
我建议你尝试在文件开头添加 polyfills index.js
。
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
如有必要,添加其他 polyfill。
在文件中添加IE 11
开发。browserlist
package.json
"browserslist": {
"production": [
"ie 11",
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"ie 11",
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
删除.cache
文件夹内的node_modules
文件夹,然后再次尝试运行该应用程序。
应用程序应在 IE 11 浏览器中加载。
之后尝试使用下面的 JS 代码并将其添加到您的反应应用程序中。
下面的代码将使用用户代理识别 IE 浏览器,您可以向用户显示有用的消息。
function detectIE() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf('MSIE ');
if (msie > 0) {
return "IE " + parseInt( ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
}
var trident = ua.indexOf('Trident/');
if (trident > 0) {
var rv = ua.indexOf('rv:');
return "IE " + parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
}
// other browser
return "false";
}
var result=detectIE();
if (result=="false")
{
document.getElementById("info").innerHTML +="<h2>Welcome to the site...</h2>";
}
else
{
document.getElementById("info").innerHTML += "<h2>Dear user you are using " + result + " This browser is not supported by this site. Kindly use supported browser...</h2>";
}
此外,您可以根据自己的要求修改代码示例。
推荐阅读
- python - 如何用特定字符替换python字符串中的字符串?
- android - 打开时活动很慢
- element - 原子创建双尖括号
- pyautogui - 循环 Python 中的 PYAUTOGUI
- sql - SQL 显示但删除一些行
- firebase - 尝试调用 FirebaseX.subscribe,但未安装 FirebaseX 插件
- javascript - 如何在clojurescript中嵌入js?
- node.js - core.js:5873 错误类型错误:无法读取 HomeComponent_Template (home.component.html:3) 处未定义的属性“文件名”
- python - ModuleNotFoundError 使用 pip
- javascript - 使用变量引用对象名称 - javascript