JavaScript window.open() 開新視窗以及屬性設定

window.open 是 JavaScript 標準的開啟新視窗語法,有時候在網頁上的應用會需要用到另外開啟一個新的視窗,顯示額外的網頁資訊,透過 window.open 的方法,我們可以規定開啟新視窗的各種規格,例如寬度、高度、是否顯示瀏覽器的工具列、是否要顯示 scrollbar... 等,在這篇介紹中,我們將會介紹如何使用 JavaScript 的 window.open() 來開啟新的視窗,新的視窗可以顯示不同的 HTMLPHP 網頁。

JavaScript window.open 開啟新視窗語法
window.open(' 新視窗的網址 ', '新視窗的名稱', config='height=高度,width=寬度');
window.open 的第一個參數"新視窗的網址"是必要項目,可以是網站本身的其他頁面,也可以是其他網站的頁面,而第三個參數 config 用來設定新視窗的寬度、高度以及其他各項視窗的功能設定,常用的設定値請參閱 config 參數表。

window.open config 常用參數表
參數參數值與說明
toolbar指定工具列是否顯示,預設是顯示,如果要設為不顯示,寫法是 toolbar=no。
scrollbars指定 scroll bars 是否顯示,要顯示寫法是 scrollbars=yes,不顯示寫法是 scrollbars=no。
resizable訪客是否可以自己調整視窗大小,預設是可以,如果要設為不能調整,寫法是 resizable=no。
location是否顯示網址列,預設是顯示,如果不要顯示,寫法是 location=no。
menubar是否顯示目錄欄位,預設是會顯示,如果不要顯示,寫法是 menubar=no。
status是否顯示狀態列,預設是顯示,如果不要顯示,寫法是 status=no。
left距離左邊的距離,單位是 pixels。
top距離上面的距離,單位是 pixels。

JavaScript window.open 範例
<a href="#" onclick="window.open(' http://tw.yahoo.com ', 'Yahoo', config='height=500,width=500');">開新視窗</a>
範例輸出結果如以上就是 window.open 的 config 設定値應用,範例僅使用了設定寬度 = 500px 以及高度 = 500px 的效果,你也可以嘗試設定不同的 config 値,例如加入不顯示工具列或不顯示網址欄,也可以與 window.close 搭配設計成一個開啟後又具有關閉功能的新視窗。

[2014.10.3] 勘誤修改、config 參數表中 scrollbars 部分目前已經修改正確,感謝網友米爾克提供正確資訊。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012