BOM window 对象【1】open() close()方法 name closed opener 属性
BOM window 对象
window 对象是全局对象，所有在全局作用域中声明的变量、对象、函数都会变成 window 对象的属性、对象、方法，处于所有对象的顶级。window对象，不需要通过 new 关键字创建实例，只需要通过“对象名.成员”的格式访问其属性和方法。
HTML DOM 的 document 也是 window 对象的属性之一：
window.document.getElementById("header");
等同于：
document.getElementById("header");
由此，我们可以明确规律：
- 全局变量 是 window 对象的属性。
- 全局函数 是 window 对象的方法。
基于 window 对象是全局对象的概念，它下属的所有全局变量和函数都是它的属性，并且所有原生的构造函数及其它函数都存在与它的命名空间下，因此，在调用 window 对象的方法和属性时，可以省略 window 对象的引用。但在局部作用域中定义不会归入 window 对象名下，只有在全局作用域中定义才会被自动归入到 window 对象名下。
<script>
var NameNew="Hevate"; //定义变量
var ArrNew=new Array("one","two","three"); //定义对象
function MyName(){ // 定义函数，不会直接执行，需要经过调用
var NameNew = "liu"
console.log("因为 MyName() 函数存在于全局作用域中，所以 this 被映射到 window，this.MyName 即是 window.MyName")
console.log("MyName() 不加上 window 或 this："+NameNew)
console.log("MyName() 加上 this："+this.NameNew)
console.log("MyName() 加上 window："+window.NameNew)
}
/* 输出变量*/
window.console.info("对于变量，加上 window 输出："+NameNew) //输出 Hevate
console.info("对于变量，不加 window 同样输出："+NameNew)
/* 输出对象*/
window.console.log("对于对象，加上 window 输出："+ArrNew) //输出 one,two,three
console.log("对于对象，加上 window 输出结果相同："+ArrNew)
/* 输出函数*/
window.MyName() //调用 函数 MyName()
MyName() //调用 函数 MyName()
script>
因为 MyName() 函数存在于全局作用域中，所以 this 被映射到 window，this.MyName 即是 window.MyName
open() 方法
用于打开一个新的浏览器窗口或查找一个已命名的窗口，open() 方法中只包含两个及以下属性时，在新标签页打开，三个及以上时，在新窗口打开。
基本语法 window.open(URL,name,specs,replace)
- URL
指定打开窗口或页面的 URL，如果未指定，则打开一个空白窗口 - name
指定 target 属性或窗口的名称 - specs
指定窗口的相关属性，比如指定新打开窗口的 width，height 属性 - replace
规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。true - URL 替换浏览历史中的当前条目；false - URL 在浏览历史中创建新的条目。
demo open() 跳转新页面和新窗口
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<button onclick="new_win()">在新的浏览器窗口中打开百度地址button>
body>
<script type="text/javascript">
function new_win(){
//open()方法中只包含两个及以下属性时，在新标签页打开，三个及以上时，在新窗口打开
open("http://www.baidu.com") // 在新标签页打开
open("http://www.baidu.com","","width=200px,height=200px") // 在新窗口打开
}
script>
html>
demo open() 跳转新窗口，并清空当前页面
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<button onclick="new_win()">打开新窗口后，源窗口内容清空button>
body>
<script type="text/javascript">
function new_win(){
open("","","width=400px,height=200px,left=500px") // 在新窗口打开
document.write("") //清空源窗口的内容
}
script>
html>
close() 方法
用于关闭浏览器窗口，基本语法 window.close()
demo close() 关闭新打开的窗口
<html>
<head>
<meta charset="UTF-8">
<title>源窗口title>
head>
<body>
<button onclick="new_win()">打开新窗口后，源窗口内容清空button>
<button onclick="close_win()">关闭新打开的窗口button>
body>
<script type="text/javascript">
var MyNew;
function new_win(){
MyNew = open("","新窗口","width=400px,height=200px,left=500px") // 在新窗口打开
MyNew.document.getElementsByTagName("body")[0].innerHTML = MyNew.name
}
function close_win(){
MyNew.close() // 关闭新打开的窗口
}
script>
html>
name 属性
设置或返回存放窗口的名称的一个字符串，基本语法 window.name
closed 属性
返回一个布尔值，判断窗口是否已经关闭，基本语法 window.closed
opener 属性
返回对创建该窗口的 Window 对象的引用，当使用 window.open() 打开一个窗口，您可以使用此属性返回来自目标窗口源（父）窗口的详细信息，因此 window.opener.close() 可以关闭源（父）窗口，基本语法 window.opener
<html>
<head>
<meta charset="utf-8" />
<title>源窗口title>
<style type="text/css">
b{cursor: default;}
button{width: 300px;margin: 5px auto;padding: 5px 0;}
button:active{background: red;}
.open{border: 0;background: lavenderblush;color: black;}
.close{border: 0;background: lawngreen;color: black;}
.clear{border: 0;background: whitesmoke;color: black;}
style>
head>
<body style="width: 50%;margin: 50px auto;">
<center>
<hr/>
<p>window 对象p>
<p>window 对象，即浏览器窗口对象，是一个全局对象，处于所有对象的顶级p>
<pre>window 对象不需要通过 new 关键字来创建，只需要通过
“对象名.成员”的格式访问其属性和方法pre>
<hr/>
<button class="open" onclick="page_name()">在新打开的标签页中输出新窗口的窗口名称button>
<button class="open" onclick="win_name()">在新打开的窗口中输出新窗口的窗口名称button>
<button class="close" onclick="page_close()">关闭新打开的标签页button>
<button class="close" onclick="win_close()">关闭新打开的窗口button>
<button class="clear" onclick="clear_ora()">点击跳转百度，并清空源窗口页面button>
<button class="clear" onclick="clearOpen_ora()">点击跳转百度，并通过 opener 属性清空源窗口页面button>
center>
<hr />
body>
<script>
var NewPage; //定义存放新标签页的变量
var NewWin; //定义存放新窗口的变量
function page_name(){
//open()方法中只包含两个属性时，在新标签页打开
NewPage = window.open("","MyPageName")
NewPage.document.write("新标签页的名称："
+NewPage.name+"")
}
function win_name(){
//open()方法包含三个及以上的属性时，在新的窗口打开
NewWin = window.open("","MyWindowName","width=400px,height=300px")
NewWin.document.write("新窗口的名称："
+NewWin.name+"")
}
function page_close(){
if(NewPage){
NewPage.close() /* NewPage 执行了 close() 方法之后，依然是存在的
因此，及时关闭了窗口，下面一条语句依然会正常输出，不会报错 NewPage 未定义*/
console.log(NewPage.closed) //输出 true ，表明新标签页已经被关闭了
}else if(NewPage == undefined){ // 当还没有打开过新标签页时，NewPage 处于未定义状态
alert("The NewPage hasn't opened!")
}
if(NewPage.closed == true){
alert("新标签页已经被关闭了")
}
}
function clear_ora(){
open("http://www.baidu.com","","left=300px,width=300px,height=200px")
document.write("") // 清空当前页面
}
function clearOpen_ora(){
NewWin = open("http://www.baidu.com","","left=300px,width=300px,height=200px")
NewWin.opener.document.write("通过 opener 属性清空源窗口页面")
}
script>
html>
Reference
JavaScript Window - 浏览器对象模型
Window open() 方法
Window close() 方法
Window name 属性
Window closed 属性
Window opener 属性