一. BOM常用的API：
BOM：浏览器对象模型, 是操作浏览器的API
window.console返回console对象的引用，该对象提供了对浏览器调试控制台的访问。
window.history.back 历史记录后退
window.history.forward 历史记录前进
window.history.go(-1) === window.history.back
window.history.go(1) === window.history.forward
(数字绝对值大于1的话，应该只在控制台有效)
window.history.go(-1) === window.history.back
window.innerHeight 获取浏览器窗口的内容区域的高度，包含水平滚动条（如果有的话）
document.location === location //true
document.location === window.location //true
window.location
location属性返回一个只读对象，提供了当前文档的URL信息( 可以操作刷新按钮和地址栏)
比如( 推荐第一种)：
- window.location.href = '//www.baidu.com' 跳转到百度（默认使用当前协议）
- window.location.href = 'http://www.baidu.com'
- window.location.href = 'https://www.baidu.com'
window.location.href = 'wwww.baidu.com' 但是这样是不行的，是跳转的相对路径，也就是 跳转到 www.jianshu.com/www.baidu.com
http://www.jianshu.com/www.baidu.com
另外，浏览器有个小技巧：
document.location = 'http://www.example.com';
// 等价于
document.location.href = 'http://www.example.com';
window.location = '//www.baidu.com‘
对location 直接赋值，默认就是赋值了 location.href
location.protocol 获取协议
location.hostname 获取域名
location.port 获取端口
location.host 获取域名+端口 比如： xxx.com:9124
https://developer.mozilla.org/zh-CN/docs/Web/API/Window?a=1&b=2#xxx
如上所示：
location.pathname 获取路径
"/zh-CN/docs/Web/API/Window"
location.search 获取查询字符串
"?a=1&b=2"
location.hash 获取fragment、锚点
"#xxx"
location.origin 获取网站源头 协议+域名+端口号
综上所述，通过location可以拿到地址栏的所有信息。
window.navigator 获取当前浏览器的各项信息1
window.navigator.userAgent 当前浏览器的用户代理（user agent）字符串
window.name 获取/设置窗口的名称
窗口的名字主要用于为超链接和表单设置目标（targets）
每个窗口的name 是唯一的。
<a href="http://www.baidu.com" target="wang">baidu</a>
<a href="http://www.qq.com" target="wang">qq</a>
window.outerHeight 获取浏览器外部高度
window.parent 获取当前window or subframe 父级的引用
比如 window.parent.name 获取父级的name
window.screen 获取屏幕相关信息
返回与窗口相关联的屏幕对象的引用。
Returns a reference to the screen object
associated with the window.
- window.screen.availHeight 返回浏览器窗口在屏幕上可占用的垂直空间，即最大高度
(除属性栏之外的高度，如果设置隐藏任务栏，则是我的当前分辨率的高度，即height:1080)
- window.screen.availHeight 返回浏览器窗口在屏幕上可占用的垂直空间，即最大高度
- window.screen.availWidth 返回1920 （原理同上）
- window.screen.height 获取屏幕高度（1080）
- window.screen.width 获取屏幕宽度（1920）
- window.screen.colorDepth 获取颜色深度 （24）
永远不要声明全局变量！能不用，全不用
window.self 是window 自身。
window.window 也还是window
全局变量会默认的放在window上，于是
window.parent window.screen 等等属性都被覆盖了，就获取不到了，而是你重新的声明赋值。
比如 var parent = 1 , 这时候 window.parent 就不是window的属性方法了，而就是1.
二. 打开新窗口
window.open(url, windowName, windowFeatures)
参数分别为url、名字、属性
<body>
<button id="button1">Open a window!!!</button>
<script>
button1.onclick = function(){
window.open('http://www.baidu.com')
}
</script>
</body>
但以上不是在当前窗口打开，而是新窗口，想要在当前窗口打开，如下：
button1.onclick = function(){
window.open('http://www.baidu.com', '_self')
// _self 表示当前窗口，a标签里也可以用, 当然a标签默认就是在当前窗口打开，而这里的open 默认是新窗口打开
}
如果想要popup 弹出一个窗口呢？并且有指定的宽高，那么如下：
// 指定第三个可选参数，
button1.onclick = function(){
let f = 'width=400px, height=400px'
window.open('http://www.baidu.com', '_blank', f)
}
// 或者不用 let 直接写在里面，而且省略第二个参数，因为默认就是_blank, 这里如果指定为_self，那么是不会弹出弹出指定大小的窗口的，
而是在原窗口打开，大小和原窗口无异：
button1.onclick = function(){
window.open('http://www.baidu.com', '', 'width=400px, height=400px')
}
A中代码(打开B)：
button1.onclick = function(){
window.open('http://www.baidu.com', '', 'width=400px, height=400px')
}
B中代码(刷新A)：
// 打开我的窗口（A）刷新，opener指的就是A
button1.onclick = function(){
window.opener.location.reload()
}
在页面正中央打开一个指定宽高的窗口
open 的默认是做不到的，但是可以通过JS来实现
//设计API
// 首先声明 $ ，返回array
window.$ = function(){
let array = []
//省略
return array
}
// 完成API：绑定个属性叫 bom，bom 是个对象，对象里面有个函数
$.bom = {
openAtCenter: function(width, height, url){ //用来设置弹窗居中，并能指定宽高
window.open(url, '_blank', `
width=${width}px, height=${height}px,
screenX=${screen.width/2- width/2}px,
screenY=${screen.height/2 - height/2}px
`)
}
}// 上面使用了ES6的模板字符串， `${}` 使用反引号内部可以嵌入表达式
使用API，可以直接把JS部分放在当前页面，也可以单独放在.js文件中，在当前页面用 <script src="xxx.js"></script>引用。
<head>
<script src="bom.js"></script>
</head>
<body>
<button id="button1">获取 a</button>
<script>
button1.onclick = function(){ //调用API
$.bom.openAtCenter(300, 300, 'http://baidu.com')
}
document.write(Math.random()) // 页面写入 随机数 [0,1) 用来检测当前父级是否刷新
</script>
</body>
本篇主要介绍了常用的BOM API, 脑海中有个印象就好，知道有这些API的存在，具体需要用到的时候，多查查文档就好了，毕竟那么多的API也是背不下来的。
网友评论