シンプルなユーザーがブラウザのバージョンを確認できるページを作成してから、特定の div を表示するブラウザとオペレーティング システムに応じて作成しています。次に、バージョンに基づいて、特定のクラスをタグに追加します。
ブラウザ、バージョン、およびオペレーティング システムを検出するこのコードを見つけました。コードは次のとおりです。
// Detect Browser and OS
var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
this.version = this.searchVersion(navigator.userAgent)
|| this.searchVersion(navigator.appVersion)
|| "an unknown version";
this.OS = this.searchString(this.dataOS) || "an unknown OS";
},
searchString: function (data) {
for (var i=0;i<data.length;i++) {
var dataString = data[i].string;
var dataProp = data[i].prop;
this.versionSearchString = data[i].versionSearch || data[i].identity;
if (dataString) {
if (dataString.indexOf(data[i].subString) != -1)
return data[i].identity;
}
else if (dataProp)
return data[i].identity;
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index == -1) return;
return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
},
dataBrowser: [
{
string: navigator.userAgent,
subString: "Chrome",
identity: "Chrome"
},
{ string: navigator.userAgent,
subString: "OmniWeb",
versionSearch: "OmniWeb/",
identity: "OmniWeb"
},
{
string: navigator.vendor,
subString: "Apple",
identity: "Safari",
versionSearch: "Version"
},
{
prop: window.opera,
identity: "Opera",
versionSearch: "Version"
},
{
string: navigator.vendor,
subString: "iCab",
identity: "iCab"
},
{
string: navigator.vendor,
subString: "KDE",
identity: "Konqueror"
},
{
string: navigator.userAgent,
subString: "Firefox",
identity: "Firefox"
},
{
string: navigator.vendor,
subString: "Camino",
identity: "Camino"
},
{ // for newer Netscapes (6+)
string: navigator.userAgent,
subString: "Netscape",
identity: "Netscape"
},
{
string: navigator.userAgent,
subString: "MSIE",
identity: "Explorer",
versionSearch: "MSIE"
},
{
string: navigator.userAgent,
subString: "Gecko",
identity: "Mozilla",
versionSearch: "rv"
},
{ // for older Netscapes (4-)
string: navigator.userAgent,
subString: "Mozilla",
identity: "Netscape",
versionSearch: "Mozilla"
}
],
dataOS : [
{
string: navigator.platform,
subString: "Win",
identity: "Windows"
},
{
string: navigator.platform,
subString: "Mac",
identity: "Mac"
},
{
string: navigator.userAgent,
subString: "iPhone",
identity: "iPhone/iPod/iPad"
},
{
string: navigator.platform,
subString: "Linux",
identity: "Linux"
}
]
};
BrowserDetect.init();
特定の div を表示するために JavaScript をどこから開始すればよいかわかりません。
私の考えでは、上記のコードが示す内容に基づいて、バージョン番号と DIV に基づいて赤または緑のボタンが表示されるということです。たとえば、ブラウザが Internet Explorer でバージョンが 8 の場合、赤いボタンと特定のオプションを含む div が表示されます。
コードのアイデア:
<div style="width:400px;" class="center">
<script type="text/javascript">
document.write('<p class="[insert either red or green based on version number]-button">You\'re using ' + BrowserDetect.browser + ' ' + BrowserDetect.version + ' on ' + BrowserDetect.OS + '</p>');
</script>
</div>
<!-- Show either Outdated DIV or Up to Date Div based on version number I specify. -->
<div id="outdated">
<!-- Content -->
</div>
<div id="up-to-date">
<!-- Content -->
</div>
<!-- Show if Windows -->
<div id="windows">
<!-- Content -->
</div>
<!-- Show if MAC -->
<div id="mac">
<!-- Content -->
</div>
<!-- Show if Linux -->
<div id="linux">
<!-- Content -->
</div>
<!-- Show if Unknown or Other -->
<div id="other">
<!-- Content -->
</div>
例
ユーザーがページにアクセスし、Windows で Firefox 10 を実行しているとします。次のコードは次のようになります。
<div style="width:400px;" class="center">
<script type="text/javascript">
document.write('<p class="red-button">You\'re using ' + BrowserDetect.browser + ' ' + BrowserDetect.version + ' on ' + BrowserDetect.OS + '</p>');
</script>
</div>
<div id="outdated">
<p>You are using an outdated browser.</p>
</div>
<div id="windows">
<!-- Links to update browser. -->
</div>
これが明確であることを願っています。すべての質問にお答えします。クッパ、バージョン、および OS を検出する以外にどこから始めればよいかわからないため、コードを試したことはありません。
サーバー側のスクリプトを使用できません。ホスト型 CMS を使用していますが、サーバー側のアクセス権がありません。私は自分のページで jQuery 1.8 を使用し$.browserていますが、非推奨であるため使用したくありません。(そうは言っても、JS だけでこれを行う方がはるかに簡単である場合、または JS だけでこれを行う場合は、それを使用して、このページ用に古いバージョンの jQuery を維持します。) また、何を手動で指定する必要があると思いますか?バージョンは古く、そうではありません。(IE バージョンが 14 未満の場合、ブラウザは古くなっています。) リリースされた最新のバージョンをスクリプトに伝える方法があれば、それはすばらしいことですが、必須ではありません。
重要な注意:私は JS の初心者であり、私のサービス/サイトのユーザーがブラウザーとブラウザーのバージョンを確認するためのシンプルで使いやすいページを作成するという目的のために機能するすべてのコードを受け入れます。通常、この場合、ユーザーエージェントのスニッフィングを避けるべきであることに同意しますが、私が望むことを回避する方法がわかりません。私は初心者なので、例を挙げてください。