今天再次谈起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页面内容如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!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页面内容如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!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> |
通过上面介绍的这种方式可以解决，微博等第三方登录无刷新父页面得知返回状态的需求。同时也是解决跨域请求的一个比较好的方式（安全性不知道如何）。测试小例子
今天就分享这么一个小技巧吧~
http://www.cnblogs.com/xiaoheimiaoer/p/4734977.html