javascript - 根据操作系统显示或隐藏 Div

Question

我经营一个网站，我希望能够在其中宣传仅适用于 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>

score 3 · Accepted Answer

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

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";

score 0 · Accepted Answer

您可以使用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';

演示

请参阅https://developer.mozilla.org/en-US/docs/Web/API/NavigatorID

javascript - 根据操作系统显示或隐藏 Div

2 回答 2

Related

Reference