原生JS（1）BOM，navigator，location，screen对象

不念不忘少年蓝@ 2022-07-19 00:10 152阅读 0赞

**（一）BOM功能：**

**BOM：浏览器对象模型**

浏览器对象模型

①弹出新浏览器窗口的功能；window.open

②移动、缩放和关闭浏览器窗口的功能；

③提供浏览器详细信息的navigator对象；

④提供浏览器所加载页面的详细信息的location对象；

⑤提供用户显示器分辨率详细信息的screen对象；

⑥对cookies的支持；

⑦像XMLHttpRequest和IE的ActiveXOjbect这样的自定义对象。

**（二）navigator对象**

.Navigator {vendorSub: "", productSub: "20030107", vendor: "Google Inc.", maxTouchPoints: 0, hardwareConcurrency: 4…}
    .appCodeName:"Mozilla"
    .appName:"Netscape"
    .appVersion:"5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36"
    .cookieEnabled:true
    .credentials:CredentialsContainer
    .doNotTrack:null
    .geolocation:Geolocation
    .hardwareConcurrency:4
    .language:"zh-CN"
    .languages:Array[2]
    .maxTouchPoints:0
    .mediaDevices:MediaDevices
    .mimeTypes:MimeTypeArray
    .onLine:true
    .permissions:Permissions
    .platform:"Win32"
    .plugins:PluginArray
    .presentation:Presentation
    .product:"Gecko"
    .productSub:"20030107"
    .serviceWorker:ServiceWorkerContainer
    .userAgent:"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36"
    .vendor:"Google Inc."
    .vendorSub:""
    .webkitPersistentStorage:DeprecatedStorageQuota
    .webkitTemporaryStorage:DeprecatedStorageQuota
    .__proto__:Navigator

以上是chrome的，

![20160806161609769][]

以上是火狐的，

属性解释：

先上代码：

$(document).ready(function () {
 $("#a").click(function () {
 txt = "浏览器代号: " + navigator.appCodeName + "";
 txt += "浏览器名称: " + navigator.appName + "";
 txt += "浏览器版本: " + navigator.appVersion + "";
 txt += "启用Cookies: " + navigator.cookieEnabled + "";
 txt += "硬件平台: " + navigator.platform + "";
 txt += "用户代理: " + navigator.userAgent + "";
 txt += "用户代理语言: " + navigator.systemLanguage + "";
 document.getElementById("a").innerHTML = txt;
 })
 })

结果：

360浏览器：

浏览器代号: Mozilla
    浏览器名称: Netscape
    浏览器版本: 5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36
    启用Cookies: true
    硬件平台: Win32
    用户代理: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36
    用户代理语言: undefined

chrome：

浏览器代号: Mozilla
    浏览器名称: Netscape
    浏览器版本: 5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
    启用Cookies: true
    硬件平台: Win32
    用户代理: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
    用户代理语言: undefined

safari：

浏览器代号: Mozilla
    浏览器名称: Netscape
    浏览器版本: 5.0 (iPhone; CPU iPhone OS 9_3_3 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13G34 Safari/601.1
    启用Cookies: true
    硬件平台: iPhone
    用户代理: Mozilla/5.0 (iPhone; CPU iPhone OS 9_3_3 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13G34 Safari/601.1
    用户代理语言: undefined

①appCodeName：只读字符串，用于声明浏览器的代码名，

经测试，在chrome，firefox，safari里的值都是Mozilla；

手机端的uc浏览器测试失败

②appName基本是一样的；

③appVersion返回浏览器的平台和版本信息；

④cookieEnabled表示cookie是否能用；

⑤platform返回运行浏览器的操作系统平台；

⑥userAgent返回由客户机发送服务器的 user-agent 头部的值。

⑦systemLanguage返回 OS 使用的默认语言。

⑧online：是否在线；

**（三）location对象**

属性列表（chrome）

假如是这样的url：[https://www.baidu.com/?key1=a&key2=b\#abc][https_www.baidu.com_key1_a_key2_b_abc]

其属性为：

.ancestorOrigins:DOMStringList
    .assign:()
    .hash:"#abc"
    .host:"www.baidu.com"
    .hostname:"www.baidu.com"
    .href:"https://www.baidu.com/?key1=a&key2=b#abc"
    .origin:"https://www.baidu.com"
    .pathname:"/"
    .port:""
    .protocol:"https:"
    .reload:reload()
    .replace:()
    .search:"?key1=a&key2=b"
    .toString:toString()
    .valueOf:valueOf()
    .__proto__:Location

①hash表示其哈希值，即url之中，\#之后的内容，包括\#；

②host表示根url，即如果是abc.com/d/e/f，它的值只包含abc.com；

他包含端口（假如端口为80则不显示），但不包含http开头的部分

③hostname同样表示根url，但不包含端口，假如端口不是80，他依然是abc.com，但不包含http开头的部分

④href是当前页面的完整路径；

⑤origin：同样是url，但包含http或者https开头的部分，也包括之后的端口。（注：不兼容IE）

⑥pathname：指的是根目录之下的路径，其具体值为从host之后部分，到问号之前的部分；例如abc.com/d/e/f，其pathname值为/d/e/f

⑦protocol返回url中的协议部分，即http或者https；

⑧search指问号之后，\#之前的部分；包括？不包括\#；在get请求中发送中常用，用于保存不重要的内容；

![20160806162424827][]

**（四）screen对象**

这是跟屏幕相关的属性对象；

chrome下，属性如下：（不包含通过prototype继承的属性）

![20160806162618985][]

①availHeight：屏幕可用高度（除windows任务栏），因此会比实际分辨率小一些；（linux下不确定，应该也会少一些吧）

②availWidth：屏幕可用宽度，一般都和实际分辨率保持相同。这两条属性，用qq自带的截图工具，可以轻易获取到这个宽高。

③availLeft和availTop：一般情况下，都是0。经过实测，即使调整分辨率，让屏幕有黑边（即左右没有实际填充满显示屏），也不影响这个值。

④height、width：指屏幕的实际高度和宽度，可以知道屏幕的分辨率如何。

⑤colorDepth：返回目标设备或缓冲器上的调色板的比特深度。（不明白）

⑥pixelDepth：返回屏幕的颜色分辨率（比特每像素），以上两个一般一样，大概就是指颜色比如16位之类的？IE应该不支持。

[20160806161609769]: /images/20220718/cbd95cd3794e4340b3f67bccf2aaefcd.png
[https_www.baidu.com_key1_a_key2_b_abc]: https://www.baidu.com/?key1=a&key2=b#abc
[20160806162424827]: /images/20220718/c87186bf7d634e9ead40ab728487cbcd.png
[20160806162618985]: /images/20220718/56da0d629f084ba69dbdb41e1cec8306.png