f10@t's blog

BOM 浏览器操作对象模型之navigator、location对象

字数统计: 1.2k阅读时长: 5 min
2018/08/20

 navigator对象中包含了浏览器的基本信息,如名称、版本和系统。可以通过window.navigator可以引用该对象,客户端并利用它的属性来读取客户端基本信息。

  navigator对象属性表如下:    ### 浏览器检测方法   浏览器检测的方法有多种,常用方法包括两种:特征检测法和字符串检测法。   前者是根据浏览器是否支持特定功能来决定操作的方式,属于非精确判断法,但也是最安全的检测方法。如果不关心浏览器的身份,仅仅在意它的能力,就可以使用该方法。 后者则可以判断浏览器身份。   1. 特征检测法:

1
2
3
4
5
6
if(document.getElementsByName){ 		// 如果存在,则使用该方法获取a元素
var a = document.getElementsByName("a");
}
else if(document.getElementsByTagName){ // 如果存在,则使用该方法获取a元素
var a = document.getElementsByTagName("a");
}
当使用一个对象方法或属性时,先判断它是否存在,若存在,则浏览器支持该对象、方法或属性,这时就可以放心使用了。不存在时就会返回undefined,js会自动将其转为布尔值false。   2. 字符串检测法
1
2
3
4
var s = window.navigator.userAgent;    //也可以写成var s = navigator.userAgent //navigator的userAgent属性可以捕获客户端user-agent的字符串信息。

alert(s);
// 返回字符串"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:56.0) Gecko/20100101 Firefox/56.0"
  user-agent包含了大量的Web浏览器信息,不同浏览器各不相同。   当然了,考虑安全的话,navigator对象的信息是具有误导性,不应该被用于检测浏览器版本。原因如下:   1> navigator 数据可被浏览器使用者更改   2> 一些浏览器对测试站点会识别错误   3> 浏览器无法报告晚于浏览器发布的新操作系统    这里有一篇关于user-Agent字段的讲解

检测浏览器类型和型号

  下面的方法可以用来判断当前主流浏览器的类型,包括IE、Opera、Safari、Chrome和Firefox。 1. 判断类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var ua = navigator.userAgent.toLowerCase();		// 获取用户端信息
var info ={
ie : /msie/.test(ua) && !/opera/.test(ua), // 匹配IE浏览器
op : /opera/.test(ua), // 匹配Opera浏览器
sa : /version.*safari/.test(ua), // 匹配Safari浏览器
ch : /chrome/.test(ua), // 匹配Chrome浏览器
ff : /gecko/.test(ua) && !/webkit/.test(ua) // 匹配Firefox浏览器
};

(info.ie) && alert("IE浏览器");
(info.op) && alert("Opera浏览器");
(info.sa) && alert("Safari浏览器");
(info.ff) && alert("Firefox浏览器");
(info.ch) && alert("Chrome浏览器");
  检测方法也很简单,即判断navigator.userAgent返回的字符串中是否含有特定浏览器的字段。 2. 判断版本号   通过解析navigator对象的userAgent属性,可以获得浏览器完整的。比如针对Firefox,它的版本号跟在Firefox字段后面:
1
2
3
4
5
6
7
8
9
function getFirefox(){
var ua = navigator.userAgent;
var b = ua.indexOf("Firefox/") //检测特殊位置
if (b < 0){
return 0;
}
return parseFloat(ua.substring(b + 8,)); //截取版本字符串
}
alert(getFirefox()); //返回版本号
3. 检测客户操作系统   userAgent的返回值中一般都会包含操作系统的基本信息,我们可以检测一些更为通用的信息,比如:windows系统、UNIX系统或Macintosh系统等。这些通用信息透视具有特征的,比如window操作系统会带有"win"字符串,UNIX版本操作系统都包含"X11"字符串等等。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var isWin = (navigator.userAgent.indexOf("Win") != - 1);  
if(isWin){ // 如果是Windows系统,则返回true
alert("windows");
}
var isMac = (navigator.userAgent.indexOf("Mac") != - 1);
if(isMac){ // 如果是Macintosh系统,则返回true
alert("Macintosh");
}
var isUnix = (navigator.userAgent.indexOf("X11") != - 1);
if(isUnix){ // 如果是UNIX系统,则返回true
alert("UNIX");
}
var isLinux = (navigator.userAgent.indexOf("Linux") != - 1);
if(isLinux){ // 如果是Linux系统,则返回true
alert("Linux");
}

navigator兑现储存当前页面与位置(URL)相关的信息,表示当前显示文档的Web地址。使用window对象的location属性可以访问。

  location对象共定义了8个属性。其中7个属性分别指向当前URL的各部分信息,另一个属性(href)包含了完整的URL信息。见下图:   比如http://www.abc.com:80/index.php?id=123&name=hahaha#1   对照上表,hash值为URL的一个锚部分,这里为#1;host为URL的主机名和端口,这里为www.abc.com:80;hostname是主机名,这里为www.abc.com;href声明了当前显示文档的完整URL;pathname声明当前URL的路径部分;这里为/index.php;port返回端口号,这里为80;protocol属性值为URL协议部分,这里为http;search返回URL查询部分,使用?作为前导部分,这里为id=123&name=hahaha。   下面是location对象的方法:    详情用法

CATALOG
  1. 1. 检测浏览器类型和型号