JavaScriptはブラウザのタイプとバージョンを判断します.
7552 ワード
世界にはいくつのブラウザがあるか知っていますか?私たちがよく知っているIE、Firefox、Opera、Safariの四大ブラウザ以外に、世界には百種類近くのブラウザがあります.
数日前、ブラウザの家族に、Googleが作ったChromeブラウザが誕生したばかりです.Chromeは名門の生まれだから、彼はまだ小さいやつだが、彼をばかにする人はいない.これから、ブラウザの「四大才子」は「五輪の金花」に変えるとよく言われます.
ウェブサイトの先头の开発の中で、ブラウザの互換性の問題はもともとすでに私達を慌てさせて、Chromeの出世はまた私達にどれだけの混乱を加えますかを知りません.ブラウザの互換性は、フロントエンドの開発フレームが解決する最初の問題です.互換性の問題を解決するには、まずブラウザのタイプとバージョンを正確に判断しなければなりません.
JavaScriptは先端に開発された主要言語であり、JavaScriptプログラムを作成することによってブラウザの種類とバージョンを判断することができます.JavaScriptはブラウザのタイプを判断するには、一般的に2つの方法があります.一つは各種ブラウザの独自の属性によって識別し、もう一つはブラウザのuserAgent属性を分析することによって判断します.多くの場合、値がブラウザのタイプを判断した後、ブラウザのバージョンが互換性の問題を扱うことができると判断する必要がありますが、ブラウザのバージョンは一般的にブラウザのuserAgentを分析することによってのみ知ることができます.
まず、各種ブラウザの特徴とuserAgentを分析します.
IE
IEだけがActiveXコントロールの作成をサポートしていますので、他のブラウザにないものがあります.ActiveXObject関数です.windowオブジェクトにActiveXObject関数があると判断すれば、現在のブラウザはIEであると明確に判断できる.IEの各バージョンの典型的なuserAgentは以下の通りである.
Mozilla/4.0(comptible;MSIE 8.0;Windows NT 6.0)
Mozilla/4.0(comptible;MSIE 7.0;Windows NT 5.2)
Mozilla/4.0(comptible;MSIE 6.0;Windows NT 5.1)
Mozilla/4.0(comptible;MSIE 5.0;Windows NT)
なお、バージョン番号はMSIEの後の数字である.
Firefox
FirefoxのDOM要素には、DOM要素の位置と大きさを取得するためのget BoxObjectFor関数があります.これはFirefoxならではのもので、現在のブラウザが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.3
Mozilla/5.0(Windows;U;Windows NT 5.1)Gecko/20070803 Firefox/1.5.02
なお、バージョン番号は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は以下の通りです.
Mozila/5.0(Windows;U;Windows NT 5.2)Apple WebKit/525.13(KHTML、like Gecko)Version/3.1 Safari/525.13
Mozila/5.0(iPhone;U;CPU like Mac OS X)Apple WebKit/420.1(KHTML、like Gecko)Verssion/3.0 Mobile/4 A 93 Safari/419.3
バージョン番号はVersion以降の数字です.
Chrome
ChromeにはMessage Event関数がありますが、Firefoxもあります.しかし、ChromeにはFirefoxのget BoxObjectFor関数がないだけましで、この条件からChromeブラウザーを正確に判断することができます.現在、ChromeのuserAgentは:
Mozila/5.0(Windows;U;Windows NT 5.2)Apple WebKit/525.13(KHTML、like Gecko)Chrome/0.2149.27 Safari/525.13
なお、バージョン番号はChromeの後だけの数字である.
面白いことに、ChromeのuserAgentはSafariの特徴も含まれています.これはChromeがすべてのアプリを実行できる基礎かもしれません.
以上の情報を理解すれば、ブラウザのタイプとバージョンを判断することができます.判断の結果をSys名前空間に保存し、フロントエンドフレームの基本的なフラグ情報として、今後のプログラムを読み込むようにします.ブラウザの種類を判断すると、Sys名前空間にはブラウザ名の属性があり、その値はブラウザのバージョン番号である.例えば、IE 7.0が判断されると、Sys.ieの値は7.0である.Firefox 3.0が判断されると、Sys.firefoxの値は3.0である.以下は判定ブラウザのコードです.
JavaScriptが高いと、前の判定コードをこう書くこともできます.
異なる特徴を使ってブラウザを判断する方法は、正規表現でuserAgentを分析するよりも速いが、これらの特徴はブラウザバージョンによって変わるかもしれない.例えば、あるブラウザが本来持っている特性は市場上の成功を収めています.他のブラウザもこの特性を加えることによって、このブラウザの独自の特徴が消えてしまい、私たちの判断が失敗しました.そのため、比較的安全な方法は、ブラウザのタイプを、userAgentの特徴を解析して判断することです.まして、とにかくバージョン情報を判断するには、ブラウザのuserAgentを解析する必要があります.
各種ブラウザのuserAgent情報を分析することによって、各ブラウザとそのバージョンを識別する正規表現がなかなか出てこないです.また、ブラウザタイプの判断とバージョンの判断は完全に合体して行うことができます.そこで、私達は下記のコードを書くことができます.
以上のコードは先端フレームを作るための予備研究であり、5つのブラウザでテストに合格しました.今後は、ブラウザバージョンはif(Sys.firefox)やif(Sys.firefox)などの形だけで判断され、ブラウザバージョンはif(Sys.ie='8.0')やif(Sys.firefox='3.0')などの形だけで表現されても非常に優雅であると判断されます.
フロントフレームのプロジェクトが開始されました.すべてはプロセスと結果を見ます.
オリジナル:李戦(leadzen)アリソフト2008-9-6杭州
原文:
http://www.cnblogs.com/leadzen/archive/2008/09/06/1285764.html
数日前、ブラウザの家族に、Googleが作ったChromeブラウザが誕生したばかりです.Chromeは名門の生まれだから、彼はまだ小さいやつだが、彼をばかにする人はいない.これから、ブラウザの「四大才子」は「五輪の金花」に変えるとよく言われます.
ウェブサイトの先头の开発の中で、ブラウザの互換性の問題はもともとすでに私達を慌てさせて、Chromeの出世はまた私達にどれだけの混乱を加えますかを知りません.ブラウザの互換性は、フロントエンドの開発フレームが解決する最初の問題です.互換性の問題を解決するには、まずブラウザのタイプとバージョンを正確に判断しなければなりません.
JavaScriptは先端に開発された主要言語であり、JavaScriptプログラムを作成することによってブラウザの種類とバージョンを判断することができます.JavaScriptはブラウザのタイプを判断するには、一般的に2つの方法があります.一つは各種ブラウザの独自の属性によって識別し、もう一つはブラウザのuserAgent属性を分析することによって判断します.多くの場合、値がブラウザのタイプを判断した後、ブラウザのバージョンが互換性の問題を扱うことができると判断する必要がありますが、ブラウザのバージョンは一般的にブラウザのuserAgentを分析することによってのみ知ることができます.
まず、各種ブラウザの特徴とuserAgentを分析します.
IE
IEだけがActiveXコントロールの作成をサポートしていますので、他のブラウザにないものがあります.ActiveXObject関数です.windowオブジェクトにActiveXObject関数があると判断すれば、現在のブラウザはIEであると明確に判断できる.IEの各バージョンの典型的なuserAgentは以下の通りである.
Mozilla/4.0(comptible;MSIE 8.0;Windows NT 6.0)
Mozilla/4.0(comptible;MSIE 7.0;Windows NT 5.2)
Mozilla/4.0(comptible;MSIE 6.0;Windows NT 5.1)
Mozilla/4.0(comptible;MSIE 5.0;Windows NT)
なお、バージョン番号はMSIEの後の数字である.
Firefox
FirefoxのDOM要素には、DOM要素の位置と大きさを取得するためのget BoxObjectFor関数があります.これはFirefoxならではのもので、現在のブラウザが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.3
Mozilla/5.0(Windows;U;Windows NT 5.1)Gecko/20070803 Firefox/1.5.02
なお、バージョン番号は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は以下の通りです.
Mozila/5.0(Windows;U;Windows NT 5.2)Apple WebKit/525.13(KHTML、like Gecko)Version/3.1 Safari/525.13
Mozila/5.0(iPhone;U;CPU like Mac OS X)Apple WebKit/420.1(KHTML、like Gecko)Verssion/3.0 Mobile/4 A 93 Safari/419.3
バージョン番号はVersion以降の数字です.
Chrome
ChromeにはMessage Event関数がありますが、Firefoxもあります.しかし、ChromeにはFirefoxのget BoxObjectFor関数がないだけましで、この条件からChromeブラウザーを正確に判断することができます.現在、ChromeのuserAgentは:
Mozila/5.0(Windows;U;Windows NT 5.2)Apple WebKit/525.13(KHTML、like Gecko)Chrome/0.2149.27 Safari/525.13
なお、バージョン番号はChromeの後だけの数字である.
面白いことに、ChromeのuserAgentはSafariの特徴も含まれています.これはChromeがすべてのアプリを実行できる基礎かもしれません.
以上の情報を理解すれば、ブラウザのタイプとバージョンを判断することができます.判断の結果をSys名前空間に保存し、フロントエンドフレームの基本的なフラグ情報として、今後のプログラムを読み込むようにします.ブラウザの種類を判断すると、Sys名前空間にはブラウザ名の属性があり、その値はブラウザのバージョン番号である.例えば、IE 7.0が判断されると、Sys.ieの値は7.0である.Firefox 3.0が判断されると、Sys.firefoxの値は3.0である.以下は判定ブラウザのコードです.
<script type="text/javascript">
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.opera);
if(Sys.safari) document.write('Safari: '+Sys.safari);
</script>
IEに対する判断を第一にします.IEのユーザが一番多いからです.次にFirefoxを判断します.ブラウザのタイプを利用者のどれぐらいの順番で判断するかは、判定効率を高め、無駄を少なくすることができます.Chromeを第三の判断に置くのは、Chromeがすぐに市場シェア第三のブラウザになると予測しているからです.ここでは、ブラウザバージョンを分析する際に、正規表現を用いてバージョン情報を解析します.JavaScriptが高いと、前の判定コードをこう書くこともできます.
<script type="text/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 ? Sys.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);
</script>
これはJavaScriptコードをより簡単にすることができます.もちろん、可読性はちょっと悪いです.効率を重視するか、維持性を重視するかによって違います.異なる特徴を使ってブラウザを判断する方法は、正規表現でuserAgentを分析するよりも速いが、これらの特徴はブラウザバージョンによって変わるかもしれない.例えば、あるブラウザが本来持っている特性は市場上の成功を収めています.他のブラウザもこの特性を加えることによって、このブラウザの独自の特徴が消えてしまい、私たちの判断が失敗しました.そのため、比較的安全な方法は、ブラウザのタイプを、userAgentの特徴を解析して判断することです.まして、とにかくバージョン情報を判断するには、ブラウザのuserAgentを解析する必要があります.
各種ブラウザのuserAgent情報を分析することによって、各ブラウザとそのバージョンを識別する正規表現がなかなか出てこないです.また、ブラウザタイプの判断とバージョンの判断は完全に合体して行うことができます.そこで、私達は下記のコードを書くことができます.
<script type="text/javascript">
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);
</script>
この中で、コードを簡潔にするために「……」という判定式が採用されています.判定条件は、正規表現のマッチングと結果のコピーを行い、条件判定として直接に行います.その後のバージョン情報は、前のマッチング結果から抽出すればよく、非常に効率的なコードです.以上のコードは先端フレームを作るための予備研究であり、5つのブラウザでテストに合格しました.今後は、ブラウザバージョンはif(Sys.firefox)やif(Sys.firefox)などの形だけで判断され、ブラウザバージョンはif(Sys.ie='8.0')やif(Sys.firefox='3.0')などの形だけで表現されても非常に優雅であると判断されます.
フロントフレームのプロジェクトが開始されました.すべてはプロセスと結果を見ます.
オリジナル:李戦(leadzen)アリソフト2008-9-6杭州
原文:
http://www.cnblogs.com/leadzen/archive/2008/09/06/1285764.html