有时候，我们想通过JS实现一个<a>的新开标签的效果，此时我们想到了window.open方法实现。那么window.open到底应该怎么使用呢？
我们知道window.open可以新开窗口或标签页（这通常和浏览器的设置选项有关），载入指定的URL到新的或已存在的窗口中，并返回代表那个窗口的window对象。window.close可以关闭窗口，但是只能自动关闭JS打开的窗口，如果要关闭其他窗口，必须提示用户进行确定或取消操作（这个与浏览器相关，经测IE需要提示才能关闭；其他浏览器不允许自动关闭）。
我们可以直接使用window.open()打开窗口，使用window.close()关闭窗口
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html><head><meta charset="utf-8">
<title>window.open和window.close的使用详解</title></head><body><button id="openWindow">打开窗口</button>
<button id="closeWindow">关闭窗口</button>
<script>(function(){
var
$ = function(id) {return
document.getElementById(id);}
var
win = null;
//打开窗口
$(‘openWindow‘).onclick = function() {
win = window.open();
}
//关闭窗口
$(‘closeWindow‘).onclick = function() {
win && win.close();
}
//自动关闭窗口
window.close();
})();</script></body></html> |
window.open(URL, name[, property][, boolean])需要四个参数：
第一个参数URL：新窗口中显示的文档的URL，如果省略了或者为空时，会使用‘about:blank‘
第二个参数name：新窗口的名字，可以配合target使用，如果省略了，会使用‘_blank’（这里需要简单介绍一下：_parent和_top，_parent指的是直接父级窗口，_top指的是*祖先窗口）
第三个参数protery：以逗号分割的可选参数，包含窗口大小和各种属性。如果省略了，那么会用默认的大小和标准的UI组件（显式的调用更像是打开窗口，而不是标签）。这个参数是非标准的，HTML5规范也主张浏览器忽略它。
第四个参数boolean：只有在第二个参数命名的是存在的窗口，才有效。声明了由第一个参数指定的URL，替换窗口浏览历史的当前条目。
window.opener指的是原始窗口，如果没有的话，为null。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!DOCTYPE html><head><meta charset="utf-8">
<title>window.open和window.close的使用详解</title></head><body><button id="openWindow">打开窗口</button>
<button id="closeWindow">关闭窗口</button>
<script>(function(){
var
$ = function(id) {return
document.getElementById(id);}
var
win = null;
//打开窗口
$(‘openWindow‘).onclick = function() {
win = window.open(‘about:blank‘, ‘_blank‘, ‘width=200,height=200‘);
//win.opener指的是新窗口原始窗口
//alert(win.opener === window);
}
//关闭窗口
$(‘closeWindow‘).onclick = function() {
win && win.close();
//主动关闭窗口后win.opener为false
//alert(win.opener === window);
}
//alert(window.opener === window);
//自动关闭窗口
//window.close();
})();</script></body></html> |