JavaScript window.open 開新視窗 - 網頁設計教學站

JavaScript window.open 用來開啟一個新的視窗，是非常普遍的用法，用 window.open 所開啟的新視窗不一定是同網域的內容，也就是可以開啟別的網站內容，透過幾個簡單的參數設定，可以規定所要開啟的視窗呈現樣貌，例如新視窗的長度、寬度、是否要顯示工具列、是否要顯示 scrollbar ... 等，請參閱以下基本語法以及 config 參數介紹。

JavaScript window.open 基本語法

window.open(' 新視窗要顯示的網頁網址 ', ' 新視窗的名稱 ', config=' 其他參數 ');

基本語法中的前兩個參數都是必填項目，最後一個 config 有許多不同的參數值可以使用，第一段中提到的新視窗的長度、寬度、瀏覽器工具列的顯示、scrollbar 的顯示 ... 等，都是在 config 中設定。

JavaScript window.open config 參數介紹

參數	參數值與說明	語法
toolbar	toolbar 顯示控制，預設是要顯示，若不顯示請使用參數值 no	toolbar=no
scrollbars	scroll bars 顯示控制，要顯示可用參數值 yes，若不顯示請使用參數值 no	scrollbars=no scrollbars=yes
resizable	是否同意網友自己調整新視窗的大小，若不同意請使用參數值 no	resizable=no
location	網址欄位顯示控制，預設是要顯示，若不顯示請使用參數值 no	location=no
menubar	目錄欄位顯示控制，預設為要顯示，若不顯示請使用參數值 no	menubar=no
status	狀態列顯示控制，預設為要顯示，若不顯示請用參數值 no	status=no
left	開啟的新視窗靠瀏覽器左邊的距離，單位為 px	--
top	開啟的新視窗靠瀏覽器上邊的距離，單位為 px	--

JavaScript window.open 範例

<div onclick="window.open('http://www.php.net','PHP.NET',config='height=450,width=450,toolbar=no');">
由此開啟一個新視窗
</div>

以上範例顯示

由此開啟一個新視窗

我們可以很容易的從這個範例中看到，DIV 區塊內加入了 onclick 的 JavaScript event 事件去判斷，當網友選擇要開啟一個新視窗，就會觸發 window.open 開啟，至於開啟的內容就是 PHP.NET 官方網站，新視窗的寬度與高度都是 450px。

延伸閱讀

JavaScript window.close 關閉視窗