我正在构建一个页面,该页面将允许简单用户检查他们的浏览器版本,然后根据浏览器和操作系统将显示某个 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();
我不知道从哪里开始使用 javascript 来显示某些 div。
我的想法是,根据上面的代码显示,它会根据版本号和 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>
我希望这很清楚,我会回答所有问题。到目前为止,我还没有尝试过任何代码,因为除了检测 bowser、版本和操作系统之外,我不知道从哪里开始。
我不能使用任何服务器端脚本。我正在使用托管 CMS,并且没有服务器端访问权限。我在我的页面上使用 jQuery 1.8,但我不想使用它,$.browser
因为它已被弃用。(话虽如此,如果它更容易或者唯一的方法是在 JS 中执行此操作,那么我愿意使用它并将为此页面维护旧版本的 jQuery。)另外我假设我必须手动指定什么版本已过时而不是。(IE 如果版本低于 14,则浏览器已过时。)如果有办法告诉脚本最新发布的版本是什么,那么很好但不是必需的。
重要说明:我是 JS 的新手,我愿意接受任何和所有适用于我的目的的代码,这些代码为我的服务/站点的用户创建一个简单易用的页面,以检查他们的浏览器和浏览器版本。虽然通常我会同意在这种情况下应该避免用户代理嗅探,但我看不到绕过它的方法来做我想做的事。由于我是新手,请提供示例。