web-dev-qa-db-ja.com

$ .browser.msieが廃止されたjQuery 1.3でブラウザー検出を行う方法は？

JQuery 1.3が非推奨になった（そして将来のバージョンで削除されることを想定している）$.browser.msieや類似のブラウザを検出するにはどうすればよいですか？

これを使用して、次のようなほとんどすべてのブラウザーのCSSを修正するために、どのブラウザーを使用しているかを判断しました。

$.browser.opera
$.browser.safari
$.browser.mozilla

...まあ、それだけだと思います:)

私が使用している場所では、ブラウザのどの問題が問題を引き起こしているかはわかりません。多くの場合、ブラウザの1 pxの違いを修正しようとしているだけだからです。

編集：新しいjQuery機能では、IE6またはIE7のどちらにいるかを判別する方法はありません。これを今どのように決定すべきですか？

jquerycssbrowser-detection
24
Darryl Hein

私は似たようなものに直面していました、$。support.png（p.ej.）がないため、まだ$ .browser.versionを使用する必要があります。必要に応じて。

9
Ricardo Vega

はい、ブラウザの検出は廃止されましたが、廃止されたプロパティはおそらくすぐにjQueryから削除されないでしょう。また、それらが削除される場合でも、ブラウザーの検出を絶対に行う必要がある場合は、小さくシンプルなプラグインを使用して同じ機能を簡単に追加できます。

だから、私の答えはそれについて何もしないことです、今のところ:)

編集：私は将来使用するプラグインも提供します（テストされていません、jqueryソースからコピーして貼り付けられます）：

(function($) {
    var userAgent = navigator.userAgent.toLowerCase();

    $.browser = {
        version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [0,'0'])[1],
        safari: /webkit/.test( userAgent ),
        opera: /opera/.test( userAgent ),
        msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
        mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
    };

})(jQuery);
33
kkyy

.browserは非推奨になり、.supportが採用されました。詳細はこちら： jquery.support これは本質的に、ブラウザーのスニッフィングを使用する代わりに、jqueryが機能サポートの検出を行い、ブラウザーが実行できることをより細かく制御できることを意味します。

説明から：

JQuery 1.3で追加さまざまなブラウザ機能またはバグの存在を表すプロパティのコレクション。

jQueryにはいくつかのプロパティが含まれています。自由に追加してください。これらのプロパティの多くはかなり低レベルなので、一般的な日常の開発に役立つかどうかは疑問ですが、主にプラグインとコア開発者が使用します。

すべてのサポートプロパティの値は、機能検出を使用して決定されます（ブラウザのスニッフィングを使用しません）。

8
Ray Booysen

機能のサポートは良い考えに聞こえますが、考えられるすべての「バグ」をサポートする場合にのみ、意図したとおりに機能します。最初のコメント投稿者と同様に、$ support.png、$ support.stepping、$ support.peekabooはありません。これの問題は、1つのブラウザを準拠させるための一部のコードが、それを必要としないブラウザによって実行されることを避けられないことです。

5
Bert

ブラウザの検出はjQueryでは非推奨です。 jQuery.browser のドキュメントページ：

このプロパティを使用しないことをお勧めします。代わりに機能検出を使用してみてください（jQuery.supportを参照してください）。

非推奨とは、「将来の削除予定」を意味します。ユーザーエージェントではなく機能のスニッフィングに関するこのアドバイスは、一般的なアドバイスにすぎず、jQueryに固有ではありません。彼らが言っているのは、正しいことをより簡単に行えるようにすることです。

ただし、常にユーザーエージェントをスニッフィングする必要があります。 jQuery.supportが開発者の軍隊によって毎日更新されない限り、すべてのブラウザーのすべてのマイナーポイントバージョンのすべてのバグとすべての機能に対応する方法はありません。

これについての混乱は、jQueryが内部的にブラウザーのスニッフィングを行わなくなったという事実から生じたと思います。ただし、ユーティリティAPI jQuery.browserは引き続き存在します。

5
jpsimons
function browserLessThanIE7(){
   return (/MSIE ((5\\.5)|6)/.test(navigator.userAgent) && navigator.platform == "Win32");
}

また、正常に動作する可能性があります...これはバージョン5、5.5、6をチェックします。

@Nate：（5\.5）| 6を7に変更し、バージョン7をチェックします。

4
user187222

私はjQuery 1.2のコードベースからそれをリバースエンジニアリングすると言います。

コードのこのセクションを参照してください。

jQuery.browser = {
    version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[1],
    safari: /webkit/.test( userAgent ),
   opera: /opera/.test( userAgent ),
  msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
  mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
};

GPLとMITライセンスを尊重し、コードから学びます。コピーして貼り付けないでください。

またはIE6の臭いを嗅ぐために特に。あなたがすることができます：

function IsThisBrowserIE6() {
    return ((window.XMLHttpRequest == undefined) && (ActiveXObject != undefined))
}
2
BuddyJoe

機能検出はすべてうまく機能しているように聞こえますが、特定のブラウザーで機能しないコードを書いている場合、最も速い方法はブラウザー検出です。

自動マージンを使用して要素を水平方向に中央揃えにすると、IEを除くすべてのブラウザーで機能します。どの機能をテストしますか？何も思いつきません。しかし、私はそれが動作しないブラウザを知っています。

機能検出が特定の状況で役立つ理由がわかります。ブラウザがquirks/strictモードの場合。最善の妥協案は、両方の方法を利用することです。

