ブラウザの種類とバージョンを判断するための js コード (複数のサンプルコード付き)_javascript スキル

Web サイトのフロントエンド開発では、ブラウザの互換性の問題がすでに私たちを焦らせていますが、Chrome の誕生によりさらに多くの問題が発生することになります。ブラウザの互換性は、フロントエンド開発フレームワークによって解決される最初の問題です。互換性の問題を解決するには、まずブラウザの種類とバージョンを正確に判断する必要があります。

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

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

IE

IE だけが ActiveX コントロールの作成をサポートしているため、他のブラウザにはない 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 は特別なブラウザ フラグ、つまり 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) オペラ 8.0

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

サファリ

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; Mac OS X のような CPU) AppleWebKit/420.1 (KHTML、Gecko など) バージョン/3.0 モバイル/4A93 Safari/419.3

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

クロム

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

Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML、Gecko など) Chrome/0.2.149.27 Safari/525.13

このうち、バージョン番号はChrome以降の番号のみです。

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

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

[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、

を実行するために更新する必要があります]

我们把对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; //以下进行测试 liehuo.net 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>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

这样可以使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; //以下进行测试 liehuo.net 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>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

其中，采用了“... ? ... : ...”这样的判断表达式来精简代码。判断条件是一条赋值语句，既完成正则表达式的匹配及结果复制，又直接作为条件判断。而随后的版本信息只需从前面的匹配结果中提取即可，这是非常高效的代码。

以上的代码都是为了打造前端框架所做的预研，并在五大浏览器上测试通过。今后，判断某种浏览器只需用if(Sys.ie)或if(Sys.firefox)等形式，而判断浏览器版本只需用if(Sys.ie == '8.0')或if(Sys.firefox == '3.0')等形式，表达起来还是非常优雅的。

前端框架项目已经启动，一切就看过程和结果了...

脚本之家小编又为大家整理了几个代码：

复制代码 代码如下:

var Browser=new Object();
Browser.isMozilla=(typeof document.implementation!='undefined')&&(typeof document.implementation.createDocument!='undefined')&&(typeof HTMLDocument!='undefined');
Browser.isIE=window.ActiveXObject ? true : false;
Browser.isFirefox=(navigator.userAgent.toLowerCase().indexOf("firefox")!=-1);
Browser.isSafari=(navigator.userAgent.toLowerCase().indexOf("safari")!=-1);
Browser.isOpera=(navigator.userAgent.toLowerCase().indexOf("opera")!=-1);
function check(){
 alert(Browser.isIE?'ie':'not ie');
 alert(Browser.isFirefox?'Firefox':'not Firefox');
 alert(Browser.isSafari?'Safari':'not Safari');
 alert(Browser.isOpera?'Opera':'not Opera');
}
window.onload=check;

复制代码 代码如下:

function isBrowser(){
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){//Js が IE ブラウザであると判断します
alert('http://www.jb51.net' Sys.ie);
if(Sys . ie=='9.0'){//Js は IE 9
と判断されます }else if(Sys.ie=='8.0'){//Js は IE 8
}else{
}
}
if(Sys.firefox){//Js が Firefox ブラウザであると判断します
alert('http://www.jb51.net' Sys.firefox);
}
if(Sys.chrome){//Js は Google Chrome ブラウザであると判断します
alert('http://www.jb51.net' Sys.chrome);
}
if( Sys. opera){//Js の判断は Opera ブラウザ
alert('http://www.jb51.net' Sys.opera);
}
if(Sys.safari){//Js判定 Apple safari ブラウザの場合
alert('http://www.jb51.net' Sys.safari);
}
}

jquery を通じてブラウザの種類とブラウザのバージョン番号を取得する関数メソッドを共有します。具体的な jquery コードは次のとおりです:

コードをコピー コードは次のとおりです。

$(document).ready(function( ){
varbrow=$.browser;
varbInfo="";
if(brow.msie){bInfo="MicrosoftInternetExplorer" brow.version;}
if(brow.mozilla){bInfo ="MozillaFirefox " brow.version;}
if(brow.safari){bInfo="AppleSafari" brow.version;}
if(brow.opera){bInfo="Opera" braw.version;}
アラート (bInfo);
});

jQuery バージョン 1.9 以降、$.browser と $.browser.version は削除され、$.support メソッドに置き換えられました。$.support について知りたい場合は、以下を参照してください。

jQuery 1.9 は $.browser メソッドの代わりに $.support を使用します