gpt4 book ai didi

javascript - 如何在不导入polyfills的情况下显示 Angular 不支持的Internet Explorer

转载 作者:行者123 更新时间:2023-12-05 01:06:38 24 4
gpt4 key购买 nike

在 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 无法运行。我认为这是因为缺少 polyfills 和 tsconfig 目标设置,这些不会运行。

enter image description here

有没有办法首先“防止” Angular 插入或执行这些脚本标签?我试图在我的 if (msie > 0) block 中删除它们,但这不起作用。

setTimeout(() => {
const x = document.body.querySelectorAll('script[defer]');
x.forEach((i) => document.body.removeChild(i));
});

我的目标是在不调整 polyfill 和 tsconfig 设置的情况下完成此任务,以将构建大小保持在最小值。

最佳答案

在 IE 中显示的错误是由于脚本仍在 IE 中加载。如果不想在 IE 中看到错误,可以在浏览器为 IE 时加载不支持的 html 页面。

此外,您在检测 IE 代码时似乎存在一些问题。我做了一些改动,大家可以引用我下面的步骤,我测试了一下,效果不错:

  1. 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>
  2. 添加 "src/unsupported.html"angular.json assets属性(property)。例如:

    "assets": [
    "src/favicon.ico",
    "src/assets",
    "src/unsupported.html"
    ],
  3. 检测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>

关于javascript - 如何在不导入polyfills的情况下显示 Angular 不支持的Internet Explorer,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68690981/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com