今天再次談起window.open是因為發現了一個比較好玩的小技巧,詳細內容我們稍后詳細說明。
聊到window.open,不得不說明一下他的使用方法,主要有兩種形式:
- window.open()沒有任何參數,這種方式可以新標簽打開頁面
- window.open(url, name, pars),帶有參數的可以在當前頁面打開窗口
詳細的使用方法,之前有過介紹,如果想了解,可以
點擊這里。
知道了如何使用,接下來介紹幾個特別的屬性和方法(下面所說到的都是同域頁面):
- window.open()打開的窗口或者新標簽返回窗口的window對象
- 在新窗口里也可以取到父窗口(執行window.open的環境)的window對象,通過window.opner
- window.close()方法可以關閉窗口
- window.onunload和window.onbeforeunload事件,監聽窗口關閉情況
了解了上面的使用方法之后,介紹一個很巧妙的使用方式。
一共有兩個頁面:第一個頁面(window.open.html)的功能是新開一個窗口,第二個頁面(window.close.html)為新開窗口的請求的返回信息,可以在第一個頁面中,監聽新開窗口請求的數據。下面分別介紹兩個頁面:
window.open.html頁面內容如下:
<!DOCTYPE> <html> <head> <meta charset="utf-8"> <title>window.open小技巧</title> </head> <body> 我是窗口:window.open <button id="openWindow">點擊新開窗口</button> <script type="text/javascript"> (function() { var openWindowEl = document.getElementById('openWindow'); var newWindow; var data; window.windowName = 'window.open'; openWindowEl.onclick = function() { newWindow = window.open('window.close.php', '_blank', 'width=500,height=500;'); //需要window.close.html js正常執行之后才行 /*setTimeout(function() { console.log(newWindow.userName); }, 1000);*/ newWindow.onbeforeunload = function() { userName = newWindow.windowName; data = newWindow.data; } newWindow.onunload = function() { alert(userName); if(data.errno == 0) { alert(data.errmsg); }else { alert(data.errmsg); } } }; })(); </script> </body> </html>
window.close.html頁面內容如下:
<!DOCTYPE> <html> <head> <meta charset="utf-8"> <title>window新開窗口</title> </head> <body> 我是窗口:window.close <script type="text/javascript"> (function() { window.windowName = 'window.close'; if(Math.random() > 0.5) { window.data = { errno: 0, errmsg: '成功~' }; }else { window.data = { errno: 1, errmsg: '數據異常~' }; } setTimeout(function() { //拿到的是父窗口的window alert(window.opener.windowName); }, 100); setTimeout(function() { window.close(); }, 1000); })(); </script> </body> </html>
通過上面介紹的這種方式可以解決,微博等第三方登錄無刷新父頁面得知返回狀態的需求。同時也是解決跨域請求的一個比較好的方式(安全性不知道如何)。
測試小例子
今天就分享這么一個小技巧吧~