根据操作系统显示或隐藏 Div答案

【问题标题】：Show or Hide Div based on OS根据操作系统显示或隐藏 Div
【发布时间】：2014-01-22 05:04:01
【问题描述】：

我经营一个网站，我希望能够在其中宣传仅适用于 Windows 的可下载程序。

此广告将位于名为“adforwindows”的 div 中。
我想使用与此处列出的类似的检测方法：http://www.javascripter.net/faq/operatin.htm

总结：

If Operating System = Windows

Then set visibility of Div 'adforwindows' to visible
Else Set visibility of Div 'adforwindows' to hidden

有谁知道可以做到这一点的好的 html/javascript 脚本吗？

编辑

这是一个解决方案吗？似乎无法让它工作；

<!DOCTYPE html>
<html>
<head>
<script>
var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";

if(OSName == "Windows"){
   document.getElementById('adforwindows').style.visibility = "visible";
}
else{
   document.getElementById('adforwindows').style.visibility = "hidden";
}
</script>
</head>
<body>
<div class="adforwindows">
Windows Advert 
</div>
<p>Main site content<P>
</body>
</html>

【问题讨论】：

见这里：stackoverflow.com/questions/11219582/…

标签： javascript html operating-system detection os-detection

【解决方案1】：

因为您已经从这段代码中知道了操作系统（取自网站）

var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";

因此，您可以使用简单的 if 语句进行检查，并使用 document.getElementById 设置可见性。

var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";

if(OSName == "Windows"){
   document.getElementById('adforwindows').style.display = "block";
}
else{
   document.getElementById('adforwindows').style.display = "none";
}

如果您不需要了解其他操作系统，只需使用以下较短的代码：

if (navigator.appVersion.indexOf("Win")!=-1)
   document.getElementById('adforwindows').style.display = "block";
}
else{
   document.getElementById('adforwindows').style.display = "none";
}

编辑：如果你想拥有它 visibility:none/visible 而不是 display:none（有区别：http://www.w3schools.com/css/css_display_visibility.asp 您可以将.style.display = "none"; 更改为.style.visibility = "hidden"; 并将.style.display = "block"; 更改为.style.visibility = "visible";

【讨论】：

无法正常工作 - 这是正确的吗？ <html> <body> <script> var OSName="Unknown OS"; if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows"; if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS"; if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX"; if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux"; if(OSName == "Windows"){ document.getElementById('adforwindows').style.visibility = "visible"; } else{ document.getElementById('adforwindows').style.visibility = "hidden"; } </script> <div id="adforwindows"> Windows Advert </div> </body> </html>
是的，这看起来是正确的。但您可能希望将脚本放在
之后。这是因为脚本将在 div 初始化之前运行（如果您检查控制台并看到诸如“无法获取未定义的样式”之类的错误，这就是您的问题）。使用 jQuery onread 也会有所帮助。

【解决方案2】：

您可以使用navigator.platform 或navigator.appVersion。

例如：

var getOS = function() {
    var operatingSystems = {
        'Win': 'Windows',
        'Mac': 'MacOS',
        'Linux': 'Linux',
        'X11': 'UNIX'
    };
    for(var k in operatingSystems) {
        if(navigator.appVersion.indexOf(k) !== -1) {
            return operatingSystems[k];
        }
    }
    return undefined;
};

console.log(getOS());

var os = getOS();
document.getElementById('adforwindows').style.display = os === 'Windows'
    ? 'block'
    : 'none';

DEMO

见https://developer.mozilla.org/en-US/docs/Web/API/NavigatorID

【讨论】：