JS window.open()打开新窗口
使用 window 对象的 open()
方法可以打开一个新窗口。用法如下:
window.open(url, target, features)
该方法返回值为新创建的 window 对象,使用它可以引用新创建的窗口。
url
可选字符串,声明新窗口需要载入的 url 地址,可以是 web 上的 html 页面也可以是图片文件或者其他任何浏览器支持的文件格式。
如果省略,或者为空,则新窗口就不会显示任何文档。
target
可选字符串,声明新窗口的名称。该字符串可以用来作为超链接 <a> 或表单 <form> 元素的目标属性值。字符串中不能含有空白字符。
如果该参数指定了一个已经存在的窗口,那么 open() 方法就不再创建一个新窗口,而只是返回对指定窗口的引用,在这种情况下,features 参数将被忽略。
features
可选字符串,声明了将要打开的窗口的一些特性 (窗口功能和工具栏),具体说明如下表所示。
如果省略该参数,新窗口将具有所有标准特征。
Features参数
特征 | 说明 |
---|---|
width = pixels | 窗口的文档显示区的宽度,包括滚动条。单位为元素。最小值100。 |
height = pixels | 窗口文档显示区的高度,包括滚动条。单位为像素。最小值100。 |
left = pixels | 窗口的 x 坐标。单位为像素。 |
top = pixels | 窗口的 y 坐标。单位为像素。 |
popup | 打开弹窗。popup=yes 、popup=1 、popup=true 、popup 是一样的效果 |
noopener | 如果设置了此功能,新窗口将不能通过window访问原始窗口,返回null。 |
noreferrer | 如果设置了此功能,新窗口无法获取来源页面的window。 |
- 如果没有启用popup,并且没有声明窗口特性,那么将打开一个选项卡。
noopener
,noreferrer
为打开第三方网址而设置,功能和链接的rel="noopener noreferrer"
一样,避免新窗口访问源窗口的window对象而造成的信息泄露。- 原有的location、menubar、resizable、scrollbars、status、toolbar等tokenizedFeatures属性,现代浏览器已不再支持。
举例
在新窗口打开
打开一个tab并写入内容
可以使用win.document.write();
或 win.document.body.innerHTML = "HTML"
;写入HTML代码
打开一个弹窗,并改写内容
关闭弹窗
本文最后更新时间:2023年3月12日