(一)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应该不支持。