Javascript 如何检查苗条应用程序的浏览器兼容性？

我们希望避免svelte/sapper应用程序中不受支持的浏览器出现问题

1.问题：检测Internet Explorer 我想提醒用户，我们用Sapper/Svelte编写的应用程序与Internet Explorer不兼容。它可以是简单的纯文本消息，也可以重定向到某个错误页面

• 在出现消息的情况下，我希望在显示警告消息后停止执行任何进一步的代码
• 如果选择重定向，则不需要停止执行

现在我有了这个代码

...
...
%sapper.html%
%sapper.scripts%

在

template.html

文件中。这是否足以检测所有IE浏览器（使用旧引擎）

2.问题：在运行时检测任何其他缺失的功能 我在想，检测IE可能不足以正确检测浏览器兼容性。是否有一些通用的苗条兼容性检测功能，我可以使用

我仍然需要一些最后的代码块，若应用程序在运行时会在一些不受支持的功能（本地存储、扩展运算符、服务工作者等）上崩溃，那个么我需要显示消息或将用户重定向到错误页面

---

更新：我将IE条件标记与

meta

标记一起使用。如果需要更好地检测浏览器功能，我会在应用程序初始化过程中以测试的形式实施它。

rollup sapper模板包括对“传统模式”的支持。它在任何地方都没有文档记录，但它使用babel为旧浏览器创建了单独的javascript文件。如果您使用的是ES6语法，那么如果babel配置正确，就不会出现问题。您的站点应该在没有服务人员的情况下仍能正常运行。对于其他功能，如本地存储，我会根据需要测试特定功能，并尝试正常地失败

如果您好奇，这里是Sapper用于检测旧浏览器并加载相应js文件的代码：

(function() {
    try {
        eval("async function x(){}");
        var main = "${main}"
    } catch (e) {
        main = "${legacy_main}"
    };
    var s = document.createElement("script");
    try {
        new Function("if(0)import('')")();
        s.src = main;
        s.type = "module";
        s.crossOrigin = "use-credentials";
    } catch (e) {
        s.src = "${req.baseUrl}/client/shimport@${build_info.shimport}.js";
        s.setAttribute("data-main", main);
    }
    document.head.appendChild(s);
}());

---

您正在使用条件注释检测IE 10和11不支持的IE。如果您想检测所有IE版本，您可以在应用程序的开头执行以下功能：

var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");

if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))  // If Internet Explorer
{
    // If you want to redirect
    window.location.href = "http://www.example.com";
}

---

对于这些特性，我并没有在Svelte中找到API来检测它们。我认为您可以在需要时使用JavaScript来检测对功能的支持。

我在最终版本中提到了一段代码，但在IE11中提到了Shimport。我在标题中添加了

，因此现在编码HTML标记也适用于IE10+版本。