有时候，我们想通过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的使用详解的更多相关文章

  1. Window下PHP三种运行方式图文详解,window下的php是不是单进程的？

    Window下PHP三种运行方式图文详解,window下的php是不是单进程的? PHP运行目前为止主要有三种方式: a.以模块加载的方式运行,初学者可能不容易理解,其实就是将PHP集成到Apache ...

  2. 利用window.name+iframe跨域获取数据详解

    详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...

  3. iframe 跨域问题解决方案 利用window.name+iframe跨域获取数据详解

    详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...

  4. 浏览器加载模式：window.onload和$(document).ready()的区别(详解)

    jQuery库文件是在body元素之前加载的,必须等待所有的DOM元素加载后,延迟支持DOM操作,否则就无法获取到. 在延迟等待加载,JavaScript提供了一个事件为load,方法如下: wind ...

  5. window对象的inner/outer/page/screen详解

    innerHeight : 返回窗口的文档显示区的高度,包含工具条与滚动条.说明:ie8以下不支持 outerHeight : 返回窗口的外部高度,包含工具条与滚动条.说明:ie8以下不支持 page ...

  6. Jdk在window环境下的安装与配置详解

    本文为博主原创,转载请注明出处: 1.2  Java程序开发环境的配置 java开发工具包:java开发工具:记事本 IDE,这个只能写小程序,写大程序需要集成开发工具:反编译工具(我们可以在网上找一 ...

  7. window.onload用法详解:

    网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式: 一.将脚本代码放在网页的底端,这样在运行脚本代 ...

  8. Window 对象详解 转自 http://blog.csdn.net/jcx5083761/article/details/41243697

    详解HTML中的window对象和document对象 标签: HTMLwindowdocument 2014-11-18 11:03 5884人阅读 评论(0) 收藏 举报 分类: HTML& ...

  9. Window.open()方法参数详解

    Window.open()方法参数详解 1, 最基本的弹出窗口代码   window.open('page.html'); 2, 经过设置后的弹出窗口   window.open('page.html ...

  10. 详解HTML中的window对象和document对象

    Window -- 代表浏览器中一个打开的窗口: 对象属性 window //窗口自身 window.self //引用本窗户window=window.self window.name //为窗口命 ...

随机推荐

  1. 接上一篇博客（解决-Dmaven.multiModuleProjectDirectory system property is not set. Check $M2_HOME environment variable and mvn script match. ）

    解决-Dmaven.multiModuleProjectDirectory system property is not set. Check $M2_HOME environment variabl ...

  2. (转)OS X Mountain Lion 系统配置 Apache+Mysql+PHP 详细教程

    如果你是一名 Web 开发者,很多时候都需要在本地搭建服务器测试环境,比如 Apache+Mysql+PHP 这样的环境.事实上 Mac OS X 中想要搭建这样的环境很简单,本文我们就会将详细的教程 ...

  3. 你需要知道的九大排序算法【Python实现】源码

    #coding: utf-8 #!/usr/bin/python import randomimport math #随机生成0~100之间的数值def get_andomNumber(num): l ...

  4. 【实验 1-2】编写一个简单的 UDP 服务器和 UDPP 客户端程序。程序均为控制台程序窗口。

    1.服务器 #include<winsock2.h> //包含头文件#include<stdio.h>#include<windows.h>#pragma comm ...

  5. android之字体阴影效果

    今天刚刚好做了个字体阴影的效果,感觉加上了阴影的效果立体感十足啊!写了个简单的demo与大家分享下!主要是以下四个属性 android:shadowColor  阴影的颜色  android:shad ...

  6. [置顶] .net技术类面试、笔试题汇总1

    1.简述 private. protected. public. internal 修饰符的访问权限. private : 私有成员, 在类的内部才可以访问. protected : 保护成员,该类内 ...

  7. （3）选择元素——（9）为交替的列加样式（Styling alternate rows）

    Two very useful custom selectors in the jQuery library are :oddand :even. Let's take a look at how w ...

  8. sql列转行

    1.需要实现一个单行的统计报表 思路先用一个union查出单列,然后再把单列转成单行 2.实现 SELECT MAX(CASE WHEN type = 1 THEN num ELSE 0 END) A ...

  9. Win7 64位下配置Qt5.3和Wincap

         最近在学网络编程,想在windows下用Qt做个网络抓包工具,就要用到WinPcap,而我的电脑的系统是Win7 64位,qt版本是Qt 5.3.1 for Windows 64-bit ( ...

  10. java开发webservice的几种方式

    webservice的应用已经越来越广泛了,下面介绍几种在Java体系中开发webservice的方式,相当于做个记录. 1.Axis2 Axis是apache下一个开源的webservice开发组件 ...