ホームページ > 記事 > ウェブフロントエンド > jQuery を使用して、ブラウザと version_jquery を検出するスクリプト コードを実装します。
Javascript を使用してブラウザを検出する方法はよくある質問のようです。私の経験によれば、JavaScript を使用してブラウザを検出することは、2 つの主要なカテゴリの方法を使用することに他なりません。
1 つは、ブラウザの機能属性を使用することです。たとえば、ブラウザが getElementById メソッドをサポートしているかどうかを検出するには、
if (document.getElementById) {
// メソッドが存在するので、ここで使用します
} else {
// do something else
}
この種の検出では、ユーザーがどのブラウザを使用しているかを知ることはできませんが、開発者が独自のコードがブラウザの機能と互換性があるかどうかを判断できるテストには耐えられます。ブラウザーが実際に何を行うかに関心があり、その実際の ID は気にしない場合は、このアプローチを使用できます。
2 番目は、従来のユーザー エージェント文字列を使用する方法です。これは、最も古く、最も一般的な検出方法と考えられます。技術的に言えば、ユーザーはユーザー エージェントを変更できますが、それを使用するといくつかの有益な情報が得られます。
これは少し話が逸れるかもしれません。 jQuery を使用したことのある友人は、jQuery 独自のブラウザ メソッドを使用すると、ユーザーが使用しているブラウザ、さらにはバージョンを正確に判断できることを知っています。優れた開発ライブラリのユーザーは、その実装メカニズムの一部を理解したいと考えています。では、jQuery はどのようにこれを行うのでしょうか?
jQuery の最新のソースコード (バージョン 1.2.2) の 1195 行目から 1205 行目までは、ブラウザを決定する機能です。ご覧のとおり、jQuery は上記の 2 番目の方法を使用します。これは、ユーザー エージェントを使用してユーザーのブラウザとバージョンを決定することです。
正直に言うと、最初はたった 5 行のコードでブラウザの種類とバージョンを特定できることに非常に驚きました。 『Advanced Programming with Javascript』という本では、著者は別の章を使って Javascript を使用してブラウザとオペレーティング システムを決定する方法を説明しています。しかし、そのコードを読んで(実際には難しくありません)、突然悟ったような気分になりました。早速、コードを投稿してみましょう。
var userAgent = navigator.userAgent.toLowerCase();
// 使用されているブラウザを確認します
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)&& !/(compatibility|webkit)/.test(userAgent)
};
この時点で、経験豊富な Javascript 開発者はすでにその秘密を知っています。はい、jQuery は正規表現を使用してブラウザの種類とバージョンを判断します。とても綺麗に仕上がりました!
まず、ユーザーエージェントを小文字に統一し、次に通常のルールを使用して徐々にどのブラウザーであるかを照合します。正則化についてはこちらをご覧ください。しかし、この判断が正しいかどうか疑問に思う人もいるだろう。そこで、まず次の 4 つの主流ブラウザのユーザー エージェントを見てみましょう:
Safari (Windows エディション)
... AppleWebKit/523.12.9 (Gecko のような KHTML) バージョン/ 3.0 Safari/523.12.9
Opera(Windows XP では Opera 9.2)
Opera/9.24 (Windows NT 5.1; U; zh-cn)
Mozilla(Firefox) Windows XP では 2.0 .11)
... Windows NT 5.1; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11
Internet Explorer (Windows では 7.0) XP )
Mozilla/4.0 (互換性、MSIE 6.0、Windows NT 5.1)
jQuery は、各ブラウザの異なるユーザー エージェント特性を判断材料として非常に巧妙に使用します。たとえば、Safari の「/webkit/」は排他的であり、「/opera/」も Opera ブラウザーのみに固有です。この検証方法は現在主流のブラウザで利用可能であり、基本的には正確に判定できます。
ここでやめましょう。jQuery は確かに最高の JavaScript 開発フレームワークの 1 つです。これをマスターすれば、実際に自分自身の開発に大きな楽しみを加えることができます。 jQuery フレームワークを 1 つずつ読んだ経験を今後も投稿していきますので、ご注目ください。