有时候，我们想通过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. java.lang.String小测试

    还记得java.lang.String么,如果现在给你一个小程序,你能说出它的结果么 public static String ab(String a){ return a + "b&quo ...

  2. 贪心-poj-3040-Allowance

    题目链接: http://poj.org/problem?id=3040 题目意思: 有n种(n<=20)面额的硬币,每种硬币面值能整除比它大的面值.给一个c,告诉每种硬币的面值和数量,求最多能 ...

  3. Gson序列化对象时排除字段

    import com.google.gson.ExclusionStrategy; import com.google.gson.FieldAttributes; /** *Gson序列化对象排除属性 ...

  4. jQuery -&gt; 获取兄弟元�

    获取指定元素的兄弟元素时,能够使用adjacent sibling combinator (+),当中+的两側内容都是selector expression. 假设要获取下例中全部的 h1的直接兄弟元 ...

  5. Adobe/Flash Media Server 5.0 linux 64位系统下的安装

    一.下载 Adobe/Flash MS5.0下载地址: http://fs1.d-h.st/download/00036/VOt/adobemediaserver_5_ls1_linux64.tar. ...

  6. alias

    1.语法:alias[别名]=[指令名称] [root@rusky /]# alias pingm="ping 127.0.0.1"  [root@rusky /]# pingmP ...

  7. （转）根据IP返回对应的位置信息

    其实就是使用了百度的IP库的功能接口,然后处理下就行了,效果图如下: 准备工作: 1.注册成为开度开发者,创建应用获得百度API调用的AK秘钥,百度开发中心地址:http://developer.ba ...

  8. \r \r\n \t 的区别

    http://www.360doc.com/content/12/0530/15/16538_214756101.shtml \n 软回车:       在Windows 中表示换行且回到下一行的最开 ...

  9. ListView自定义滑动条

    /** * 修改默认滑动条 */ private void SetSliderIcon() { try { Field f = AbsListView.class.getDeclaredField(& ...

  10. x++ and ++x

    http://blog.sina.com.cn/s/blog_6c762bb30101ar1w.html 看到个东西,搞不清的时候可以看看 =.=