一、BOM对象包含的内容
BOM: Brower Object Model,简称浏览器对象模型
- window JavaScript层级中的顶级对象,表示浏览器窗口
- Navigator 包含了客户端浏览器的信息
- History 包含了浏览器窗口访问过的URL
- Location 包含了当前URL的信息
- Screen 包含了客户端显示屏的信息
二、Window对象
1.window对象属性
属性 | 作用 |
---|---|
innerHeight | 返回窗口的文档显示区的高度 |
innerWidth | 返回窗口的文档显示区的宽度 |
- innerHeight 和 innerWidth 他返回的是你网页展示的区域的大小,即视口的区域大小(存在兼容性问题,IE8及其以下不兼容)
- document.documentElement.clientHeight 和 clientWidth 也是返回视口的尺寸(标准模式下任何浏览器都兼容)
- document.body.clientWidth/clientHeight(适用于怪异模式下的浏览器)该属性在标准模式下返回的是设置的body的实际宽高,只有在怪异模式下才会返回视口的大小。
属性 | 作用 |
---|---|
scrollTo | 设置滚动条移动的距离,参数一为X轴距,参数二维Y轴距 |
scrollBy | 设置滚动条移动的距离,参数一为X轴距,参数二维Y轴距(在原有的基础上滚动) |
- 我们需要区分的是scrollTo(x,y)是每次将滚动条移动到(x,y)点
- scrollBy(x,y)是在原有移动的基础上再次移动(原有x+x,原有y+y)的距离
属性 | 作用 |
---|---|
pageXOffset | 设置或返回当前页面相对于窗口显示区左上角的X位置。(IE8及以下不兼容) |
pageYOffset | 设置或返回当前页面相对于窗口显示区左上角的Y位置。 |
scrollX | 设置返回滚动条移动的横向距离 |
scrollY | 设置返回滚动条移动的纵向距离 |
- pageXOffset 属性是 scrollX 属性的别名,为了跨浏览器兼容性,请使用 window.pageXOffset 代替 window.scrollX。
- window.pageXOffset == window.scrollX; // 总是 true
- 该属性和scroll一样也是返回的是滚动条的距离,但是我们需要注意的是,虽然她和ScrollX一样都可以设置值,但是设置了值之后他并不会有效果,仅仅是设置了值
查看滚动条的距离还有两个方法,document.body/documentElement.scrollLeft/scrollTop,只是这两个方法存在兼容性混乱的问题,就是当document.body.scrollLeft可以返回横向滚动的距离时,那么document.documentElement.scrollleft就会返回0,因此我们在做兼容性写法的时候。常常将两个属性相加: x = document.body.scrollLeft + document.documentElement.scrollleft。
属性 | 作用 |
---|---|
parent | 返回子窗口的父窗口 |
top | 返回该窗口的最顶级窗口 |
- 当你使用
<iframe src="./children.html" frameborder="10"></iframe>
在网页中引入一个子网页的话,那么网页1就是子网页的父级网页- 在这里我们需要注意一个问题,就是在全局环境下我们声明变量时,要尽量避免声明top,parent这些保留字,因为你在全局环境下声明,很可能操作的是window下的这样一个属性。
属性 | 作用 |
---|---|
screenX | 只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。 |
screenY | |
screenTop | |
screenLeft |
- IE、Safari、Chrome 和 Opera 支持 screenLeft
和 screenTop,而 Chrome、Firefox 和 Safari 支持 screenX 和 screenY。
#### 2.window对象方法 | 方法 | 作用 | | :------------ | -----------------------------------------------------------------------------------: | | setInterval | 设置定时器 (每隔一段时间就会触发处理事件) | | setTimeout | 设置定时器 (延迟一段时间才会触发事件) | | cleanInterval | 清除定时器 | | cleanTimeout | 清除定时器 | | open | 打开一个新的浏览器窗口或查找一个已命名的窗口。window.open(URL,name,features,replace) | | close | 关闭浏览器窗口 |
### 三、Navigator对象 > Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。虽然这个对象的 名称显而易见的是 Netscape 的 Navigator 浏览器,但其他实现了 JavaScript 的浏览器也支持这个对象。 #### 1. navigator 对象属性
方法 | 作用 |
---|---|
online | 返回指明系统是否处于脱机模式(是否联网)的布尔值。常用来做离线缓存的判断条件 |
cookieEnabled | 返回指明浏览器中是否启用 cookie 的布尔值。 |
userAgent | 返回由客户机发送服务器的 user-agent 头部的值。 |
点击查看详细内容userAgent 返回的值:
“Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Safari/537.36”
我们常用此值来做浏览器嗅探
-浏览器嗅探代码
// var nVer = navigator.appVersion, nAgt = navigator.userAgent, browser = navigator.appName, version = '' + parseFloat(navigator.appVersion), majorVersion, nameOffset, verOffset, ix, network = 'unknown'; // Opera if ((verOffset = nAgt.indexOf('Opera')) != -1) { browser = 'Opera'; version = nAgt.substring(verOffset + 6); if ((verOffset = nAgt.indexOf('Version')) != -1) { version = nAgt.substring(verOffset + 8); } } // Opera Next if ((verOffset = nAgt.indexOf('OPR')) != -1) { browser = 'Opera'; version = nAgt.substring(verOffset + 4); } // MSIE else if ((verOffset = nAgt.indexOf('MSIE')) != -1) { browser = 'Microsoft Internet Explorer'; version = nAgt.substring(verOffset + 5); } // Chrome else if ((verOffset = nAgt.indexOf('Chrome')) != -1) { browser = 'Chrome'; version = nAgt.substring(verOffset + 7); } // Safari else if ((verOffset = nAgt.indexOf('Safari')) != -1) { browser = 'Safari'; version = nAgt.substring(verOffset + 7); if ((verOffset = nAgt.indexOf('Version')) != -1) { version = nAgt.substring(verOffset + 8); } } // Firefox else if ((verOffset = nAgt.indexOf('Firefox')) != -1) { browser = 'Firefox'; version = nAgt.substring(verOffset + 8); } // MSIE 11+ else if (nAgt.indexOf('Trident/') != -1) { browser = 'Microsoft Internet Explorer'; version = nAgt.substring(nAgt.indexOf('rv:') + 3); } // WeiXin else if (nAgt.indexOf('NetType/') != -1) { browser = 'WeiXin'; if (nAgt.indexOf('NetType/WIFI') != -1) { network = 'WIFI'; }else if(nAgt.indexOf('NetType/2G') != -1) { network = '2G'; }else if(nAgt.indexOf('NetType/3G+') != -1) { network = '3G+'; } verOffset = nAgt.lastIndexOf('/') version = nAgt.substring(verOffset + 1); if (browser.toLowerCase() == browser.toUpperCase()) { browser = navigator.appName; } } // Other browsers else if ((nameOffset = nAgt.lastIndexOf(' ') + 1) < (verOffset = nAgt.lastIndexOf('/'))) { browser = nAgt.substring(nameOffset, verOffset); version = nAgt.substring(verOffset + 1); if (browser.toLowerCase() == browser.toUpperCase()) { browser = navigator.appName; } }
// trim the version string if ((ix = version.indexOf(';')) != -1) version = version.substring(0, ix); if ((ix = version.indexOf(' ')) != -1) version = version.substring(0, ix); if ((ix = version.indexOf(')')) != -1) version = version.substring(0, ix); majorVersion = parseInt('' + version, 10); if (isNaN(majorVersion)) { version = '' + parseFloat(navigator.appVersion); majorVersion = parseInt(navigator.appVersion, 10); } // mobile version var mobile = /Mobile|mini|Fennec|Android|iP(ad|od|hone)/.test(nVer); // start system detect var os = ''; var clientStrings = [ {s: 'Windows 10', r: /(Windows 10.0|Windows NT 10.0)/}, {s: 'Windows 8.1', r: /(Windows 8.1|Windows NT 6.3)/}, {s: 'Windows 8', r: /(Windows 8|Windows NT 6.2)/}, {s: 'Windows 7', r: /(Windows 7|Windows NT 6.1)/}, {s: 'Windows Vista', r: /Windows NT 6.0/}, {s: 'Windows Server 2003', r: /Windows NT 5.2/}, {s: 'Windows XP', r: /(Windows NT 5.1|Windows XP)/}, {s: 'Windows 2000', r: /(Windows NT 5.0|Windows 2000)/}, {s: 'Windows ME', r: /(Win 9x 4.90|Windows ME)/}, {s: 'Windows 98', r: /(Windows 98|Win98)/}, {s: 'Windows 95', r: /(Windows 95|Win95|Windows_95)/}, {s: 'Windows NT 4.0', r: /(Windows NT 4.0|WinNT4.0|WinNT|Windows NT)/}, {s: 'Windows CE', r: /Windows CE/}, {s: 'Windows 3.11', r: /Win16/}, {s: 'Android', r: /Android/}, {s: 'Open BSD', r: /OpenBSD/}, {s: 'Sun OS', r: /SunOS/}, {s: 'Linux', r: /(Linux|X11)/}, {s: 'iOS', r: /(iPhone|iPad|iPod)/}, {s: 'Mac OS X', r: /Mac OS X/}, {s: 'Mac OS', r: /(MacPPC|MacIntel|Mac_PowerPC|Macintosh)/}, {s: 'QNX', r: /QNX/}, {s: 'UNIX', r: /UNIX/}, {s: 'BeOS', r: /BeOS/}, {s: 'OS/2', r: /OS\/2/}, {s: 'Search Bot', r: /(nuhk|Googlebot|Yammybot|Openbot|Slurp|MSNBot|Ask Jeeves\/Teoma|ia_archiver)/} ]; for (var id in clientStrings) { var cs = clientStrings[id]; if (cs.r.test(nAgt)) { os = cs.s; break; } } var osVersion = ''; if (/Windows/.test(os)) { osVersion = /Windows (.*)/.exec(os)[1]; os = 'Windows'; } switch (os) { case 'Mac OS X': osVersion = /Mac OS X (10[\.\_\d]+)/.exec(nAgt)[1]; break; case 'Android': osVersion = /Android ([\.\_\d]+)/.exec(nAgt)[1]; break; case 'iOS': osVersion = /OS (\d+)_(\d+)_?(\d+)?/.exec(nVer); osVersion = osVersion[1] + '.' + osVersion[2] + '.' + (osVersion[3] | 0); break; } //detect data var params = {}; params.os = os;//操作系统 params.osVersion = osVersion ? osVersion : 'unknown';//操作系统版本 params.mobile = mobile;//是否移动端访问 params.browser = browser;//浏览器 params.browserVersion = version;//浏览器版本 params.browserMajorVersion = majorVersion;//浏览器major版本 //输出对象 console.log(params);
四、History对象
1.history对象属性
History 对象包含用户(在浏览器窗口中)访问过的 URL
属性 | 作用 |
---|---|
lenght | 返回浏览器历史列表中的URL数量 |
#### 2.history对象方法 | 方法 | 作用 | | :---------- | ---------------------------------------------------------------------------------------------: | | back() | 加载 history 列表中的前一个 URL。 | | forward() | 加载 history 列表中的下一个 URL。。 | | go() | 加载 history 列表中的某个具体页面。参数为数值,正值为下N个页面,负为前N个页面,0是刷新当前页面 |
### 五、Location对象 > Location 对象包含有关当前 URL 的信息。 ```javascript //域名 HTTPS使用端口443,HTTP使用的端口是80 https://www.baidu.com //路径 /s //参数 ?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=nba&oq=markdown%25E6%2580%258E%25E4%25B9%2588%25E4%25BB%25A3%25E7%25A0%2581%25E6%258A%2598%25E5%258F%25A0&rsv_pq=dbfa6388001a16eb&rsv_t=562bnZuR%2FQ1DjrmRVjp4IQo5IExNhjytYVQD426aShEjDIB4Hkou1Y2hwzg&rqlang=cn&rsv_enter=1&rsv_sug3=3&rsv_sug1=2&rsv_sug7=100&rsv_sug2=0&rsv_dl=tb&inputT=489&rsv_sug4=490 //锚点 #1
#### 1. Location对象属性
| 属性 | 作用 |
| :------- | --------------------------------------------------------: |
| hash | 设置或返回从井号 (#) 开始的 URL(锚)(可以用来做单页面) |
| host | 设置或返回主机名的URL端口号 |
| href | 设置或返回完整的url地址 |
| pathname | 设置或返回当前url的路径部分 |
| protocol | 设置或返回当前 URL 的协议 |
| search | 设置或返回从问号 (?) 开始的 URL(查询部分) |
#### 2.Location 对象方法
| 属性 | 作用 |
| :-------------- | --------------------------------------------------------------: |
| assign() | 加载新的文档。 |
| reload(‘force’) | 重新加载当前文档。参数可选,不填或填 false 则取浏览器缓存的文档 |
| replace() | 用新的文档替换当前文档。 |