我正在构建一个页面，允许简单的用户检查他们的浏览器版本，然后根据哪些浏览器和操作系统将显示某个div。然后根据版本向标记添加某个类。
我found this code来检测浏览器，版本和操作系统。代码遵循：
// 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。）另外我假设我将不得不手动指定什么版本已过时而不是。 （例如，如果版本小于14，则浏览器已过时。）如果有一种方法可以告诉脚本什么是最新版本，那么很好但不是必需的。
重要提示：我是JS的新手，并且可以使用任何能够满足我的目的的代码，这些代码可以为我的服务用户创建一个简单易用的页面/网站检查他们的浏览器和浏览器版本。虽然通常我会同意应该避免用户代理嗅探，在这种情况下，我没有看到绕过它做我想要的方法。由于我是新手，请提供示例。
答案 0 :(得分：2)
足够公平。我可以看到你被迫使用JS，老实说，这个脚本和它一样好。
根据上面的代码，您将希望使用我在该脚本后提供的内容。
BrowserDetect.init();
我们假设我们有一个div。
<div id="userInfo"></div>
现在我们需要为版本/平台编写条件语句。这将是一个很长的列表，因为很遗憾，您需要对此代码进行反向工程，以便按照您的意愿工作。
var a = BrowserDetect.browser,
b = BrowserDetect.version,
c = BrowserDetect.OS;
if(a == "Firefox" && b >= "14" && c == "Windows"){
//firefox greater then or equal to 14, on windows
$("#userInfo").text(a +' '+ b + ' - ' + c);
}else if(a == "Explorer" && b == "9" && c == "Windows"){
//ie9 on windows
$("#userInfo").text(a +' - '+ b + ' - ' + c);
}else if(a == "Chrome" && b > "19" && c == "Mac"){
//chrome greater than 19 on a mac
$("#userInfo").text(a +' - '+ b + ' - ' + c);
}
//more conditionals here
答案 1 :(得分：1)
不需要使用div，只需使用innerHtml和innerText属性从表中动态获取值。
将代码放在表格格式中并在每个代码中放置代码，并在检测到时将值提取到下一列并相应地操作内容。
答案 2 :(得分：1)
您可以使用jQuery在一行中执行此操作。
<!DOCTYPE html>
<html>
<head>
<style>
p { color:green; font-weight:bolder; margin:3px 0 0 10px; }
div { color:blue; margin-left:20px; font-size:14px; }
span { color:red; }
</style>
<p>Browser info:</p>
<script>
jQuery.each(jQuery.browser, function(i, val) {
$("<div>" + i + " : <span>" + val + "</span>")
.appendTo( document.body );
});</script>
</body>
</html>
点击此链接获取更多信息.. Jquery
修改
如果你想要普通的javascript，你可以使用window.navigator.userAgent
例如：
<html><div id="a"></div><div id="b"></div></html>
你的脚本在这里
<script>
var ua=window.navigator.userAgent;
if(ua.indexOf('Mozilla')!=-1){document.getElementById('a').style.display='none'}
if(ua.indexOf('Safari')!=-1){document.getElementById('b').style.display='none'}
</script>