参考手册
Window 对象
focus()
print()
返回 Window 对象

Window open() 方法

实例

在浏览器的新选项卡中打开 "cankaoshouce.com" :

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>点击按钮打开一个新窗口</p>
  7. <button onclick="myFunction()">试一试</button>
  9. <script>
  10. function myFunction() {
  11.   window.open("https://cankaoshouce.com");
  12. }
  13. </script>
  15. </body>
  16. </html>
运行一下

定义与用法

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

提示：使用 close() 方法关闭窗口。

浏览器支持

方法
open()YesYesYesYesYes

语法

  1. window.open(URL, name, specs, replace)

参数值

参数描述
URL可选。指定要打开的页面的 URL。如果未指定 URL，将打开一个新的窗口/选项卡，其中包含 about:blank
name可选。指定窗口的目标属性或名称。支持以下值:
  • _blank - URL 已加载到新窗口或选项卡中。这是默认值
  • _parent - URL 被加载到父框架 frame 中
  • _self - URL 替换当前页面
  • _top - URL 替换可能加载的任何框架集 frameset
  • name - 窗体的名称 (备注: name 不指定新窗口的标题)
specs可选。 以逗号分隔的项目列表，无空格。支持以下值:

channelmode=yes|no|1|0是否要在影院模式显示 window。默认是 no。仅适用于 IE
directories=yes|no|1|0 已弃用。 是否添加目录按钮。默认值为 yes。仅限 IE
fullscreen=yes|no|1|0是否以全屏模式显示浏览器。默认值为 no。全屏模式下的窗口也必须处于影院模式。仅适用于 IE
height=pixels窗口的高度。最小值为 100
left=pixels窗口的左侧位置。不允许负值
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窗口的顶部位置。不允许负值
width=pixels窗口的宽度。最小值为100

replace

Deprecated

指定 URL 是创建新条目还是替换历史记录列表中的当前条目。支持以下值:
  • true - URL 替换历史记录列表中的当前文档
  • false - URL 在历史记录列表中创建新条目

Warning

Chrome 在使用此参数时引发异常

原文: Bugs Chromium Issue 1164959。

技术细节

返回值:对新创建的窗口的引用，如果调用失败，则为 null

更多实例

实例

在新窗口/选项卡中打开空白页 about:blank:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>单击该按钮可在宽 200px、高 100px 的新浏览器窗口中打开空白页面 about&#58;blank。</p>
  7. <button onclick="myFunction()">试一试</button>
  9. <script>
  10. function myFunction() {
  11.   var myWindow = window.open("", "", "width=200,height=100");
  12. }
  13. </script>
  15. </body>
  16. </html>
运行一下
实例

在新窗口/选项卡中打开空白页 about:blank, 然后写一些文本进去:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>单击按钮打开一个名为 "MsgWindow" 的新窗口，其中包含一些文本。</p>
  7. <button onclick="myFunction()">试一试</button>
  9. <script>
  10. function myFunction() {
  11.   var myWindow = window.open("", "MsgWindow", "width=200,height=100");
  12.   myWindow.document.write("<p>这是 'MsgWindow'. 200px 宽，100px 高!</p>");
  13. }
  14. </script>
  16. </body>
  17. </html>
运行一下
实例

用新窗口替换当前窗口:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>单击按钮将新窗口放入当前窗口。</p>
  7. <button onclick="myFunction()">试一试</button>
  9. <script>
  10. function myFunction() {
  11.   var myWindow = window.open("", "_self");
  12.   myWindow.document.write("<p>替换了当前窗口。</p>");
  13. }
  14. </script>
  16. </body>
  17. </html>
运行一下
实例

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

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>单击该按钮可打开具有某些设置的新窗口。</p>
  7. <button onclick="myFunction()">试一试</button>
  9. <script>
  10. function myFunction() {
  11.   window.open("https://cankaoshouce.com", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");
  12. }
  13. </script>
  15. </body>
  16. </html>
运行一下
实例

打开大量窗口选项卡:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>单击该按钮可打开多个选项卡。</p>
  7. <button onclick="myFunction()">打开窗口</button>
  9. <script>
  10. function myFunction() {
  11.   window.open("http://www.google.com/");
  12.   window.open("https://www.baidu.com/");
  13.   window.open("https://cankaoshouce.com/");
  14. }
  15. </script>
  17. </body>
  18. </html>
运行一下
实例

打开一个新窗口。使用 close() 关闭新窗口:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <button onclick="openWin()">打开 "myWindow"</button>
  6. <button onclick="closeWin()">关闭 "myWindow"</button>
  8. <script>
  9. var myWindow;
  11. function openWin() {
  12.   myWindow = window.open("", "myWindow", "width=200,height=100");
  13.   myWindow.document.write("<p>这是 'myWindow'</p>");
  14. }
  16. function closeWin() {
  17.   myWindow.close();
  18. }
  19. </script>
  21. </body>
  22. </html>
运行一下
实例

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

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>单击按钮创建一个窗口，然后显示新窗口的名称。</p>
  7. <button onclick="myFunction()">试一试</button>
  9. <script>
  10. function myFunction() {
  11.   var myWindow = window.open("", "MsgWindow", "width=200,height=100");
  12.   myWindow.document.write("<p>这个窗体的名字是: " + myWindow.name + "</p>");
  13. }
  14. </script>
  16. </body>
  17. </html>
运行一下
实例

使用 opener 属性返回对创建新窗体的引用:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>单击按钮在新窗体和原（父）窗口中写入一些文本。</p>
  7. <button onclick="myFunction()">试一试</button>
  9. <script>
  10. function myFunction() {
  11.   var myWindow = window.open("", "myWindow", "width=200,height=100");
  12.   myWindow.document.write("<p>这是 'myWindow'</p>");
  13.   myWindow.opener.document.write("<p>这是原窗体!</p>");
  14. }
  15. </script>
  17. </body>
  18. </html>
运行一下
focus()
print()

分类导航