Window open() 方法

定义和用法

open() 方法会打开新的浏览器窗口或新选项卡，具体取决于您的浏览器设置和参数值。

另请参阅：

close() 方法

实例

例子 1

在新的浏览器选项卡中打开 "www.w3school.com.cn"：

window.open("https://www.w3school.com.cn");

亲自试一试

页面下方提供更多实例。

语法

window.open(url, name, features, replace)

参数

参数 描述
url

可选。要打开的页面的 URL。

如果未指定 url，则会打开一个新的空白窗口或选项卡。
name 可选。target 属性或窗口的名称。
features 可选。以逗号分隔的项目列表，无空格。
replace

已弃用。

规定 URL 是创建新条目还是替换历史列表中的当前条目。

支持以下值：

  • true - URL 替换历史列表中的当前文档
  • false - URL 在历史列表中创建新条目

警告：Chrome 在使用 replace 参数时会抛出异常。

name 参数支持以下值：

值 描述
_blank URL 被加载到新窗口或选项卡中。默认。
_parent URL 被加载到父框架中。
_self URL 替换当前页面。
_top URL 替换任何可能加载的框架集。
name 窗口的名称（不指定窗口的标题）。

features 参数支持以下值：

值 描述
fullscreen=yes|no|1|0 是否以全屏模式显示浏览器。默认为否。全屏模式的窗口也必须处于影院模式。仅限 IE。
height=pixels 窗口的高度，以像素计。最小值为 100。
left=pixels 窗口的左侧位置（X 坐标），以像素计。不允许负值。
location=yes|no|1|0 是否显示地址字段。仅限 Opera。
menubar=yes|no|1|0 是否显示菜单栏。
resizable=yes|no|1|0 窗口是否可调整大小。仅限 IE。
scrollbars=yes|no|1|0 是否显示滚动条。仅限 IE、Firefox 和 Opera。
status=yes|no|1|0 是否添加状态栏。
titlebar=yes|no|1|0 是否显示标题栏。除非调用的应用程序是 HTML 应用程序或受信任的对话框，否则将被忽略。
toolbar=yes|no|1|0 是否显示浏览器工具栏。仅限 IE 和 Firefox。
top=pixels 窗口的顶部位置（Y 坐标），以像素计。不允许负值。
width=pixels 窗口的宽度，以像素计。最小值为 100。

返回值

对新窗口的引用，如果调用失败，则为 null。

技术细节

说明

open() 方法将查找已经存在的窗口或者打开新的浏览器窗口。如果 name 参数指定了已经存在的窗口，则返回对该窗口的引用。返回的窗口将显示 url 参数指定的文档，但忽略 features 参数。在只知道窗口名称的情况下，这是 JavaScript 获得对那个窗口引用的唯一方式。

如果没有指定 name 参数，或者它指定的窗口不存在，那么 open() 方法将创建新的浏览器窗口。这个新窗口将显示 url 参数指定的 URL，它的名称由 name 指定，大小以及控件由 features 参数指定。如果 url 是空串，那么 open() 将打开新窗口。

name 参数指定新窗口的名称。这个名称中只能够出现数字、字母或下划线。它可以作为标记 <a> 和 <form> 的 target 属性的值，用来迫使文档在这个指定的窗口中显示。

当使用方法 Window.open() 给已有的指定窗口装载新文档时，可以给它传递 replace 参数，用来声明新文档是在窗口的浏览历史中拥有自己的条目，还是替换当前文档的条目。如果 replace 的值为 true，新文档就会替换旧文档。如果值为 false，或者省略，那么新文档会在窗口的浏览历史中拥有自己的条目。这个参数提供的功能与 Location.replace() 方法 提供的功能非常相似。

请勿混淆 Window.open() 方法与 Document.open() 方法，要使您的代码清晰明白，最好使用 Window.open()，而不要使用 open()。在定义为 HTML 属性的事件句柄中，通常把函数 open() 解释为 Document.open()，因此，在这种情况下，就必须使用 Window.open()。

窗口特性

features 参数是窗口要显示的特性列表，其中各个特性之间用逗号分隔。如果这个可选参数的值为空，或者它被省略，则窗口将显示出所有特性。不过，如果 features 指定了某个特性，那么在这个列表中没有出现的特性就不会在窗口中显示出来。要注意的是，这个字符串不含任何空格或空白符，其中每个元素的格式如下所示：

feature[=value]

对于大多数的特性来说，value 的值是 yes 或 no。这些特性后的等号和 value 值都可以省略，如果出现了该特性，就假定它的 value 值为 yes，如果没有出现，就假定 value 值为 no。不过，特性 width 或 height 的 value 值是必需的，一定要指定它们的像素值。

浏览器支持

所有浏览器都支持 open()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 支持 支持 支持 支持 支持

更多实例

例子 2

在新窗口/选项卡中打开 about:blank 页面：

var myWindow = window.open("", "", "width=200,height=100");

亲自试一试

例子 3

打开名为 "MsgWindow" 的新窗口，并在其中写入一些文本：

var myWindow = window.open("", "MsgWindow", "width=200,height=100");
myWindow.document.write("<p>This is 'MsgWindow'. I am 200px wide and 100px tall!</p>");

亲自试一试

例子 4

用新窗口替换当前窗口：

var myWindow = window.open("", "_self");
myWindow.document.write("<p>I replaced the current window.</p>");

亲自试一试

例子 5

打开新窗口并控制其外观：

window.open("https://www.w3school.com.cn", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");

亲自试一试

例子 6

打开多个标签：

window.open("http://www.google.com/");
window.open("https://www.w3school.com.cn/");

亲自试一试

例子 7

打开新窗口。然后使用 close() 关闭这个新窗口：

function openWin() {
  myWindow = window.open("", "myWindow", "width=200,height=100");   // 打开新窗口
}

function closeWin() {
  myWindow.close();   // 关闭这个新窗口
}

亲自试一试

例子 8

打开新窗口。使用 name 属性返回新窗口的名称：

var myWindow = window.open("", "MsgWindow", "width=200,height=100");
myWindow.document.write("<p>This window's name is: " + myWindow.name + "</p>");

亲自试一试

例子 9

使用 opener 属性返回对创建新窗口的窗口的引用：

var myWindow = window.open("", "myWindow", "width=200,height=100");   // 打开新窗口
myWindow.document.write("<p>This is 'myWindow'</p>");   // 新窗口中的文本
myWindow.opener.document.write("<p>This is the source window!</p>");  // 创建新窗口的窗口中的文本

亲自试一试