1、open() 方法
使用 window 对象的 open() 方法,可以打开一个新窗口,该方法的返回值为新建的 window 对象,使用这个 window 对象可以引用新建的窗口。用法如下:
window.open(URL,name,features,replace);
//参数说明如下:
//URL:可选字符串,声明在新窗口中显示文档的URL。如果忽略,或者为空,则新窗口就不会显示任何文档。
//name:可选字符床,声明新窗口的名称。这个名称可以做标记和
特征 | 说明 |
channelmode = yes | no | 1 | 0 | 是否使用剧院模式显示窗口。默认为no。 |
directories = yes | no | 1 | 0 | 是否添加目录按钮。默认为yes。 |
fullscreen = yes | no | 1 | 0 | 是否使用全屏模式显示浏览器。默认是no。处于全屏模式的窗口必须同时处于剧院模式。 |
height = pixels | 窗口文档显示区的高度。以像素计。 |
left = pixels | 窗口的x坐标。以像素计。 |
location = yes | no | 1 | 0 | 是否显示地址字段。默认是yes。 |
menubar = yes | no | 1 | 0 | 是否显示菜单栏。默认是yes。 |
resizable = yes | no | 1 | 0 | 窗口是否可调节尺寸。默认是yes。 |
scrollbars = yes | no | 1 | 0 | 是否显示滚动条。默认是yes。 |
status = yes | no | 1 | 0 | 是否添加状态栏。默认是yes。 |
titlebar = yes | no | 1 | 0 | 是否显示标题栏。默认是yes。 |
toolbar = yes | no | 1 | 0 | 是否显示浏览器的工具栏。默认是yes。 |
top = pixels | 窗口的y坐标。 |
width = pixels | 窗口的文档显示区的宽度。以像素计。 |
下面例子演示打开窗口和原窗口之间的关系。
myWindow = window.open();
//打开新的空白窗口
myWindow.document.write("这是新打开的窗口");
//在新的窗口中输出提示信息
myWindow.opener.document.write("这是原来的窗口");
//在原窗口中输出提示信息
alert(myWindow.opener == window);
//检测window.opener属性值,返回true
虽然弹出窗口由一个指针(opener)指向打开它的窗口,但是原始窗口中并没有这样的指针指向弹出窗口。窗口并不跟踪已打开的弹出窗口,因此必要时只能手动实现跟踪。
有些浏览器(如Chrome)会在独立的进程中运行每个标签页。当一个标签页打开另一个标签页时,如果两个 window 对象之间需要通信,那么新标签页就不能运行在独立的进程中。在 Chrome 中将新建的标签页的 opener 属性设置为 null,即表示在单独的进程中运行新的标签页,代码如下:
myWindow = window.open();
myWindow.opener = null;
将 opener 属性设置为 null,这样新建的标签页就无法余打开它的标签页通信。标签页之间的联系一旦切断,将无法恢复。
2、close() 方法
【JavaScript BOM操作 使用window对象 → 打开和关闭窗口(open() / close() 方法)】使用 window 对象的 close() 方法可以关闭一个窗口。例如:要关闭一个新建的 w 窗口,可以使用下面的方法来完成。
w.close();
//如果在打开窗口内部关闭自身窗口,则应该使用如下方法完成
window.close();
使用 window.closed 属性可以检测当前窗口是否关闭,如果关闭则返回 true,否则返回 false。
下面例子演示了如何自动弹出一个新窗口,然后设置一段时间之后自动关闭该窗口,同时允许用户单机页面超链接,更换弹出窗口内显示的网页 URL。
var url = "http://www.baidu.com";
var features = "height=500,width=500,top=100,left=100,toolbar=no,menubar=no,scrollbars=no,resizable=no"
document.write('切换到百度首页');
var me = window.open(url,"newW",features);
setTimeout(function(){
if(me.closed){
alert("创建的窗口已关闭");
}else{
me.close();
}
},5000);
//延迟5000毫秒自动关闭
很多浏览器会禁用 JavaScript 弹出窗口,如果在浏览器禁止的情况下,使用 open() 方法打开新窗口,将会抛出一个异常,说明打开窗口失败。为了避免此类问题,同时为了了解浏览器是否支持禁用弹窗行为,可以使用如下代码检测。
var error = false;
try{
var w = window.open("http://baidu.com/","_blank");
if(w == null){
error = true;
}
}catch(ex){
error = true
}
if(error){
alert("浏览器禁用弹出窗口");
}
推荐阅读
- 操作系统|[译]从内部了解现代浏览器(1)
- web网页模板|如此优秀的JS轮播图,写完老师都沉默了
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)
- javascript|vue使用js-xlsx导出excel,可修改格子样式,例如背景颜色、字体大小、列宽等
- javascript|javascript中的数据类型转换