Window open() 方法

定義和用法

open() 方法會打開新的瀏覽器窗口或新選項卡，具體取決于您的瀏覽器設置和參數值。

另請參閱：

close() 方法

實例

例子 1

在新的瀏覽器選項卡中打開 "www.codew3c.com"：

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

親自試一試

頁面下方提供更多實例。

語法

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.codew3c.com", "_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.codew3c.com/");

親自試一試

例子 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>");  // 創建新窗口的窗口中的文本

親自試一試