有时候，我们想通过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. ELT工具Kettle之CDC（Change Data Capture）实现实例

    ETL过程的第一步就是从不同的数据源抽取数据并把数据存储在数据的缓存区.这个过程的主要挑战就是初始加载数据量大和比较慢的网络延迟.在初始加载完成之后,不能再把所有数据重新加载一遍,我们需要的只是变化的 ...

  2. HTML5 简单实现刮刮乐效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. js让菜单栏一直悬浮在顶部，经典代码

    js让菜单栏一直悬浮在顶部,经典代码 很简单,你只需要把下面代码放到js中:$(function(){                //获取要定位元素距离浏览器顶部的距离        var na ...

  4. Highcharts 异步加载数据曲线图表

    导入 data.js 文件 异步加载数据需要引入以下js 文件: <script src="http://code.highcharts.com/modules/data.js&quo ...

  5. ViewDragHelper详解

    2013年谷歌i/o大会上介绍了两个新的layout: SlidingPaneLayout和DrawerLayout,现在这俩个类被广泛的运用,其实研究他们的源码你会发现这两个类都运用了ViewDra ...

  6. 关于ajax网络请求的封装

    // 封装的ajax网络请求函数// obj 是一个对象function AJAX(obj){ //跨域请求        if (obj.dataType == "jsonp") ...

  7. c标签的使用方法

    1. c:forEach <c:forEach items="> 注意varStatus相当于for循环计数器,从1开始,用${varStatus.count}获得计数器的值.而 ...

  8. C# \\u8888类型的unicode转换为字符串方法

    1.双斜杠\\ 处理: 2.将编码分组,将编码转换为int,再转换为char. string sss = "\\u6c88\\u9633"; '; string[] arr = a ...

  9. Ueditor使用方法

    1.到百度下载文件,有各种版本.下载.net版本 2.将所需文件导入工程中 分别是:themes文件夹.third-party文件夹.ueditor.all.min.js.ueditor.config ...

  10. Collection使用方法

    package cn.stat.p3.conection.demo; import java.util.ArrayList; import java.util.Collection; import j ...