有时候，我们想通过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. http断点续传原理：http头 Range、Content-Range

    所谓断点续传,也就是要从文件已经下载的地方开始继续下载.在以前版本的 HTTP 协议是不支持断点的,HTTP/1.1 开始就支持了.一般断点下载时才用到 Range 和 Content-Range 实 ...

  2. POJ 2513 Colored Sticks - from lanshui_Yang

    题目大意:给定一捆木棒,每根木棒的每个端点涂有某种颜色.问:是否能将这些棒子首位项链,排成一条直线,且相邻两根棍子的连接处的颜色一样. 解题思路:此题是一道典型的判断欧拉回路或欧拉通路的问题,以木棍的 ...

  3. IT English Collection(16) of Message

    1 前言 本文介绍了关于Objective-C中的消息机制,详情如下. 转载请注明出处:http://blog.csdn.net/developer_zhang 2 详述 2.1 原文 A messa ...

  4. Java基础知识强化40：StringBuffer类之StringBuffer的替换功能

    1. StringBuffer的替换功能: public  StringBuffer   replace(int  start,  int  end, String  str): 2. 案例演示: p ...

  5. ubuntu安装python3.5

    ubuntu14.04系统会自带python2.7,请不要卸载它.不同版本的Python可以共存在一个系统上. 卸载之后,桌面系统会被影响. (1)sudo add-apt-repository pp ...

  6. C#。1 数据类型，常量变量，类型转换

    C#. 一.数据类型 1,字符串类型(string) .放入一串字符串,需要用""引起来. 列如: string a ="999"; 2,整型 (int).   ...

  7. C#基础枚举的设计

    枚举分为:简单枚举和标记枚举(为了枚举值位操作) 标记枚举的用法:

  8. C# Dictionary 应用

    1.字典定义并添加数据 Dictionary<string, string> dic = new Dictionary<string, string>(); dic.Add(& ...

  9. OpenXML_导入Excel到数据库

    (1).实现功能:通过前台选择.xlsx文件的Excel,将其文件转化为DataTable和List集合 (2).开发环境:Window7旗舰版+vs2013+Mvc4.0 (2).在使用中需要用到的 ...

  10. js 日期控件 可以显示为和历

    日期控件的js <!-- /** * Calendar * @param beginYear 1990 * @param endYear 2010 * @param language 0(zh_ ...