一. 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也是背不下来的。