JavaScript はブラウザの種類とバージョンを決定します

世界にはブラウザが何種類あるか知っていますか? IE、Firefox、Opera、Safari の 4 つのよく知られたブラウザに加えて、世界には 100 近くのブラウザが存在します。

ブラウザの互換性は、フロントエンド開発フレームワークによって解決される最初の問題です。互換性の問題を解決するには、まずブラウザの種類とそのバージョンを正確に判断する必要があります。

JavaScript はフロントエンド開発の主な言語です。JavaScript プログラムを作成することでブラウザの種類とバージョンを決定できます。 JavaScript がブラウザの種類を判断するには、一般に 2 つの方法があります。1 つはさまざまなブラウザの固有の属性に基づくもので、もう 1 つはブラウザの userAgent 属性を分析することで判断されます。多くの場合、ブラウザの種類を値によって決定した後、互換性の問題を処理するためにブラウザのバージョンを決定する必要があります。ブラウザのバージョンは、通常、ブラウザの userAgent を分析することによってのみ知ることができます。

まず、さまざまなブラウザとその userAgent の特性を分析しましょう。

IE

ActiveX コントロールの作成をサポートしているのは IE のみであるため、他のブラウザーにはない ActiveXObject 関数があります。 window オブジェクトに ActiveXObject 関数が存在することが確認できれば、現在のブラウザが IE であることが明確に判断できます。 IE の各バージョンの一般的な userAgent は次のとおりです。

Mozilla/4.0 (互換性; MSIE 8.0; Windows NT 6.0)
Mozilla/4.0 (互換性; MSIE 7.0; Windows NT 5.2)
Mozilla/4.0 (互換性; MSIE 6.0) ; Windows NT 5.1)
Mozilla/4.0 (互換性; MSIE 5.0; Windows NT)

このうち、バージョン番号は MSIE の後の番号です。

Firefox

Firefox の DOM 要素には getBoxObjectFor 関数があり、DOM 要素の位置とサイズを取得するために使用されます (IE の対応する関数は getBoundingClientRect 関数です)。これを判断することで、現在のブラウザが Firefox であることがわかります。 Firefox のいくつかのバージョンの userAgent はおおよそ次のとおりです:

Mozilla/5.0 (Windows; U; Windows NT 5.2) Gecko/2008070208 Firefox/3.0.1
Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070309 Firefox/2.0 .0.3
Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070803 Firefox/1.5.0.12
ここで、バージョン番号は Firefox の後の番号です。

Opera

Opera は、特別なブラウザ フラグ、つまり window.opera 属性を提供します。 Opera の典型的な userAgent は次のとおりです:

Opera/9.27 (Windows NT 5.2; U; zh-cn)
Opera/8.0 (Macintosh; PPC Mac OS X; U; en)
Mozilla/5.0 (Macintosh; PPC Mac OS X) ; U; en) Opera 8.0

その中でもバージョン番号はOperaに近い番号です。

Safari

Safariブラウザには他のブラウザにはないopenDatabase機能があり、これがSafariを判断する指標となります。 Safari の一般的な userAgent は次のとおりです:

Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML、Gecko など) バージョン/3.1 Safari/525.13
Mozilla/5.0 (iPhone; U; CPU) Mac OS X など）AppleWebKit/420.1 (KHTML、Gecko など) Version/3.0 Mobile/4A93 Safari/419.3

バージョン番号は Version の後の番号です。

Chrome

ChromeにはMessageEvent機能がありますが、Firefoxにもあります。ただし、幸いなことに、Chrome には Firefox の getBoxObjectFor 関数がありません。この条件に従って、Chrome ブラウザーを正確に判断できます。現在、Chrome の userAgent は

Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

このうち、バージョン番号は後の数字のみですクロム。

興味深いことに、Chrome の userAgent には、おそらく、Chrome がすべての Apple ブラウザ アプリケーションを実行するための基礎となる Safari 機能も含まれています。

上記の情報を理解していれば、これらの特性に基づいてブラウザの種類とそのバージョンを判断できます。判定結果はSys名前空間に保存され、今後のプログラムが読み込むフロントエンドフレームワークの基本フラグ情報となります。ブラウザが決定されると、Sys 名前空間はブラウザ名の属性を持ち、その値はブラウザのバージョン番号になります。たとえば、IE 7.0 が決定された場合、Sys.ie の値は 7.0 になり、Firefox 3.0 が決定された場合、Sys.firefox の値は 3.0 になります。以下はブラウザを決定するコードです:

var Sys = {};

var ua = navigator.userAgent.toLowerCase();

if (window.ActiveXObject)

Sys.ie = ua.match (/ msie ([d.]+)/)[1]

else if (document.getBoxObjectFor)

Sys.firefox = ua.match(/firefox/([d.]+)/)[1]

else if (window.MessageEvent && !document.getBoxObjectFor)

