在 JavaScript 中,我們經常會用到 open() 方法來打開新的窗口或彈出框。open() 可以打開新窗口、新標簽頁或新的彈出框,并可以定義窗口的屬性,如尺寸、位置、是否有工具欄等等。在這篇文章中,我們將詳細介紹 open() 的使用方法,包括具體的參數和返回值。
首先,我們來看一個最基本的例子:
window.open('https://www.baidu.com', '_blank');
這個代碼會打開一個新的空白窗口,把百度官網加載進去。其中第一個參數是要打開的網址,第二個參數是窗口的名稱,如果沒有指定名稱或名稱相同,則會在同一個窗口中打開。
如果我們想指定窗口的尺寸和位置,可以在第二個參數中加上一些屬性:
var windowFeatures = 'left=100,top=100,width=500,height=500'; window.open('https://www.baidu.com', '_blank', windowFeatures);
上面這個代碼會打開一個左上角坐標為 (100,100),尺寸為 500x500 像素的窗口,打開的網址還是百度官網。
如果我們想在同一個窗口中打開網址,可以指定同一個窗口名稱:
window.open('https://www.baidu.com', 'baidu'); window.open('https://www.google.com', 'baidu');
上面這個代碼會在同一個名為“baidu”的窗口中打開兩個網址,第一個網址會被第二個網址覆蓋。
如果我們想關閉某一個窗口,可以使用 close() 方法:
var myWindow = window.open('https://www.baidu.com', 'baidu'); myWindow.close();
上面這個代碼會打開一個名為“baidu”的窗口,然后關閉它。
除了上面提到的參數以外,還可以設置更多的屬性,如:是否有工具欄、地址欄、狀態欄等等。具體的屬性和值可以參考這個表格:
屬性 | 描述 | 可選值 |
---|---|---|
directories | 顯示一個目錄欄 | yes, no |
location | 顯示一個地址欄 | yes, no |
menubar | 顯示一個菜單欄 | yes, no |
resizable | 窗口是否可調整大小 | yes, no |
scrollbars | 顯示滾動條 | yes, no |
status | 顯示一個狀態欄 | yes, no |
toolbar | 顯示一個工具欄 | yes, no |
屬性的值可以是 yes 或 no,代表是否顯示。例如:
var windowFeatures = 'location=yes,toolbar=no'; window.open('https://www.baidu.com', 'baidu', windowFeatures);
這個代碼會打開一個沒有工具欄、有地址欄的窗口。
除了上面提到的方法和屬性以外,還可以使用一些事件,如 beforeunload、load、unload 等等。例如:
var myWindow = window.open('https://www.baidu.com', 'baidu'); myWindow.addEventListener('beforeunload', function(event) { event.preventDefault(); console.log('這個窗口即將關閉!'); });
上面這個代碼會在打開的窗口中注冊一個 beforeunload 事件,表示在關閉窗口之前會觸發這個事件,我們可以在這個事件中寫一些邏輯代碼。
最后,我們說一下 open() 方法的返回值。如果打開的是空白窗口,則返回一個指向該窗口的引用;如果打開的是同名窗口,則返回一個指向該窗口的引用;如果打開的是新標簽頁或彈出框,則返回 null。
至此,我們對于 JavaScript 中 open() 方法的使用方法和示例已經講解完畢。希望本文能夠對你有所幫助!