javascript - 根据浏览器显示DIV并根据浏览器版本添加类

Question

我正在构建一个页面，允许简单的用户检查他们的浏览器版本，然后根据浏览器和操作系统显示特定的 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 新手，并且对任何适用于我的目的的代码持开放态度，这些代码为我的服务的用户创建一个简单且易于使用的页面/网站检查他们的浏览器和浏览器版本。虽然通常我会同意在这种情况下应该避免用户代理嗅探，但我没有找到解决办法来完成我想要的事情。由于我是新手，请提供示例。

Answer 1

很公平。我可以看到您被迫使用 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