window.open的小技巧分享 – 黑MAO

    今天再次谈起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>


 
    通过上面介绍的这种方式可以解决,微博等第三方登录无刷新父页面得知返回状态的需求。同时也是解决跨域请求的一个比较好的方式(安全性不知道如何)。测试小例子
 
    今天就分享这么一个小技巧吧~

本文链接:window.open的小技巧分享,转载请注明。



You must enable javascript to see captcha here!

Copyright © All Rights Reserved · Green Hope Theme by Sivan & schiy · Proudly powered by WordPress

无觅相关文章插件,快速提升流量