javascript - IE 在不支持的代码后不解析任何 JS？

Question

我想使用某些 JS 代码，但只能根据浏览器是否支持 @supports (CSS) 和 CSS.supports() (JS) 属性/函数。

现在，Internet Explorer 不支持 CSS.supports() 或 @supports。这很好 - 这个想法是构建 JS 代码，这样，如果浏览器不支持它们中的任何一个，那么它会回退到一个工作版本。

这在所有其他浏览器上都能完美运行，即使是那些不支持 @supports/CSS.supports() 的浏览器。

但在 IE 中，它会一直解析 JS 代码，直到第一次提到 CSS.supports()，然后它就会完全中断，并且不会解析之后的单个字符。

我正在使用 IE 11，这是我正在使用的 JS 代码(我也在使用 jQuery):

$(function() {
    var port = $(window);
    var container = $('html, body');

    if( !CSS.supports("-webkit-overflow-scrolling", "touch") & CSS.supports("perspective", "1px")) {
        var port = $('.prllx');
        var container = $('.prllx');
    };

    // OTHER CODE GOES HERE
});

但是，正如我所说，IE 在 IF 检查后不会读取任何代码。

然后我试着写了一个测试代码，用一个更简单的例子看看会发生什么:

    var helloworld = !CSS.supports("-webkit-overflow-scrolling", "touch");
    $("#test").html(helloworld);            
    if (helloworld == true) {
        $("#test2").html("HELLO WORLD FROM WITHIN IF");         
    };

但 IE 在第一行之后不解析任何内容(我一直在插入 $("#div").html("HELLO WORLD"); 每隔一行查看 IE 在哪一点停止解析 JS，它确实发生在第一次提到 CSS.supports 之后。

我似乎无法理解:在所有其他不支持 CSS.supports() 的浏览器中，IF(在我的第一个示例中)显然会触发 false，并且变量保持不变。但是他们继续解析该实例之后的剩余代码，即使他们不/不能解析 CSS.supports() 因为他们不支持该功能。但是 IE 完全停止解析。

我不得不说我对 javascript 不是特别流利，所以我可能在这里遗漏了一些非常简单的东西 - 或者它实际上可能是一个错误，在这种情况下，我该如何解决它？如果是 IE，如何在不破坏整个代码的情况下检查浏览器是否支持 CSS.supports()？

提前致谢!

Answer 1

任何不具有引用函数的 supports 属性的 CSS 对象的浏览器都将抛出异常，如下所示:

$(function() {
    var port = $(window);
    var container = $('html, body');

    // vv Exception on this line
    if( !CSS.supports("-webkit-overflow-scrolling", "touch") & CSS.supports("perspective", "1px")) {
        var port = $('.prllx');
        var container = $('.prllx');
    };

    // OTHER CODE GOES HERE
});

当函数中抛出未处理的异常时，控制权会转移到函数之外，发生异常的地方后面的代码将不会运行。这不是 IE 的事情，这是 JavaScript 和大多数其他有异常的语言的工作方式。

相反，放置一个守卫检查 CSS 是否存在，如果存在，它是否有一个 supports 是一个函数:

$(function() {
    var port = $(window);
    var container = $('html, body');

    if( typeof CSS === "object" &&
        typeof CSS.supports === "function" &&
        !CSS.supports("-webkit-overflow-scrolling", "touch") &&
        CSS.supports("perspective", "1px")) {
        var port = $('.prllx');
        var container = $('.prllx');
    }

    // OTHER CODE GOES HERE
});

一些主机提供的函数错误地报告typeof。在这种情况下，您可能需要将上面的 === "function" 更改为 !== "undefined"。这是一个较弱的守卫，因为并非所有未定义的东西都是可调用的，但有时主机提供的函数不会按应有的方式报告 "function"。

---

旁注:JavaScript 中的逻辑“与”运算符是 &&(如上)，而不是 &。 & 是按位“与”运算符(将其操作数强制为 32 位整数并在位级别组合它们)。它之所以重要，主要是因为 && 短路，这意味着如果它的左侧操作数是假的(例如，typeof CSS === "object" 不为真)，它根本 不评估其右手操作数，因此我们可以安全地做一些假设左手操作数为真(例如查看 CSS 的 support 属性)。

旁注 2:您不要在附加到控制流语句的 block 结束后放置 ;。它无害，但毫无意义。