如何在不匯入pollyfills的情況下以角度顯示不支持的InternetExplorer-有解無憂

隨著 Angular 12 中正式棄用 IE，我想在我的頁面中顯示靜態警告以通知用戶切換到支持的瀏覽器。

我在 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-internet-explorer');
                }
            })();
        </script>
        <div class="ie">isIE</div>
        <app-root></app-root>
    </body>

.is-internet-explorer {
    .ie {
        display: flex;
    }
    app-root{
        display: none;
    }
}
.ie {
    display: none;
}

但我在 Internet Explorer 中遇到錯誤，runtime.js、polyfills.js、vendor.js 和 main.js 無法運行。我認為這是因為缺少 polyfill 和 tsconfig 目標設定，這些將無法運行。

如何在不匯入pollyfills的情況下以角度顯示不支持的Internet Explorer

有沒有辦法首先“防止”角度插入或執行這些腳本標簽？我試圖在我的if (msie > 0)塊中洗掉它們，但這不起作用。

setTimeout(() => {
    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">

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

<body>
    <h1>The app is not supported in IE. Please use other browsers!</h1>
</body>

</html>

添加"src/unsupported.html"angular.json屬性 assets。例如：

"assets": [
          "src/favicon.ico",
          "src/assets",
          "src/unsupported.html"
 ],

在src/index.html中檢測瀏覽器，如果 IE 則重定向到unsupported.html，如果不是則呈現<app-root>。代碼如下：

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">
  <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">
      var msie = /msie\s|trident/i.test(window.navigator.userAgent);
      if (msie) {
        //IE, redirect page
        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/qukuanlian/419316.html

標籤：

上一篇：帶有Powershell的IE自動化發送ENTER鍵

下一篇：無法使用VBA在InternetExplorer中輸入日期