16

Forgive me if there is an obvious answer to this question, but I haven't been able to find it. I am considering switching over to jQuery 2 and, although I'm not concerned about supporting older browsers, I would like to be able to tell users with unsupported browsers that they can't use the site.

I see here (http://blog.jquery.com/2013/03/01/jquery-2-0-beta-2-released/) that you can use conditional comments to branch .js files on different versions of IE, but I believe jQuery 2.0 drops support for a number of other browsers too, not just IE, so I don't think that would do it alone [edit: this is wrong, see larger edit below].

In an ideal world, I'd switch to jQuery 2 and then have a single javascript function that is called when jQuery tells me that it doesn't support the browser. Is there a straightforward way of doing this that I'm missing?

Thanks.

EDIT:

I came across this post (http://bugs.jquery.com/ticket/13404) which directed me here: http://jquery.com/browser-support/. It turns out that, in terms of support, jQuery 2 only differs from jQuery 1.9 on IE browsers. Accordingly, perhaps a better question to ask is how to detect browsers that are not supported by jQuery (in general, not just version 2) - I have updated the question title.

EDIT2:

As feature detection is the most recommended approach to this issue, the jQuery support method looks relevant here (http://api.jquery.com/jQuery.support/). However, it also seems quite iffy to rely on (as it can change without notice).

I suppose this creates the key question. How am I supposed to have any idea what jQuery features are or are not subject to potential non-support from old browsers? For instance, if someone comes to the site with a 4-version-old copy of Firefox, I wouldn't have any idea what features I'd need to test for. It would be ace if jQuery could offer some sort of fully-supported feature test, like this for HTML5: http://html5test.com/

EDIT3:

Okay, so with the conditional include statements (highlighted in answers below, and on jQuery's site), you can deal with old versions of IE. However, for other browsers, it's a little tricky. Since you cannot rely on jQuery to tell you anything about the browser's support for function x, y, or z, my approach is simply to query the underlying javascript. If you want to query CSS-based support, you can use modernizr. For javascript-based support, this is the method I use to detect SUPER old versions of other browsers:

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, this function should eliminate all browsers that could give jQuery trouble for its basic functionality. If you want to do anything fancy, then there's probably a specific piece of functionality that you know you require, so you can check for it specifically.

4

2 回答 2

9

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

<!--[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 < 9 加载 jQuery 1.x。
  • 最新版本的 jQuery (2.0.3) 用于 IE 9 和无法识别条件注释的浏览器（IE 10 放弃了对条件注释的支持）。
  • 当 jQuery 无法从 CDN 加载时，会加载一个备用（jquery.js托管在您的服务器上）。
于 2013-08-06T19:20:11.553 回答
7

看起来它只是放弃了对 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 版本（支持旧版）提供给旧浏览器。

看看这篇文章：优雅降级与渐进增强，并考虑使用Modernizr库。这使您可以检查用户的浏览器支持哪些功能，并允许您编写应用程序以充分利用最新的进步，同时仍然为旧浏览器的用户提供良好的体验。

于 2013-08-06T18:05:06.407 回答