window.open的小技巧分享


    今天再次談起window.open是因為發現了一個比較好玩的小技巧,詳細內容我們稍后詳細說明。
 
    聊到window.open,不得不說明一下他的使用方法,主要有兩種形式:
 
  • window.open()沒有任何參數,這種方式可以新標簽打開頁面
  • window.open(url, name, pars),帶有參數的可以在當前頁面打開窗口
 
    詳細的使用方法,之前有過介紹,如果想了解,可以 點擊這里
 
    知道了如何使用,接下來介紹幾個特別的屬性和方法(下面所說到的都是同域頁面):
 
  1. window.open()打開的窗口或者新標簽返回窗口的window對象
  2. 在新窗口里也可以取到父窗口(執行window.open的環境)的window對象,通過window.opner
  3. window.close()方法可以關閉窗口
  4. 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>

 
    通過上面介紹的這種方式可以解決,微博等第三方登錄無刷新父頁面得知返回狀態的需求。同時也是解決跨域請求的一個比較好的方式(安全性不知道如何)。 測試小例子
 
    今天就分享這么一個小技巧吧~


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM