web-dev-qa-db-ja.com

ブラウザ検出jQuery 1.9の最も簡単/最も軽い代替品

昨日、いくつかのクライアントから、一部のコードが機能しなくなったという苦情がありました。どうやら、廃止されたjQuery.browser jQuery 1.9がリリースされたときに昨日動作を停止しました。

私は1.9の変更文書を（すばやく）見て、seems彼らはそれのためにかなり重いライブラリを置き換えたいと思うようですone関数。

その機能を復元するための推奨される最軽量プラグインまたはコードスニペットはありますか？

これらのサイトに必要なものは、非常に基本的なものです。 IE vs FF vs他のすべての人の最も基本的な検出のみが必要です。

提案？

jquerybrowser-detection
62
jchwebdev

Alexx Rocheが回答した次のコードを使用しましたが、MSIEを検出したかったので、

<script type="text/javascript">
   $(document).ready(function() {
      if (navigator.userAgent.match(/msie/i) ){
        alert('I am an old fashioned Internet Explorer');
      }
   });
</script>

それが役に立てば幸い！

38
Fede

jQuery Migrateは、コードの更新中に 後方互換性のために作成された でした。

https://github.com/jquery/jquery-migrate

おまけとして、廃止された機能を使用時に記録します。問題を解決するまで試してみます。また、サイトにjQueryの特定のバージョンを設定する必要があります。アップグレードすることをお勧めしますが、運用環境に移行する前にアップグレードをテストしてください。 CDNを使用している場合でも、ファイル名に特定のバージョンを指定できます。

さて、あなたはあなたが求めているもののためにjQueryプラグインを必要としません。 navigatorオブジェクト を確認してください。

appCodeName: "Mozilla"
appName: "Netscape"
appVersion: "5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.52 Safari/537.17"
cookieEnabled: true
doNotTrack: null
geolocation: Geolocation
language: "en-US"
mimeTypes: MimeTypeArray
onLine: true
platform: "MacIntel"
plugins: PluginArray
product: "Gecko"
productSub: "20030107"
userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.52 Safari/537.17"
vendor: "Google Inc."
vendorSub: ""
22
Brad
var browser = {
        chrome: false,
        mozilla: false,
        opera: false,
        msie: false,
        safari: false
    };
    var sUsrAg = navigator.userAgent;
    if(sUsrAg.indexOf("Chrome") > -1) {
        browser.chrome = true;
    } else if (sUsrAg.indexOf("Safari") > -1) {
        browser.safari = true;
    } else if (sUsrAg.indexOf("Opera") > -1) {
        browser.opera = true;
    } else if (sUsrAg.indexOf("Firefox") > -1) {
        browser.mozilla = true;
    } else if (sUsrAg.indexOf("MSIE") > -1) {
        browser.msie = true;
    }
    console.log(browser.msie);
20
user989952

次のコードをサイトに配置します（jsファイルなど、またはjQueryのコードの後に​​...）：

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;
11
Synthy

同じ問題が発生したときに、次のコードを使用しました。

<script type="text/javascript">
 $(document).ready(function() {
    //if (!$.browser.webkit && ! $.browser.mozilla) { //depricated
    if (!navigator.userAgent.match(/mozilla/i) && 
        ! navigator.userAgent.match(/webkit/i) ){
        alert('Let me tell you about Mozilla');
    }
 });
</script>
10
Alexx Roche

減価償却方法から離れるまで更新できませんでした。

とにかくバージョン番号を指定せずにCDNからjqueryを含めるべきではありません。これは、CDNを使用する目的（キャッシュなし）を無効にします。

$ .browserをサポートしたjQueryの最新バージョンへのリンクは次のとおりです。

http://code.jquery.com/jquery-1.8.3.min.js

jquery.js srcをそのリンクに置き換えるだけで、先に進む準備ができるまでコードは実行され続け、減価償却された機能の使用を停止します。

注：Fancybox2は引き続き$ .browserを使用します。これは、更新以来これまで見た中で最も一般的なものです。

更新：Slickgridはまだ$.browserを使用しています。2013年2月11日の時点で更新はありません

6
Kevin B

JQuery.browserのロジックをプラグイン jquery.browser に抽象化しました。プラグインはMITライセンスの下でリリースされます。

IE11のサポートも追加しました。Opera= WebkitおよびAndroid検出。

6
Gabriel Cebrian

試してください Conditionizr

お役に立てれば ：）

2
Ijas Ameenudeen

IEの正確なバージョンは、特定のIEバージョン。

10 or older document.all
9 or older  document.all && !window.atob
8 or older  document.all && !document.addEventListener
7 or older  document.all && !document.querySelector
6 or older  document.all && !window.XMLHttpRequest
5.x document.all && !document.compatMode

if (document.all && !document.querySelector) {
    alert('IE7 or lower');
}

これらのテストは、なりすましに使用されるuserAgentの使用を回避します

2
Vincent Gloaguen
if(!$.browser){
    $.browser={chrome:false,mozilla:false,opera:false,msie:false,safari:false};
    var ua=navigator.userAgent;
        $.each($.browser,function(c,a){
        $.browser[c]=((new RegExp(c,'i').test(ua)))?true:false;
            if($.browser.mozilla && c =='mozilla'){$.browser.mozilla=((new RegExp('firefox','i').test(ua)))?true:false;};
            if($.browser.chrome && c =='safari'){$.browser.safari=false;};
        });
};

