jQuery 1.9 browser detection

Question

In earlier versions, I used to test if I should be triggering popstate manually on page load, because Chrome triggers it right after load, and Firefox and IE do not.

if ($.browser.mozilla || $.browser.msie) {
    $(window).trigger('popstate');
}

Now that they dropped the browser object in 1.9, how should I test for these browsers? Or how do I figure if I need to popstate on page load or not?

The code is:

$(function(){
    $(window).on('popstate', popState);

    // manual trigger loads template by URL in FF/IE.
    if ($.browser.mozilla || $.browser.msie) {
       $(window).trigger('popstate');
    }
});

Update

Went for this:

    function popState(e){
        var initial = e.originalEvent === undefined || e.originalEvent.state === null;
        if(!initial){
            activateRoute({
                key: e.originalEvent.state.key,
                settings: e.originalEvent.state.settings
            },'replace');
        }
    }

    function init(){
        $(window).on('popstate', popState);

        $(function(){
            var route = getRoute(document.location.pathname);
            activateRoute(route, 'replace');
        });
    }

could you instead listen for the event, and if it doesn't happen before page load trigger it? — Kevin B, Jan 27 '13 at 07:40
Note that the Chrome behavior is buggy. The spec has been fixed though, according to this: https://www.w3.org/Bugs/Public/show_bug.cgi?id=18605 I actually have no idea what that ticket is talking about, but mine was closed as a duplicate: https://www.w3.org/Bugs/Public/show_bug.cgi?id=18405 — Jörn Zaefferer, Feb 11 '13 at 22:44

score 21 · Accepted Answer · answered Feb 11 '13 at 22:13

21

You should add a little sanity check to your popstate handler, and make sure that it doesn't do anything expensive if you "pop" into the same state you started in. Then you can not care about the browser, and instead just call your popstate on document ready:

$(function(){
    $(window).on('popstate', popState);

    // call popstate on document ready
    $(popstate);
});

The answer suggesting you paste the code from $.browser back into your environment is way overkill to support a bad practice. You can feature detect 99% of the things you need to. Almost every use of $.browser is a dangerous. There are almost always ways to detect that.

The JavaScript community has been against browser sniffing for a long time. Here is a post from 2009 telling us why it's a bad idea. There are many others.

I beg you not to copy $.browser back into your code, the jQuery team decided to kill it for a reason.

answered Feb 11 '13 at 22:13

gnarf

101,278
24
124
158

1

I didn't, I actually did something similar to what you proposed. My updated question has the solution I arrived at. – bevacqua Feb 11 '13 at 22:17
Also, I would suggest posting an answer with your eventual solution rather than editing your question. It's not "bad form" at all, it's actually encouraged. – gnarf Feb 11 '13 at 22:19
I appreciate the last line of this answer. I was about to do that. – Langdon Mar 26 '13 at 18:15
that's true; "$.browser" is dead. jquery internally uses feature detection through "jQuery.support" but they strongly recommend the use of an external library such as Modernizr instead. – numediaweb Nov 24 '13 at 14:28

score 7 · Answer 2 · answered May 15 '13 at 12:01

Here is a fast way to solve this problem. Add this line of codes to your jQuery-1.9.js and replace $.browser with jQuery.browser

jQuery.browser = {};
jQuery.browser.mozilla = /mozilla/.test(navigator.userAgent.toLowerCase()) && !/webkit    /.test(navigator.userAgent.toLowerCase());
jQuery.browser.webkit = /webkit/.test(navigator.userAgent.toLowerCase());
jQuery.browser.opera = /opera/.test(navigator.userAgent.toLowerCase());
jQuery.browser.msie = /msie/.test(navigator.userAgent.toLowerCase());

here

score 5 · Answer 3 · edited Mar 07 '13 at 09:18

I guess putting this code would do the trick for you. Don't forget to make changes if you need as per your requirement.

var matched, browser;

// Use of jQuery.browser is frowned upon.
// More details: http://api.jquery.com/jQuery.browser
// jQuery.uaMatch maintained for back-compat
jQuery.uaMatch = function( ua ) {
    ua = ua.toLowerCase();

    var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
        /(webkit)[ \/]([\w.]+)/.exec( ua ) ||
        /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
        /(msie) ([\w.]+)/.exec( ua ) ||
        ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
        [];

    return {
        browser: match[ 1 ] || "",
        version: match[ 2 ] || "0"
    };
};

matched = jQuery.uaMatch( navigator.userAgent );
browser = {};

if ( matched.browser ) {
    browser[ matched.browser ] = true;
    browser.version = matched.version;
}

// Chrome is Webkit, but Webkit is also Safari.
if ( browser.chrome ) {
    browser.webkit = true;
} else if ( browser.webkit ) {
    browser.safari = true;
}

jQuery.browser = browser;

For your information - jQuery Docs

We recommend against using this property; please try to use feature detection instead (see jQuery.support). jQuery.browser may be moved to a plugin in a future release of jQuery.

jQuery.browser

jQuery.support

Plugging the code from browser back in isn't the answer... Not sniffing is. Also, please attribute that giant chunk of code, or link to it in the github repo. That is licensed code. — gnarf, Feb 11 '13 at 22:05

jQuery 1.9 browser detection

Update

3 Answers3

For your information - jQuery Docs

Linked

Related