このことを考慮して、jQuery.browserドキュメントページから「このプロパティを使用しないことをお勧めします。代わりに機能検出を使用してください」を削除する必要があります。それは誤解を招くものです。

2
john

Jquery.browserを書き直して、jquery.supportを内部的に使用して機能に基づいてブラウザーを決定できなかった理由（おそらく、必要に応じてjquery.browserからの現在のメソッドで補完されます）。ブラウザーファミリーとバージョンを選択する便利な手段を提供する、おそらく今日のjquery.browserよりも信頼性が高いですか？

2
Matt Vaughan

これはIE 6の場合は最もクリーンな方法ではないかもしれませんが、確実に機能し、理解しやすくなっています。

$(document).ready(function() {
    ie6catch = $.browser.msie + $.browser.version;
    if (ie6catch.indexOf("true6") == -1) {
        alert("This is not Internet Explorer 6");
    }
});
1
Tristan Botly

IE8だけでなく、MozillaおよびWebkitブラウザーでも正常に動作するJavascriptを取得しています。ただし、6と7では壊れます。これはCSSや貧弱なJavaScriptとは何の関係もありませんが、IE <8のくだらないサポートです。

ブラウザのスニッフィングとは対照的に、「機能」のチェックについて人々がどこから来ているのかを確認できますが、スニッフィングが利用できる機能は、破壊的なコードには関係がないため、ブラウザのスニッフィングと機能のスニッフィングの違いは何ですかすべての機能は$ .supportオブジェクトで利用できますか？

1
Justin

http://code.labor8.eu/geckoFix でGeckoFixスクリプトを試してください。3.0よりも低いFirefoxが検出されるため、必要に応じてカスタマイズできます（つまり、Firefoxを検出するようにルールを追加することにより） 2、Firefox 3、Opera and Safari）。あなたが探しているものかもしれないと思います。ユーザーエージェントを確認するには、アドレスバーにjavascript：alert（navigator.userAgent）と入力し、スクリプトに入力する必要がある特定の文字を見つけます。

1
Vot

navigator.userAgentは、簡単に変更でき、ページを表示している実際のブラウザを表していない可能性があるという意味で、あまり信頼できません。これが理由の1つかもしれません$.browserはもともと廃止されました。

しかし、質問のために、ブラウザの検出が絶対に必要であると仮定しましょう。

私は James Padolseyによるこの非常にクールなスニペット に遭遇しました。これは、実際には条件付きコメントを使用してInternet Explorerを区別します。

上記のスニペットと yepnope.js からのコードを含む小さなコードをコンパイルしました：

(function(window, doc) {
    window.detector = window.detector || (function() {
        var undef,
            docElement = doc.documentElement,       
            v = 3,
            div = document.createElement('div'),
            all = div.getElementsByTagName('i'),
            isGecko = ( 'MozAppearance' in docElement.style ),
            isGeckoLTE18 = isGecko && !! doc.createRange().compareNode,
            isOpera = !! ( window.opera && toString.call( window.opera ) == '[object Opera]' ),
            isWebkit = ( 'webkitAppearance' in docElement.style ),
            isNewerWebkit = isWebkit && 'async' in doc.createElement('script');

            while (
                div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
                all[0]
            );

            return {
                isGecko: isGecko,
                isGeckoLTE18: isGeckoLTE18,
                isGeckoGT18: isGecko && ! isGeckoLTE18,
                isOpera: isOpera,
                isWebkit: isWebkit,
                isNewerWebkit: isWebkit && 'async' in doc.createElement('script'),
                isIE: ( v > 4 ),
                ieVersion: ( v > 4 ? v : undef )
            };
    }());
}(window, document));

これは、機能によってブラウザを区別します。

問題だけですが、私は現在、SafariとChrome（両方のWebkitブラウザー））、およびGecko、WebkitのバージョンとOperaブラウザ自体。

完璧ではありませんが、navigator.userAgent。

1
GeReV

ブラウザのテスト はjQuery 1.3に置き換えられました。

率直に言って、Web開発者が自分のサイトがどのブラウザーで実行されているかを懸念する頻度に驚いています。10年以上のWeb開発で、私が気にせずに、何か違うことをすることに煩わされた少数のケースを考えることができます。最も一般的な理由は、名前付きフォントサイズがFirefoxとIE（font-size: largeはIE FFよりも）大きいので、IEfix.cssファイルを使用して修正しています。

たぶん、あなたは 何がより良いのか：CSSハックまたはブラウザ検出 を見て、このトピックに関するより完全な議論をするべきです。

その長所と短所は、機能がサポートされているかどうかではなく、サポートされているブラウザかどうかに注意する必要があることです。

IEである場合、なぜ気にかけているのかを知らずに、これ以上何も言うことは困難です。おそらく、自分がしていることを行うためのはるかに優れた解決策があることがわかるからです。

1
cletus
var browser = {
        chrome: false,
        mozilla: false,
        opera: false,
        msie: false,
        safari: false
    };
    var sBrowser, 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);
0
user989952

Cssのbodyタグにクラスとしてブラウザを追加するのが良いでしょう。私はWindowsを実行せず、powerPCを持っているのでこれが機能するかどうかはわかりませんが、すべてのインターネットエクスプローラー6〜9に.ie6のクラスを配置する必要がありますが、あまり役に立ちません。それ以外の場合は mooModernizr を使用します。

if (Browser.Engine.trident) {

    var IEbrowser = $('body');

    IEbrowser.addClass('ie');

}​
0
Montana Flynn