Webサイトのフロントエンドの開発では、ブラウザの互換性の問題はすでに急いでいます。ブラウザの互換性は、フロントエンド開発フレームワークを解決する必要がある最初の問題です。互換性の問題を解決するには、まずブラウザのタイプとバージョンを正確に決定する必要があります。
JavaScriptは、フロントエンド開発の主要言語です。 JavaScriptプログラムを作成することにより、ブラウザのタイプとバージョンを判断できます。一般に、JavaScriptでブラウザタイプを判断する2つの方法があります。 1つは、さまざまなブラウザの一意の属性に基づいてそれらを区別することであり、もう1つはブラウザのユーザーエージェント属性を分析して判断することです。多くの場合、値がブラウザタイプを決定した後、互換性の問題を処理するためにブラウザバージョンを判断する必要があります。ブラウザのバージョンは、一般にブラウザのユーザーエージェントを分析することで既知できます。
まず、さまざまなブラウザとそのユーザーエージェントの特性を分析しましょう。
すなわち
IEのみがActiveXコントロールの作成をサポートしているため、他のブラウザにはないものがあります。これはActiveXObject関数です。ウィンドウオブジェクトにActiveXObject関数があると判断している限り、現在のブラウザがIEであることを明確に判断できます。 IEの各バージョンの典型的なユーザーエージェントは次のとおりです。
Mozilla/4.0（互換性、MSIE8.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（互換性、MSIE5.0; WindowsNT）
その中で、バージョン番号はMSIEの後の番号です。
Firefox
FirefoxのDOM要素には、getBoxObjectfor関数があり、DOM要素の位置とサイズ（IEに対応するGetBoundingClientRect関数）を取得するために使用されます。これはFirefoxに固有のものです。現在のブラウザはFirefoxであることがわかります。 Firefoxのいくつかのバージョンの使用者は、ほぼ次のとおりです。
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/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
その中で、バージョン番号はオペラに近い番号です。
サファリ
Safariブラウザには、他のブラウザにはないOpendatabase関数があり、Safariを判断するためのフラグとして使用できます。 Safariの典型的なユーザーエージェントは次のとおりです。
Mozilla/5.0（Windows; U; Windows NT 5.2）AppleWebkit/525.13（Khtml、Yike Gecko）バージョン/3.1 Safari/525.13
Mozilla/5.0（iPhone; U; CPU Like Mac OS X）AppleWebkit/420.1（KHTML、YOMECKO）バージョン/3.0 Mobile/4A93 Safari/419.3
そのバージョン番号は、バージョン後の番号です。
クロム
ChromeにはMessageEvent関数がありますが、Firefoxもそれを持っています。幸いなことに、ChromeにはFirefoxのgetboxObjectfor機能がなく、この状態に基づいて正確に判断できます。現在、Chromeのユーザーエージェントは次のとおりです。
Mozilla/5.0（Windows; U; Windows NT 5.2）AppleWebkit/525.13（KHTML、Geckoのような）Chrome/0.2.149.27 Safari/525.13
その中で、バージョン番号はChromeの後にのみです。
興味深いことに、ChromeのユーザーエージェントにはSafariの特性も含まれています。これは、ChromeがすべてのAppleブラウザアプリケーションを実行する基礎です。
上記の情報を理解している限り、これらの特性をブラウザの種類とそのバージョンに基づいてベースにすることができます。 SYS名のスペースに判断結果を保存し、将来のプログラムを読むためのフロントエンドフレームワークの基本的なロゴ情報になります。ブラウザを決定すると、SYS名前空間にはブラウザ名の属性があり、その値はブラウザのバージョン番号です。たとえば、IE 7.0が決定された場合、sys.ieの値は7.0です。 Firefox 3.0が決定された場合、sys.firefoxの値は3.0です。ブラウザを決定するコードは次のとおりです。
[ctrl+a Select All注：外部JSを導入する必要がある場合は、実行するには更新する必要があります]
IEにはほとんどのユーザーがあり、Firefoxが続くため、最初にIEに判断を下しました。ユーザーの順にブラウザタイプを判断すると、判断効率を向上させ、役に立たない作業を行うことができます。 Chromeが3位に配置される理由は、Chromeが間もなく市場シェアを持つ3番目のブラウザになると予測するためです。その中で、ブラウザバージョンを分析するときに、バージョン情報を分析するために正規表現が使用されます。
JavaScriptが非常に優れている場合は、以前の判断コードを次のように記述することもできます。
[ctrl+a Select All注：外部JSを導入する必要がある場合は、実行するには更新する必要があります]
これにより、JavaScriptコードがより合理化される可能性があります。もちろん、読みやすさは少し悪いことです。それは、効率性と保守性を評価するかどうかによって異なります。
さまざまな機能を使用してブラウザを判断する方法は、正規表現を使用してユーザーエージェントを分析するよりも高速ですが、これらの機能はブラウザバージョンによって異なる場合があります。たとえば、ブラウザの元々のユニークな機能が市場で成功した場合、他のブラウザもこの機能を追加する可能性があるため、ブラウザのユニークな機能が消え、判断が失敗します。したがって、比較的安全なアプローチは、ユーザーエージェントの機能を分析することにより、ブラウザタイプを判断することです。さらに、バージョン情報を判断するには、ブラウザのユーザーエージェントを解析する必要があります。
さまざまなブラウザのユーザーエイジェント情報を分析することにより、さまざまなブラウザとそのバージョンを区別する正規表現を取得することは難しくありません。さらに、ブラウザのタイプとバージョンの判断は、1つで行うことができます。したがって、次のコードを書くことができます。
[ctrl+a Select All注：外部JSを導入する必要がある場合は、実行するには更新する必要があります]
その中で、「...？...：...」のような判断表現は、コードを簡素化するために使用されます。判断条件は、正規表現のマッチングと結果のコピーを完了するだけでなく、条件付き判断を直接使用する課題声明です。後続のバージョン情報は、非常に効率的なコードである以前のマッチング結果から抽出する必要があります。
上記のコードはすべて、フロントエンドフレームワークを作成するための事前検索であり、5つの主要なブラウザーでテストおよび渡されます。将来的には、特定のブラウザをif（sys.ie）またはif（sys.firefox）の形式で判断するだけで、if（sys.ie == '8.0'）またはif（sys.firefox == '3.0'）の形式でブラウザバージョンを判断する必要があります。
フロントエンドフレームワークプロジェクトが開始されましたが、すべてがプロセスと結果に依存します...
wulin.comの編集者は、あなたのためにいくつかのコードを整理しました。
コードコピーは次のとおりです。
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'）;
アラート（browser.issafari？ 'safari'： 'not safari'）;
alert（browser.isopera？ 'opera'： 'opera'）;
}
window.onload = check;
コードコピーは次のとおりです。
関数isbrowser（）{
var sys = {};
var ua = navigator.useragent.tolowercase（）;
var s;
（s = ua.match（/msie（[/d.]+）/）)?sys.ie=s」：
（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（ '// www.vevb.com'+sys.ie）;
if（sys.ie == '9.0'）{// jsはIE 9として判断されます
} else if（sys.ie == '8.0'）{// jsはIE 8として判断されます
}それ以外{
}
}
if（sys.firefox）{// jsはFirefox（Firefox）ブラウザーとして判断されます
alert（ '// www.vevb.com'+sys.firefox）;
}
if（sys.chrome）{// jsはGoogle Chromeブラウザーとして判断されます
alert（ '// www.vevb.com'+sys.chrome）;
}
if（sys.opera）{// jsはオペラブラウザーとして判断されます
alert（ '// www.vevb.com'+sys.opera）;
}
if（sys.safari）{// JSはApple Safariブラウザーとして判断されます
alert（ '// www.vevb.com'+sys.safari）;
}
}
jqueryを介してブラウザのタイプとブラウザのバージョン番号を取得する関数メソッドを共有します。特定のjQueryコードは次のとおりです。
コードコピーは次のとおりです。
$（document）.ready（function（）{
varbrow = $。ブラウザ;
varbinfo = "";
if（brow.msie）{binfo = "microsoft internetexplorer"+brow.version;}
if（brow.mozilla）{binfo = "mozillafirefox"+brow.version;}
if（brow.safari）{binfo = "applesafari"+brow.version;}
if（brow.opera）{binfo = "opera"+brow.version;}
アラート（binfo）;
}）;
バージョン1.9から始めて、jQueryは$ .browserと$ .browser.versionを削除し、$ .supportメソッドに置き換えました。 $ .supportを理解する必要がある場合は、次を参照してください。
jQuery 1.9 $ .browserメソッドの代わりに$ .supportを使用します