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、窗口目标、一个特性字符串、一个布尔值

【参数】

1. 要加载的URL

<button id="btn">按钮</button>
<script>
  btn.onclick = function() {
    window.open('https://www.86886.wang')
  }
</script>

默认在新窗口打开

2. 窗口目标

窗口目标可以是_self、_parent、_top、_blank，也可以是已有窗口或者框架的名称

<button id="btn">按钮</button>
<script>
  btn.onclick = function() {
    window.open('https://www.86886.wang', '_self')
  }
</script>

3. 特性字符串

特性字符串是一个逗号分隔的设置字符串，表示在新窗口中都显示哪些特性

<button id="btn">按钮</button>
<script>
  btn.onclick = function() {
    window.open('https://www.86886.wang', '_blank', ' 500,height: 500,top: 200,left: 0')
  }
</script>

4. 布尔值

布尔值表示新页面是否取代浏览器历史记录中当前加载页面，默认值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>