IE 不会在不受支持的代码之后解析任何 JS

IE does not parse any JS after unsupported code?

本文关键字：之后 任何 JS 代码 支持 IE      更新时间：2023-09-26

我想使用某些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（）而不破坏整个代码？

提前非常感谢！

任何没有具有

引用函数的 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 中的逻辑"and"运算符是 &&（如上所述），而不是&。&是按位"and"运算符（将其操作数强制为 32 位整数，并在位级别将它们组合在一起）。它之所以重要，主要是因为&&短路，这意味着如果它的左操作数是假的（例如，typeof CSS === "object"不是真的），它根本不计算它的右操作数，所以我们可以安全地做一些假设左手操作数是真实的（比如查看CSS的support属性）。

旁注 2：不要在附加到控制流语句的块末尾放置;。这是无害的，但毫无意义。

相关文章：