【问题标题】:Detecting browsers that are not supported by jQuery (2)检测jQuery不支持的浏览器(二)
【发布时间】:2013-08-06 17:59:00
【问题描述】:

如果这个问题有明显的答案,请原谅我,但我一直没能找到。我正在考虑切换到 jQuery 2,虽然我不关心支持旧版浏览器,但我希望能够告诉使用不受支持的浏览器的用户他们不能使用该网站。

我在这里 (http://blog.jquery.com/2013/03/01/jquery-2-0-beta-2-released/) 看到您可以使用条件 cmets 在不同版本的 IE 上分支 .js 文件,但我相信 jQuery 2.0 也会放弃对许多其他浏览器的支持,而不仅仅是 IE,所以我不支持'认为这不会单独完成[编辑:这是错误的,请参阅下面的更大编辑]。

在理想情况下,我会切换到 jQuery 2,然后拥有一个 javascript 函数,当 jQuery 告诉我它不支持浏览器时调用该函数。有没有我想念的直接方法?

谢谢。

编辑:

我看到了这篇文章 (http://bugs.jquery.com/ticket/13404),它把我带到了这里:http://jquery.com/browser-support/。事实证明,在支持方面,jQuery 2 仅与 IE 浏览器上的 jQuery 1.9 不同。因此,也许更好的问题是如何检测 jQuery 不支持的浏览器(一般来说,不仅仅是版本 2)——我已经更新了问题标题。

EDIT2:

由于特征检测是解决此问题的最推荐方法,因此 jQuery 支持方法在这里看起来很相关 (http://api.jquery.com/jQuery.support/)。然而,它似乎也很难依赖(因为它可能会在没有通知的情况下更改)。

我想这会产生关键问题。 我应该如何知道 jQuery 功能是否受到旧浏览器的潜在不支持?例如,如果有人带着 4 版本的旧副本访问该站点Firefox,我不知道我需要测试哪些功能。如果 jQuery 可以提供某种完全支持的功能测试,那就太棒了,比如 HTML5:http://html5test.com/

EDIT3:

好的,因此使用条件包含语句(在下面的答案和 jQuery 网站上突出显示),您可以处理旧版本的 IE。但是,对于其他浏览器来说,这有点棘手。由于您不能依赖 jQuery 来告诉您有关浏览器对函数 x、y 或 z 的支持的任何信息,因此我的方法只是查询底层的 javascript。如果要查询基于 CSS 的支持,可以使用modernizr。对于基于 javascript 的支持,这是我用来检测其他浏览器的 SUPER 旧版本的方法:

function browser_ok() {

    if  (
            ( !Array.prototype.indexOf ) ||
            ( !Array.prototype.forEach ) ||
            ( !String.prototype.indexOf ) ||
            ( !String.prototype.trim ) ||                
            ( !Function.prototype.bind ) ||
            ( !Object.keys ) ||
            ( !Object.create ) ||
            ( !JSON ) ||
            ( !JSON.stringify ) ||
            ( !JSON.stringify.length ) ||
            ( JSON.stringify.length < 3 )
        )
    {
        return false;
    }

    // # local storage support
    // source: http://diveintohtml5.info/storage.html

    try {
        var local_storage_support = ( 'localStorage' in window && window['localStorage'] !== null );
        if ( !local_storage_support ) {
            throw new Error("local_storage_support: failed");
        }
    }
    catch ( e ) {
        return false;
    }

    // # AJAX uploads

    if ( !window.FormData || !window.FileReader ) {
        return false;
    }

    // # HTML data elements

    var body = $("body");
    body.data("browser_support_test",42);
    if ( body.data("browser_support_test") !== 42 ) {
        return false;
    }
    else {
        body.removeData("browser_support_test");
    }

    return true;
}

AFAICT,这个功能应该消除所有可能给 jQuery 的基本功能带来麻烦的浏览器。如果您想做任何花哨的事情,那么您可能需要某个特定的功能,因此您可以专门检查它。

【问题讨论】:

  • jQuery 不支持是什么意思? asin,图书馆的任何部分绝对不能在所述浏览器中工作?这是一个相当高的要求,我怀疑大多数(如果不是所有)浏览器都以某种方式与 jQuery 的某些部分一起使用。如果你想逐个分解它,那将需要相当多的代码来检测 jquery 的功能是否可以在所述浏览器中工作。

标签: jquery jquery-2.0


【解决方案1】:

在支持 IE 6、7 和 8 的同时获得 jQuery 2.0 的好处的一种方法是使用条件 cmets:

<!--[if lt IE 9]><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><![endif]-->
<!--[if IE 9]><!--><script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!--<![endif]-->
<script>window.jQuery||document.write('<script src="jquery.js"><\/script>');</script>
  • 第一个条件注释确保为 IE
  • 最新版本的 jQuery (2.0.3) 用于 IE 9 和无法识别条件 cmets 的浏览器(IE 10 放弃了对条件 cmets 的支持)。
  • 当 jQuery 无法从 CDN 加载时,会加载回退(jquery.js,托管在您的服务器上)。

【讨论】:

  • 我对此有点矛盾。一方面,现在您获得了适用于非 IE 浏览器的更轻量级的 2.x 和适用于 IE 的 1.x。另一方面,您不能使用任何新的 2.x 功能(或者您需要为它们单独设置回退),那么为什么不对所有浏览器使用 1.10 呢?您还需要针对这两个版本测试网站,并且有可能从版本之间的细微差异中获得难以追踪的错误。
  • @Juhana - 首先,没有“新的 2.x 功能”,1.x >= 1.9 和 2.x 的 api 是相同的。显然,2.x 可能更有效,但那是不同的。其次,根据您使用的浏览器,浏览器之间的细微差异已经存在难以追踪的错误。即使在所有浏览器上使用单一版本时,也会发生这种情况。
【解决方案2】:

看起来它只是放弃了对 IE 6、7 和 8 的支持 - 你应该可以使用:

HTML:

<!--[if lt IE 9]> <html data-browser="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->

JS:

if( document.documentElement.getAttribute('data-browser') !== null ){
    // not supported by jQuery 2.x
}

如果您决定支持旧版浏览器,但仍希望 jQuery 团队在 2.x 中包含的改进,那么您可以使用 1.x 版本:http://jquery.com/download/

更新:

检测每个不支持 jQuery 的浏览器是困难/不切实际的,原因是 jQuery 只是一个 javascript 库。

不同的浏览器和版本过去使用不同的方法来做一些基本的javascript(比如ajax)的事情,这意味着一些旧的浏览器会支持一些功能而不会支持其他的。没有直接的此浏览器支持所有功能此浏览器不支持任何功能测试.

Rob W 的建议非常好,将新版本(2.x)提供给现代浏览器,将 1.x 版本(支持旧版)提供给旧浏览器。

看看这篇文章:Graceful degradation versus progressive enhancement 并考虑使用Modernizr 库。这使您可以检查用户的浏览器支持哪些功能,并允许您编写应用程序以充分利用最新的进步,同时仍为旧浏览器的用户提供良好的体验。

【讨论】:

  • 你说得对。我已经编辑了原始问题并扩大了其范围。
  • @EleventyOne - 我已经添加到我的答案中。我建议您也查看 Rob W 的答案 - 这可能是您正在寻找的更多内容。
  • 谢谢,乔。您的答案比 Rob W 的答案更接近我所追求的,尽管他的答案肯定提供了丰富的信息。 Modernizr 看起来很棒,感谢您的链接!
  • 哦,讽刺的是,使用 jQuery 来查看 &lt;html&gt; 元素是否有一个表明不支持 jQuery 的类:)
  • @ivarni - 啊,非常好!我刚刚将该方法替换为基于非 jquery 的方法。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-11-13
  • 2012-02-02
  • 1970-01-01
  • 2014-10-05
  • 2011-12-12
相关资源
最近更新 更多