5 Ways to Fix jQuery $.browser function missing not found

OK so now it’s officially been declared that the $.browser function has been deprecated. What do we do? Don’t panic I have 5 possible solutions below for you to implement as your discretion. This GitHub Message from the repo says it all really:

“NO LONGER MAINTAINED This repo is not active. Please use the jQuery Migrate plugin if $.browser is required, rewrite the code, or usenavigator.userAgent directly.”

So why has $.browser been removed?

Most developers first thoughts when they started seeing errors appearing, were thinking “What the hell, why has $.browser been removed?”. Well let me explain a little about some possible reasons for this. Because $.browser uses navigator.userAgent to determine the platform, it is vulnerable to spoofing by the user or misrepresentation by the browser itself. It is always best to avoid browser-specific code entirely where possible. The $.support property is available for detection of support for particular features rather than relying on $.browser.

Available flags are:

Solution 1 – Migrate jQuery

Use the jQuery Migrate Plugin to Upgrade earlier versions of jQuery to jQuery 1.9.x . Here is the migrate $.browser code in all it’s glory:

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"
        };
};

// Don't clobber any existing jQuery.browser in case it's different
if ( !jQuery.browser ) {
        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;
}

// Warn if the code tries to get jQuery.browser
migrateWarnProp( jQuery, "browser", jQuery.browser, "jQuery.browser is deprecated" );

Solution 2 - Use Modernizr
Use Modernizr to utilise feature detection, HTML5/CSS3 etc... instead of basic browser detection. I think Modernizr is great!

Solution 3 - Use jQuery.Support

Use the new $.support to utilise feature & bug detection. Once again jQuery does all the hard work and performs tests on browser and stores results on the jQuery.support object (every page load by default). We can then simple query this object to determine is a feature is available to use or not. For example to check for opacity support simply do this:

if (jQuery.support.opacity)
{
   //opacity you may do...
}

Solution 4 - Use JavaScript/Manual Detection

Detect browsers and versions using the following JavaScript code snippets. Quirksmode have a pretty extensive JavaScript Browser/Device Detection Object which may prove useful.

/*
        Internet Explorer sniffer code to add class to body tag for IE version.
        Can be removed if your using something like Modernizr.
    */
    var ie = (function ()
    {

        var undef,
        v = 3,
            div = document.createElement('div'),
            all = div.getElementsByTagName('i');

        while (
        div.innerHTML = '',
        all[0]);

        //append class to body for use with browser support
        if (v > 4)
        {
            $('body').addClass('ie' + v);
        }

    }());

Solution 5 - Prevention/Inform

Simply inform the user that the version of jQuery they are using does not support the $.browser function. Probably wouldn't recommend this solution as it does nothing for usability, but could be used to block certain plugins. I would suggest using the developer version of the Migrate plugin which turns on informative debugging.

var undef;
    if ($.browser == undef) {
      message = [];
      message.push("WARNING: you appear to be using a newer version of jquery which does not support the $.browser variable.");
      message.push("The jQuery iframe auto height plugin relies heavly on the $.browser features.");
      message.push("Install jquery-browser: https://raw.github.com/jquery/jquery-browser/master/src/jquery.browser.js");
      alert(message.join("n"));
      return $;
    }

Source: https://raw.github.com/house9/jquery-iframe-auto-height/master/release/jquery.iframe-auto-height.plugin.1.9.1.js

As always, comments, suggestions and improvements welcomed.