window.open和window.close的使用详解

有时候,我们想通过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>

 

  

 
 
 
 
 

window.open和window.close的使用详解,布布扣,bubuko.com

window.open和window.close的使用详解

上一篇:命令行启动win7系统操作部分功能


下一篇:Photoshop 画笔绘制高科技神奇的鹿