有时候，我们想通过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. CSS常用操作-分类

  2. 【C#通用类】日志记录类

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Tex ...

  3. [RxJS] Observables can complete

    The Observer object has the functions next() and error(). In this lesson we will see the other (and ...

  4. 减少iOS应用程序安装包大小

    安装包优化大小方法: <资源优化> 1.去除无用资源 通过几次项目的升级后,项目中会出现一些没有用到的图片.这些图片在我们导入到项目中后,之后项目升级过程后并没有再次用到. 那这些图片我们 ...

  5. linux stat命令

    在Linux中,文件没有“创建时间”这个说法.Linux中的文件的时间属性只有三个:atime(Access time).mtime(Modified time).ctime(Change time) ...

  6. c语言数组小练习

    //查找数组中最大的值: #include<stdio.h> int main01() { , , , , , , , , , ,,}; ]; int i; ;i < ]);i++) ...

  7. 【转】IOS缓存机制详解

    人魔七七:http://www.cnblogs.com/qiqibo/ 为什么要有缓存 应用需要离线工作的主要原因就是改善应用所表现出的性能.将应用内容缓存起来就可以支持离线.我们可以用两种不同的缓存 ...

  8. 网页JavaScript2

    window.close()     关闭网页, window.opener.close()    关闭打开当前窗口的源窗口 间隔与延迟 window.setlnterval("执行代码&q ...

  9. Cretiria查询应用(二)

    1.条件查询,动态查询 public void conditionQuery(){ Session session=null; try { session=HibernateUtil.currentS ...

  10. (转)passwordStrength 基于jquery的密码强度检测代码使用介绍

    使用很简单. 代码如下: $('#pass').passwordStrength();  XHTML 代码如下: <p><label>请输入密码:</label>  ...