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

时间：2014-05-19 16:19:43 收藏：0 阅读：465

有时候，我们想通过JS实现一个<a>的新开标签的效果，此时我们想到了window.open方法实现。那么window.open到底应该怎么使用呢？

我们知道window.open可以新开窗口或标签页（这通常和浏览器的设置选项有关），载入指定的URL到新的或已存在的窗口中，并返回代表那个窗口的window对象。window.close可以关闭窗口，但是只能自动关闭JS打开的窗口，如果要关闭其他窗口，必须提示用户进行确定或取消操作（这个与浏览器相关，经测IE需要提示才能关闭；其他浏览器不允许自动关闭）。

我们可以直接使用window.open()打开窗口，使用window.close()关闭窗口

<!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。

<!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