数日前、Google が発売した Chrome ブラウザ ファミリーに星の王子さまが誕生しました。クロムは名家に生まれたため、まだ幼いながらも誰も彼を軽蔑する者はいなかった。これからは、ブラウザの「4 つの才能」を「5 つの黄金の花」に改名する必要があるとよく言われます。
Webサイトのフロントエンド開発では、ブラウザの互換性の問題ですでに大慌てですが、Chromeの誕生でさらに苦労することになります。ブラウザの互換性は、フロントエンド開発フレームワークによって解決される最初の問題です。互換性の問題を解決するには、まずブラウザの種類とバージョンを正確に判断する必要があります。
JavaScript はフロントエンド開発の主な言語です。JavaScript プログラムを作成することでブラウザの種類とバージョンを決定できます。 JavaScript がブラウザの種類を判断するには、一般に 2 つの方法があります。1 つはさまざまなブラウザの固有の属性に基づくもので、もう 1 つはブラウザの userAgent 属性を分析することで判断されます。多くの場合、ブラウザの種類を値で決定した後、互換性の問題を処理するためにブラウザのバージョンを決定する必要があります。ブラウザのバージョンは、通常、ブラウザの userAgent を分析することによってのみ知ることができます。
まず、さまざまなブラウザとその userAgent の特性を分析しましょう。
IE
ActiveX コントロールの作成をサポートしているのは IE だけなので、他のブラウザにはない ActiveXObject 関数があります。 window オブジェクトに ActiveXObject 関数が存在することが確認できれば、現在のブラウザが IE であることが明確に判断できます。 IE の各バージョンの一般的な userAgent は次のとおりです:
<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 が 3 位にランクされているのは、Chrome がまもなく市場シェアで 3 番目のブラウザになると予測しているためです。このうち、ブラウザのバージョンを解析する際には、正規表現を利用してバージョン情報を抽出します。
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.ie) または if(Sys.firefox) を使用するだけで済み、if(Sys.ie == '8.0') または if(Sys.ie) を使用するだけで済みます。 firefox == '3.0') やその他の形式は、依然として非常にエレガントに表現できます。
フロントエンドフレームワークプロジェクトが始まりました、すべては過程と結果次第です...
原文: Li Zhan (leadzen) Ali Software 2008-9-6 杭州
誰もがもっと楽しめるように、Script House の編集者がいくつかの内容をまとめました:
<script language="JavaScript">
function getOs()
{
var OsObject = "";
if(navigator.userAgent.indexOf("MSIE")>0) {
return "MSIE"; //ie浏览器
}
if(isChrome=navigator.userAgent.indexOf("Chrome")>0){
return "chrome"; //Chrome浏览器
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
return "Firefox"; //Firefox浏览器
}
if(isOpera=navigator.userAgent.indexOf("Opera")>0) {
return "Opera"; //Opera浏览器
}
if(isSafari=navigator.userAgent.indexOf("Safari")>0) {
return "Safari"; //Safari浏览器
}
if(isCamino=navigator.userAgent.indexOf("Camino")>0){
return "Camino"; //Camino浏览器
//……增加一些其它代码……
}
if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){
return "Gecko";
}
}
alert(navigator.userAgent);
alert("您的浏览器类型为:"+getOs());
</script>比較的完全な判定コード
<script type="text/javascript">
document.write('浏览器判別：');
var OsObject=navigator.userAgent;
// 包含「Opera」文字列
if(OsObject.indexOf("Opera") != -1)
{
document.write('您的浏览器是Opera吧？');
}
// 包含「MSIE」文字列
else if(OsObject.indexOf("MSIE") != -1)
{
document.write('您的浏览器是Internet Explorer吧？');
}
// 包含「chrome」文字列 ，不过360浏览器也照抄chrome的UA
else if(OsObject.indexOf("Chrome") != -1)
{
document.write('您的浏览器是chrome或360浏览器吧？');
}
// 包含「UCBrowser」文字列
else if(OsObject.indexOf("UCBrowser") != -1)
{
document.write('您的浏览器是UCBrowser吧？');
}
// 包含「BIDUBrowser」文字列
else if(OsObject.indexOf("BIDUBrowser") != -1)
{
document.write('您的浏览器是百度浏览器吧？');
}
// 包含「Firefox」文字列
else if(OsObject.indexOf("Firefox") != -1)
{
document.write('您的浏览器是Firefox吧？');
}
// 包含「Netscape」文字列
else if(OsObject.indexOf("Netscape") != -1)
{
document.write('您的浏览器是Netscape吧？');
}
// 包含「Safari」文字列
else if(OsObject.indexOf("Safari") != -1)
{
document.write('您的浏览器是Safari 吧？');
}
else{
document.write('无法识别的浏览器。');
}
</script> 
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
