有时候,我们想通过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 入门

    以下内容均来自 慕课网 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等 ...

  2. 解决Xcode8 输出一对字符串问题

    在Product->Scheme->Edit Scheme->Run->Environment Variables下添加键:OS_ACTIVITY_MODE, 值:Disabl ...

  3. JavaScript 类私有方法的实现

    一:将私有方法移出模块,因为模块内部的所有方法都是对外可见的. class Widget { foo (baz) { bar.call(this, baz); } // ... } function ...

  4. 性能计数器自动收集-logman

    1.在桌面云测试中,往往需要模拟并发连接中服务器的性能数据,这里主要介绍如何自动收集性能数据 2.创建xxxx.bat文件,文件内容如下: logman create counter test -cf ...

  5. php图片上面写文字,输出图片

    <?php /* param $image 图象资源 param size 字体大小 param angle 字体输出角度 param showX 输出位置x坐标 param showY 输出位 ...

  6. Windows Bridge for iOS: Let’s open this up

    (原文翻译过来的,原文链接http://blogs.windows.com/buildingapps/2015/08/06/windows-bridge-for-ios-lets-open-this- ...

  7. NPOI心得

    一个Excel文件表示为一个IWookbook,Sheet是ISheet,其它细分为IRow,ICell. 2003和2007版本为IWookbook接口的不同实现:HSSFWookbook和XSSF ...

  8. 关于winform主题IrisSkin2的编写

    第一步:首先引用IrisSkin2.dll. 第二步自定义类: /// <summary> /// 窗体主题边界类 /// </summary> public class Fo ...

  9. 关于html控件和服务器控件摁回车后提交按钮的问题

    今天做项目用到,项目是一个洗车系统,刷卡后在焦点出自动触发回车键事件,如,一个文本框,把焦点放入,刷一下卡,文本框自动获取卡号,同时触发回车事件,(就像银行办卡一样),发现刷卡后页面刷新后并没有执行按 ...

  10. [C#]asp.net开发微信公众平台----目录汇总-持续更新

    1.[c#]asp.net微信公众平台开发(1)数据库设计 2.[c#]asp.net微信公众平台开发(2)多层架构框架搭建和入口实现 3.[c#]asp.net微信公众平台开发(3)微信消息封装及反 ...