Fatal编程技术网
  • javascript/
  • Javascript 基于操作系统显示或隐藏Div

Javascript 基于操作系统显示或隐藏Div

javascript html operating-system

Javascript 基于操作系统显示或隐藏Div,javascript,html,operating-system,detection,os-detection,Javascript,Html,Operating System,Detection,Os Detection,我经营一个网站，我想在其中能够宣传一个可下载的程序只适用于windows 广告将放在一个名为“adforwindows”的分区内 我想使用一种类似于此处所列的检测方法： 总结： If Operating System = Windows 然后将Div'adforwindows'的可见性设置为可见否则将Div'adforwindows'的可见性设置为隐藏 有人知道一个好的html/javascript脚本可以做到这一点吗 编辑 这是一个解决方案吗？似乎无法让它工作 <!DOCTYPE

我经营一个网站，我想在其中能够宣传一个可下载的程序只适用于windows

  • 广告将放在一个名为“adforwindows”的分区内
  • 我想使用一种类似于此处所列的检测方法：
总结：

If Operating System = Windows

然后将Div'adforwindows'的可见性设置为可见

否则将Div'adforwindows'的可见性设置为隐藏

有人知道一个好的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>


var OSName=“未知操作系统”；
如果（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”；
如果（OSName==“Windows”）{
document.getElementById（'adforwindows'）.style.visibility=“visible”；
}
否则{
document.getElementById（'adforwindows'）.style.visibility=“hidden”；
}
视窗广告
主要网站内容
因为您已经从该代码（取自网站）了解操作系统

因此，可以使用一个简单的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";
}
编辑：如果您想让它
可见性：无/可见
而不是
显示：无
（有一个区别： 您可以将
.style.display=“none”
更改为
.style.visibility=“hidden”
并将
.style.display=“block”
更改为
.style.visibility=“visible”
您可以使用
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';

请参见

此处查看：无法使其工作-是否正确？
var OSName=“未知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”；}Windows广告
是的，这看起来是正确的..但您可能希望将脚本放在后面。这是因为脚本将在初始化div之前运行（如果您检查控制台并看到类似“无法获取未定义样式”的错误，这就是您的问题）。使用jQuery onready也会有所帮助。 
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';