JS之BOM篇-window窗口操作
窗口即window对象,大多数浏览器都可以打开多个标签页,每个标签页都有自己的window对象
以下只介绍所有浏览器都支持的window对象的属性和方法
属性
outerWidth、outerHeight
outerWidth和outerHeight属性用于表示浏览器窗口本身的尺寸
console.log(window.outerWidth)
console.log(window.outerHeight)
// chrome: 1280 800
// firefox: 1280 800
说明:Mac电脑的分辨率是1280*800,浏览器全屏模式下测试结果
innerWidth、innerHeight
innerWidth和innerHeight属性用于表示页面大小,实际上等于浏览器窗口尺寸大小减去浏览器自身边框及菜单栏、地址栏、状态栏等的宽度
console.log(window.innerWidth) // 1280
console.log(window.innerHeight) // 298
注意: 由于<iframe>
本身也有window属性,如果页面中存在框架,那么框架中的innerWidth和innerHeight属性指的是框架本身的innerWidth和innerHeight属性
方法
open()
window.open()方法可以导航到一个特定的URL,也可以打开新的浏览器窗口。该方法接收四个参数:要加载的URL、窗口目标、一个特性字符串、一个布尔值
【参数】
- 要加载的URL
<button id="btn">按钮</button>
<script>
btn.onclick = function() {
window.open('https://www.86886.wang')
}
</script>
默认在新窗口打开
- 窗口目标
窗口目标可以是_self、_parent、_top、_blank,也可以是已有窗口或者框架的名称
<button id="btn">按钮</button>
<script>
btn.onclick = function() {
window.open('https://www.86886.wang', '_self')
}
</script>
- 特性字符串
特性字符串是一个逗号分隔的设置字符串,表示在新窗口中都显示哪些特性
<button id="btn">按钮</button>
<script>
btn.onclick = function() {
window.open('https://www.86886.wang', '_blank', 'width: 500,height: 500,top: 200,left: 0')
}
</script>
- 布尔值
布尔值表示新页面是否取代浏览器历史记录中当前加载页面,默认值false,即创建一条新的记录。该参数只有在第二个参数命名的是一个存在的窗口时才有用
【返回值】
open()方法的返回值是新窗口的window对象
<button id="btn">按钮</button>
<script>
btn.onclick = function() {
var w = window.open();
w.document.body.innerHTML = 'Hello'
}
// 新窗口的url显示结果:about:blank
</script>
新创建的window对象有一个opener属性,保存着打开它的原始窗口对象
<button id="btn">按钮</button>
<script>
btn.onclick = function() {
var w = window.open();
console.log(w.opener === window); // true
}
</script>
【过滤拦截】
通常,open()方法只有当用户手动触发的时候才会调用。尝试在浏览器初始载入时开启一个弹出窗口时,通常会失败。如果被拦截,则返回值是null
<script>
var w = window.open();
console.log(w); // null
</script>
close()
window.close()方法用于关闭通过window.open()方法打开的新窗口
<button id="btn">打开</button>
<button id="btn2">关闭</button>
<script>
var w;
btn.onclick = function() {
w = window.open();
}
btn2.onclick = function() {
if(w) { w.close() };
}
</script>
新窗口的对象有一个closed属性,用于检测是否被关闭
<button id="btn">打开</button>
<button id="btn2">关闭</button>
<script>
var w;
btn.onclick = function() {
w = window.open();
console.log(w.closed); // false
}
btn2.onclick = function() {
if(w) { w.close() };
console.log(w.closed); // true
}
</script>