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

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

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

---

有没有办法防止页面变为空白，而是保留以前的HTML？

我建议您尝试在

index.js

文件的开头添加多边形填充

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

"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"
    ]
  }

如有必要，添加其他多边形填充

在

package.json

文件中的development

browserlist

中添加

IE 11

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

"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"
    ]
  }

删除

node\u modules

文件夹中的

.cache

文件夹，然后再次尝试运行该应用程序

应用程序应加载到IE 11浏览器中

之后，尝试使用下面的JS代码并将其添加到react应用程序中

下面的代码将使用用户代理识别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>";
         }

函数检测（）{
var ua=window.navigator.userAgent；
var msie=ua.indexOf（'msie'）；
如果（msie>0）{
返回“IE”+parseInt（ua.substring（msie+5，ua.indexOf（'.'，msie）），10）；
}
变量trident=ua.indexOf（'trident/'）；
如果（三叉戟>0）{
var rv=ua.indexOf（'rv:'）；
返回“IE”+parseInt（ua子字符串（rv+3，ua索引（'.'，rv）），10）；
}
//其他浏览器
返回“false”；
}
var result=detectIE（）；
如果（结果=“假”）
{
document.getElementById（“info”）.innerHTML+=“欢迎访问网站…”；
}
其他的
{
document.getElementById（“info”）.innerHTML+=“亲爱的用户，您正在使用”+result+“此网站不支持此浏览器。请使用受支持的浏览器…”；
}

---

此外，您可以根据自己的要求修改代码示例。

如果您认为我在答案中提供的步骤可以帮助您在IE 11浏览器中加载应用程序，并且示例代码可以帮助您显示消息，那么我建议您将有帮助的建议标记为已接受的答案。它可以在未来帮助其他社区成员解决类似的问题。谢谢你的理解。