- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在构建一个页面,允许简单的用户检查他们的浏览器版本,然后根据浏览器和操作系统显示特定的 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 新手,并且对任何适用于我的目的的代码持开放态度,这些代码为我的服务的用户创建一个简单且易于使用的页面/网站检查他们的浏览器和浏览器版本。虽然通常我会同意在这种情况下应该避免用户代理嗅探,但我没有找到解决办法来完成我想要的事情。由于我是新手,请提供示例。
最佳答案
很公平。我可以看到您被迫使用 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
关于javascript - 根据浏览器显示DIV并根据浏览器版本添加类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12048646/
无法使用 Hive 版本 1.1.0 HBase 版本 0.94.8 和 hadoop 版本 2.7.0 从 hive 创建 Hbase 表 hive (default)> CREATE TABLE
我试图为 electron app 创建可执行文件但面临这个问题 Unable to determine Electron version. Please specify an Electron ve
我正在尝试让自适应阈值在 python 绑定(bind)到 opencv 中工作(swig 一个 - 无法让 opencv 2.0 工作,因为我正在使用 beagleboard 因为交叉编译还没有工作
我一直在 linux 机器上使用 JMeter,在命令行下使用了一段时间。工作正常。 今天,我在 Windows 机器(新客户端等)上尝试了它,它确实可以工作,但在控制台窗口中输出有很大不同。 Lin
在我的编码环境中,我通常使用最新版本的 Java 和 Eclipse。当我编写源代码时,我不会注意我使用的 API 方法或类是否向后兼容旧版本的 Java 或 Eclipse。在 javadoc 中存
问题是关于版本的特定组合,但更普遍。 我刚刚从 Kubuntu 12.04 升级到 14.04。现在,当我想编译 CUDA 代码(使用 CUDA 6.5)时,我得到: #error -- unsupp
我目前正在对我的一些应用程序进行沙箱处理,看来我必须删除一些功能才能满足 Mac App Store 沙箱(和其他)规则。 显然用户不会因为失去功能而感到高兴,我担心他们不会指责苹果制定了愚蠢的规则,
我用 flash 和 js 版本创建了一个动画横幅。 是否可以检测低于版本 9 的 ie 版本,然后提供 Flash 横幅,否则提供 js 横幅。 最佳答案 您可以使用条件注释来检测 IE 版本
我有一个处理不同位置的数据库的应用程序,我想检查这些数据库是否使用 Firebird 2.5 或更高版本打开。我们最近从 Firebird 2.0 迁移到了 2.5,我们有很多数据库可以响应 sele
我正在开发一个应用程序,我使用托管在我的服务器上的 Java 和 Jersey 构建了后端部分。我在服务器上使用 Tomcat7 来调用 Web 服务。 我以前有一台安装了 Ubuntu 的计算机,我
我可以使用 GetVersionEx() 函数来获取 Windows 版本,但是这个函数将返回一个数字而不是一个字符串。但是没有问题,因为我可以将数字转换为字符串,例如: if (osvi.dwMaj
我已经在我的系统中安装了 Anaconda 2 & 3。 Anaconda 2 包含 python 2.7 & Anaconda 3 包含 python 3.6。 我需要使用命令提示符运行我的 pyt
我正在尝试构建一个 Android 项目,但发生了以下错误 Error:(10, 1) A problem occurred evaluating project ':app'. > Failed t
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 4 年前。 Improve this qu
在降级我的 GCC 之前,我想知道是否有办法确定我的机器中的哪些程序/框架或依赖项会中断,以及是否有更好的方法来执行 openpose 安装? (例如,在 CMake 中更改某些内容) 有没有办法在不
我已经在终端的代码sudo apt-get install Shadowsocks-qt5中安装了Shadowsocks-Qt5,然后我可以通过搜索找到启动图标,但是它当我点击图标时打不开。然后我尝试
在网络上找到的文档说,MLLP V2(第 2 版)是用于传输 HL7 版本 3 内容的所有消息传输协议(protocol)的要求。似乎 MLLP 第 2 版主要用于 HL7 第 3 版。 我们可以/应
我正在使用带有 selinium webdriver 的 Protractor 。我的chromeDriver版本是78.0.1,chrome版本是78.0.3904.97。两个版本都匹配,应该不会有
我正在按照教程设置 mysql 数据库并做一些事情。我无法找到数据库资源管理器。我读了很多,但在 Window->show View-> Dataxxx 或右侧上部选项卡中无法正常工作。 最佳答案 从
我已经在 KDE 桌面上安装了 Anaconda 2.0.1。当我运行 python 并看到所有已安装的模块时,我收到此消息“无法将不兼容的 Qt 库(版本 0x40801)与该库(版本 0x4080
我是一名优秀的程序员,十分优秀!