由于IE在Angular 12中被正式棄用，我想在我的頁面中顯示一個靜態警告，以通知用戶切換到支持的瀏覽器。
我在index.html中使用了一個類似這樣的簡單片段 中使用一個簡單的片段，將一個css類附加到正文中，然后顯示一個div元素。
<body class="mat-typography">
<script>
(function msieversion（）{
const ua = window.navigator.userAgent;
const msie = ua.indexOf('MSIE')。
if (msie > 0) {
document.body.classList.add('is-ternet-explorer') 。
}
})();
</script>>
<div class="ie"/span>> isIE</div>
<app-root></app-root>
</body>
.is-ternet-explorer {
.ie {
display: flex;
}
app-root{
display: none;
}
}
.ie {
display: none;
但是我在Internet explorer中遇到了錯誤，runtime.js、polyfills.js、vendor.js和main.js都不能運行。我認為這是因為缺少 polyfills 和 tsconfig 目標設定，所以這些程式無法運行。
是否有辦法首先 "阻止 "angular插入或執行這些腳本標記？我已經嘗試在我的if (msie > 0)塊中洗掉它們，但這不起作用。
setTimeout(() => /span> {
const x = document.body.querySelectorAll('script[defer]')。
x.forEach((i) => document.body.removeChild(i))。
});
我的目標是在不調整polyfill和tsconfig設定的情況下完成這個任務，以保持最小的構建規模。
uj5u.com熱心網友回復：
在IE中顯示的錯誤是由于腳本仍然在IE中加載。如果你不想在IE中看到這些錯誤，你可以在瀏覽器是IE時加載一個不支持的html頁面。
此外，似乎你在檢測IE代碼時有一些問題。我做了一些修改，你可以參考我下面的步驟，我測驗了一下，效果很好：
添加一個
在src檔案夾的根部添加一個unsupported.html檔案。示例unsupported.html檔案：
<!DOCTYPE html>
<html lang="en"/span>>
<head>/span>
<meta charset="utf-8">/span>
<title></title>
< meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<h1>該應用程式不支持IE。請使用其他瀏覽器！</h1>
</body>/span>
</html>
在angular.jsonassets屬性中添加"src/unsupported.html"。例如：
"assets": [/span>
"src/favicon.ico",
"src/assets",
"src/unsupported.html"
],
在src/index.html中檢測瀏覽器，如果是IE則重定向到unsupported.html，如果不是則渲染<app-root> 。代碼如下：
<!doctype html>
<html lang="en">
<head>/span>
<meta charset="utf-8">/span>
<title>/span>MyApp</title>
<base href="/"/span>>
< meta name="viewport" content="width=device-width, initial-scale=1">
< link rel="icon" type="image/x-icon" href="favicon。 ico">
</head>
<body>
<script type="text/javascript">/span>
var msie = /msies|trident/i. test(window.navigator.userAgent) 。
if (msie) {
//IE，重定向頁面。
window.location.href = " ./unsupported.html";
}
else {
//render app
var elem = document.createElement("app-root") 。
document.body.appendChild（elem）。
}
</script>。
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/320196.html
標籤：