http://jsfiddle.net/R3AAX/3/

1
etb

短くてパワフル。

// chrome, safari, webkit, mozilla, msie, opera
var chrome = /chrome/i.test(navigator.userAgent);
1
Victor M

必要なのがjQuery.browser.msieを使用できるようにするサードパーティのjQueryプラグインだけである場合は、ここに1つのライナーがあります。 jQueryの後に含めるだけです。

jQuery.browser = jQuery.browser || {msie: navigator.userAgent.match(/msie/i) ? true : false};

これは最も愚かな修正ですが、必要なのはそれだけであり、機能するので、ここに行きます！

1
Ben Hull

この議論に追加します。 jquery $ .browserプラグインを思い付きました。これは、「検出」の代わりに、単にユーザーエージェントを使いやすいオブジェクトに解析するだけです。特定のブラウザとプラットフォームをさらに分解して解析するために、さらにロジックを簡単に適用できます。

ここで：UserAgentString.com が見つかったユーザーエージェントで非常に信頼できる結果が得られました。 ie11のバージョン検出（下部近く）も含めました。

//The following code is by no means perfect, nor is it meant to be a standalone 'detection' plugin. 
//It demonstrates parsing the useragent string into an easy to manage object. 
//Even if it does make detection rediculously easy.. :)

//Because this regex makes no assumptions in advance.
//IMO, It's compatibilty and maintainability is much higher than those based on static identifiers.

/*
  uaMatch replacement that parses a useragent string into an object
  useragent segments can be Name Value OR Name/Value OR Name

  Segment: Name Value
    Name: parsed to the last whitespace character
    Value: value after the last whitespace character
    Matches: (.NET CLR) (#.##), Android 2.3.4, etc
    Note: this regex can have leading/trailing whitespace (trimmed for object properties)

  Segment: Name/Value
    Matches: all values matching Name/Value
    Example: Firefox/24.0, Safari/533.1, Version/12.1, etc

  Segment: Name
    Matches: identifiers that hold no values (value of 'true' is implied)
    Example: Macintosh, Linux, Windows, KHTML, U, etc


   WARNING: not necessarily compatible with jQuery's $.browser implementation.
   - not recommended as a replacement for plugins that require it to function.
*/
(function ($) {

    var ua = navigator.userAgent.toLowerCase();

    var regex = /compatible; ([\w.+]+)[ \/]([\w.+]*)|([\w .+]+)[: \/]([\w.+]+)|([\w.+]+)/g;
    var match = regex.exec(ua);

    var browser = { };

    while (match != null) {
        var prop = {};

        if (match[1]) {
          prop.type = match[1];
          prop.version = match[2];
        }
        else if (match[3]) {
          prop.type = match[3];
          prop.version = match[4];
        }
        else {
          prop.type = match[5];
        }

        // some expressions have leading whitespace (i couldn't avoid this without a more complex expression)
        // trim them and get rid of '.' (' .NET CLR' = 'net_clr') 
        prop.type = $.trim(prop.type).replace(".","").replace(" ","_"); 
        var value = prop.version ? prop.version : true;

        if (browser[prop.type]) {
            if (!$.isArray(browser[prop.type]))
                browser[prop.type] = new Array(browser[prop.type]);

            browser[prop.type].Push(value);
        }    
        else browser[prop.type] = value;

        match = regex.exec(ua);
    }

    for (var i in browser)
        if (i.indexOf("mac") > -1)
            browser.mac = true;

    if (browser.windows_nt && !browser.windows)
        browser.windows = true;

    //put known browsers into the 'version' property for 'some' jquery compatibility

    //for sake of argument chromium 'is' chrome
    if (browser.chromium && !browser.chrome)
        browser.chrome = browser.chromium;

    //chrome / safari / webkit
    if (browser.chrome) {
        browser.version = browser.chrome;
    }
    else if (browser.safari) {
        browser.version = browser.safari;
    }
    else {
        if (browser.applewebkit)
            browser.webkit = browser.applewebkit;

        if (browser.webkit)
            browser.version = browser.webkit;
    }

    //firefox / gecko
    if (browser.firefox) {
        if (browser.rv)
            browser.version = browser.rv;

        else browser.version = browser.firefox;
    }
    else if (browser.gecko) {
        if (browser.rv)
            browser.version = browser.rv;

        else browser.version = browser.gecko;
    }

    //opera
    if (browser.opera && !browser.version)
        browser.version = browser.opera;

    //msie
    if (browser.trident && browser.rv) //ie11
        browser.msie = browser.rv;

    if (browser.msie)
        browser.version = browser.msie;

    $.browser = browser;//Rename to reduce confliction?

    //WAS USED FOR TESTING & DISCOVERY (very useful)
    //TODO: remove line below
    alert(JSON.stringify($.browser));

}) (jQuery);

Internet Explorer 10では、JSON.stringifyは次のようなものを出力します。

{"mozilla":"5.0","msie":"10.0","windows_nt":"6.2","trident":"6.0","net4.0e":true,"net4.0c":true,"net_clr":["3.5.30729","2.0.50727","3.0.30729"],"windows":true,"version":"10.0"}
1
SilverX