首頁猿問嘗試在 IE11 中加載損壞的...

嘗試在 IE11 中加載損壞的 JS 時保留 HTML 而不是顯示空白頁面

JavaScript

有只小跳蛙 2023-05-25 16:41:30

我正在開發(fā)一個節(jié)點項目，該項目在構(gòu)建網(wǎng)站時使用 create-react-app 和 webpack 來捆綁 JavaScript 文件。我不打算支持 IE，但是我希望向使用 IE 打開應(yīng)用程序的用戶顯示一條消息，因為默認情況下，由于 create-react-app 缺少對瀏覽器的支持，應(yīng)用程序崩潰而沒有polyfills。這個想法是在 Webpack 使用的 HTML 模板中包含一條加載消息，當(dāng) React 完成渲染時將其刪除。如果 React 無法正確呈現(xiàn)或瀏覽器不支持某些 JS，則加載消息應(yīng)該保留在那里。但是，當(dāng) JS 文件包含在瀏覽器中時，由于 JavaScript 文件中的錯誤（即 IE 不支持的功能），整個頁面就變成空白，因此消息也消失了。有什么辦法可以防止頁面變成空白，而是保留之前的 HTML？

查看完整描述

1 回答

拉丁的傳說

TA貢獻1789條經(jīng)驗獲得超8個贊

我建議您嘗試在文件開頭添加下面的 polyfill index.js。

import 'react-app-polyfill/ie11';

import 'react-app-polyfill/stable';

如有必要，添加其他 polyfill。

在文件中添加IE 11開發(fā)。browserlistpackage.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文件夾內(nèi)的node_modules文件夾，然后再次嘗試運行該應(yīng)用程序。

應(yīng)用程序應(yīng)在 IE 11 瀏覽器中加載。

之后嘗試使用下面的 JS 代碼并將其添加到您的 React 應(yīng)用程序中。

下面的代碼將使用用戶代理識別 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>";

}

此外，您可以根據(jù)自己的要求修改代碼示例。

反對回復(fù) 2023-05-25