Sys.chrome = ua.match(/chrome/([d.]+)/)[1]

else if (window.opera)

Sys .opera = ua.match(/opera.([d.]+)/)[1]

else if (window.openDatabase)

Sys.safari = ua.match(/version/([d.]+ )/ )[1];

//以下のテスト

if(Sys.ie) document.write('IE: '+Sys.ie);

if(Sys.firefox) document.write(' Firefox : '+Sys.firefox);

if(Sys.chrome) document.write('Chrome: '+Sys.chrome);

if(Sys.opera) document.write('Opera: '+Sys.オペラ );

if(Sys.safari) document.write('Safari: '+Sys.safari);

IE のユーザー数が最も多く、次に Firefox であるため、IE を最初に判断しました。ユーザー数の多い順にブラウザの種類を決定することで、判断の効率が向上し、無駄な労力を削減できます。 Chrome が 3 位にランクされているのは、Chrome がまもなく市場シェアで 3 番目のブラウザになると予測しているためです。このうち、ブラウザのバージョンを解析する際には、正規表現を利用してバージョン情報を抽出します。

JavaScript が得意な場合は、前の判定コードを次のように記述することもできます:

var Sys = {};

var ua = navigator.userAgent.toLowerCase();

window.ActiveXObject ? Sys .ie = ua.match(/msie ([d.]+)/)[1] :

document.getBoxObjectFor ? Sys.firefox = ua.match(/firefox/([d.]+)/) [1] ] :

window.MessageEvent && !document.getBoxObjectFor ? Sys.chrome = ua.match(/chrome/([d.]+)/)[1] :

window.opera = ua .match (/opera.([d.]+)/)[1] :

window.openDatabase ? Sys.safari = ua.match(/version/([d.]+)/)[1] : 0 ;

//以下のテスト

if(Sys.ie) document.write('IE: '+Sys.ie);

if(Sys.firefox) document.write('Firefox: '+Sys .firefox) ;

if(Sys.chrome) document.write('Chrome: '+Sys.chrome);

if(Sys.opera) document.write('Opera: '+Sys.opera);

if(Sys .safari) document.write('Safari: '+Sys.safari);

これにより、JavaScript コードをより合理化できます。もちろん、効率を重視するか保守性を重視するかによって、可読性は若干悪くなります。

さまざまな特性を使用してブラウザを決定する方法は、正規表現を使用して userAgent を分析するよりも高速ですが、これらの特性はブラウザのバージョンによって異なる可能性があります。例えば、あるブラウザの独自機能が市場で成功すると、他のブラウザも追随してその機能を追加し、そのブラウザの独自機能が消滅し、当社の判断が失敗する可能性があります。したがって、比較的安全なアプローチは、userAgent の特性を解析してブラウザの種類を判断することです。さらに、バージョン情報を判断するには、とにかくブラウザの userAgent を解析する必要があります。

さまざまなブラウザの userAgent 情報を分析することで、さまざまなブラウザとそのバージョンを区別する正規表現を見つけることは難しくありません。さらに、ブラウザの種類とバージョンの判断を完全に統合できます。したがって、次のコードを書くことができます:

var Sys = {};

var ua = navigator.userAgent.toLowerCase();

var s;

(s = ua.match(/msie ( [ d.]+)/)) ? Sys.ie = s[1] :

(s = ua.match(/firefox/([d.]+)/)) ? Sys.firefox = s[1] :

(s = ua.match(/chrome/([d.]+)/)) ? Sys.chrome = s[1] :

(s = ua.match(/opera.([d.] +) )/)) ? Sys.opera = s[1] :

(s = ua.match(/version/([d.]+).*safari/)) ? Sys.safari = s[1] : 0 ;

//以下のテスト

if (Sys.ie) document.write('IE: ' + Sys.ie);

if (Sys.firefox) document.write('Firefox: ' + Sys. firefox);

if (Sys.chrome) document.write('Chrome: ' + Sys.chrome);

if (Sys.opera) document.write('Opera: ' + Sys.opera);

if (Sys.safari) document.write('Safari: ' + Sys.safari);

このうち、「... ? ... : ...」などの判定表現は、処理を効率化するために使用されます。コード。判定条件は代入文であり、正規表現のマッチングを完了して結果をコピーするだけでなく、そのまま条件判定としても機能します。後続のバージョン情報は、以前の照合結果から抽出するだけで済みます。これは非常に効率的なコードです。

上記のコードはすべてフロントエンド フレームワークを構築するための事前調査であり、5 つの主要なブラウザーでテストされています。今後は、特定のブラウザを判断するには if(Sys.ie) または if(Sys.firefox) を使用するだけで済み、if(Sys.ie == '8.0') または if(Sys.ie) を使用するだけで済みます。 firefox == '3.0') やその他の形式は、依然として非常にエレガントに表現できます。