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在第一行之后并没有解析任何事情（我已插入$（＆＃34;＃div＆＃34;）。html（＆＃34; HELLO WORLD＆＃34;）;每隔一行排一行，看看IE停止解析JS的时间点，它就是在第一次提到CSS.supports之后发生的。

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

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

提前多多感谢！

Answer 1

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

$(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的{{1}}属性）。 / p>

附注2：在附加到control-flow语句的块结束后，不要放置support。它是无害的，但毫无意义。

IE不支持代码后解析任何JS？

1 个答案: