如何从Javascript中检测浏览器操作系统?

时间:2010-10-24 14:05:05

标签: javascript html

我对javascript一无所知,也不是很多关于编程的东西,但我想创建一个检查用户的操作系统的页面,如果他们使用的是移动操作系统(iphone,android等等),请转发他们到移动网站,如果他们使用计算机,将他们转发到普通网站。这是我制作的页面:

 <head> 
<title>OS Check | website.web.org</title> 

<SCRIPT LANGUAGE = "javaScript"> 

if (navigator.appVersion.indexOf("Win")!=-1) && (navigator.appVersion.indexOf("Mac")!=-1) && (navigator.appVersion.indexOf("X11")!=-1) && (navigator.appVersion.indexOf("Linux")!=-1) location.href= "http://website.web.org/mobile/index.html"

else location.href = "http://website.web.org/Home.html"

</SCRIPT> 
</head>

基本上,它的意思是检查所有主要的计算机操作系统,如果它不是其中之一,将用户发送到移动网页,但如果是其中之一,则将它们发送到计算机站点

有人可以告诉我这个页面/脚本中的错误/问题是什么吗?

谢谢, 路加

7 个答案:

答案 0 :(得分:15)

  

这个脚本有什么问题?

是的,几乎所有的东西。

if语句中的缺失括号,到旧学校language属性,到潜在导航破解的JavaScript重定向,到基于粗略用户重定向的整个想法 - 特工嗅探。

Windows Mobile(包含“Windows CE”),Windows Phone,iPhone / iPad(包含“Mac OS X”字符串)和Android设备(包含“Linux”)的策略将失败。这是对主要移动操作系统失败的很好的报道,更不用说可能不包含任何这些令牌的桌面浏览器了。

您可以通过嗅探您想要检测的特定情况来改善这一点。有关存在的内容的概述,请参阅this list

当所有“移动”设备包含从几乎无法上网的功能手机到大屏幕平板电脑的所有内容时,处理所有“移动”设备是不可能的。现代移动浏览器非常能够呈现普通的HTML页面,特别是如果您通过使用液体布局鼓励可访问性,而手持式样式表可以减少必要的内容宽度。

答案 1 :(得分:7)

其他评论都是有效的,但我认为问题的根源是:

if (navigator.appVersion.indexOf("Win")!=-1) && (navigator.appVersion.indexOf("Mac")!=-1) && (navigator.appVersion.indexOf("X11")!=-1) && (navigator.appVersion.indexOf("Linux")!=-1)

重新格式化时

if (navigator.appVersion.indexOf("Win")!=-1)
    && (navigator.appVersion.indexOf("Mac")!=-1)
    && (navigator.appVersion.indexOf("X11")!=-1)
    && (navigator.appVersion.indexOf("Linux")!=-1)

相当于

if (isWindows
    && isMac
    && isX11
    && isLinux)

(因为indexOf("foo")!=-1表示“找到了foo”)。

你能在这里看到逻辑错误吗?

这就是为什么你应该遵循其他答案的建议:格式化代码使其可读,并(尽可能)使用现有的库。明智地使用CSS也是你的朋友。

答案 2 :(得分:5)

问题是你的括号错了。试试这个:

if ( navigator.appVersion.indexOf("Win")!=-1 
     && navigator.appVersion.indexOf("Mac")!=-1 
     && navigator.appVersion.indexOf("X11")!=-1 
     && navigator.appVersion.indexOf("Linux")!=-1 ){
       document.location.href= "http://website.web.org/mobile/index.html";
}
else{ 
       document.location.href = "http://website.web.org/Home.html"
}

答案 3 :(得分:5)

我可能有点太晚了,但这里有:

创建移动网站的主要原因是与具有不同屏幕尺寸的设备兼容。使用JavaScript将用户根据屏幕大小重定向到不同的链接非常简单,只需在index.html中添加它 - Apache男孩会讨厌,所以我最好警告你这不是“最有效”的方式,但是这对我的目的来说已经足够了。

<html>
<head>
<meta http-equiv="refresh" content="0;document.location" />
</head>
<body>

<script language="javascript" type="text/javascript">// <![CDATA[
if (screen.width <= 699) {
document.location = "LINK TO YOUR MOBILE SITE";
}

else{ 
       document.location.href = "LINK TO YOUR DESKTOP SITE"
}
// ]]></script>
</body>

</html>

快乐的编码!

答案 4 :(得分:4)

不要在客户端使用这些重定向,我建议你在这里使用脚本: http://detectmobilebrowser.com/

答案 5 :(得分:3)

不再推荐使用此解决方案!我会使用“浏览器功能检测”,它会检测浏览器是否支持某些功能。如果没有,则将它们重定向到网站的兼容版本。从长远来看,它更安全,因为它可以在浏览器更新时使用最佳版本的网站,以包含新功能。

https://developer.mozilla.org/en/Browser_Feature_Detection

答案 6 :(得分:3)

这将向您展示如何使用JavaScript进行浏览器检测,这并不难。它实际上不会告诉哪个操作系统,但是因为它会知道它是在手机或计算机上的浏览器,它将有助于指向您想要的移动网站。

http://www.javascriptkit.com/javatutors/navigator.shtml