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

（一）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的，

以上是火狐的，

 

属性解释：

先上代码：

$(document).ready(function () {
    $("#a").click(function () {
        txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
        txt += "<p>浏览器名称: " + navigator.appName + "</p>";
        txt += "<p>浏览器版本: " + navigator.appVersion + "</p>";
        txt += "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
        txt += "<p>硬件平台: " + navigator.platform + "</p>";
        txt += "<p>用户代理: " + navigator.userAgent + "</p>";
        txt += "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
        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

其属性为：

.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请求中发送中常用，用于保存不重要的内容；

（四）screen对象

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

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

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

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

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

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

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

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