今天再次谈起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的小技巧分享的更多相关文章

  1. window.open的小技巧分享(转)

    今天再次谈起window.open是因为发现了一个比较好玩的小技巧,详细内容我们稍后详细说明.       聊到window.open,不得不说明一下他的使用方法,主要有两种形式:   window. ...

  2. Python编码小技巧分享【新手必学】

       本次分享了python编程小技巧总结如下,希望对大家有帮助,非常实用哦注意:很多人学Python过程中会遇到各种烦恼问题,没有人帮答疑.为此小编建了个Python全栈免费答疑交流.裙 :一久武其 ...

  3. javascript中关于&& 和 || 表达式的小技巧分享

    如果你还是新手, 而且读完所有这些技巧的详解和每种技巧是如果工作的以后运用它们, 你会写出更加简练高效的JavaScript程序. 确实, JavaScript高手已经运用这些技巧写出了很多强大, 高 ...

  4. Visual Studio模板代码注释小技巧分享

    在日常开发过程中,难免有这样一种需求:就是你所建的每一个类文件或者接口文件都需要标注下作者姓名以及类的用途.如果我们每次创建文件的时候都需要写一遍这些信息是很烦神的.还好Visual Studio给我 ...

  5. Android Studio使用小技巧:提取方法代码片段

    http://www.jb51.net/article/65510.htm 今天来给大家介绍一个非常有用的Studio Tips,有些时候我们在一个方法内部写了过多的代码,然后想要把一些代码提取出来再 ...

  6. android浏览器开发小技巧集锦(转)

    本人和朋友们做了一段时间浏览器,将一些小技巧分享出来,先写一部分,慢慢写,同时也为我们的浏览器打打广告 我们的浏览器将要上线,名叫沙发浏览 1.网页内的右键菜单 public boolean onLo ...

  7. openinstall集成小技巧

    引言:最近在做一个iOS端的小游戏,想要实现在安装时自动关联好友的功能,就发帖询问有没有好的想法.在帖子中法想了这个不错的SDK,通过它我们还实现了,安装后自动进入好友游戏房间的功能.这里我就分享一下 ...

  8. 牛腩新闻公布系统--学习Web的小技巧汇总

    2014年11月10日,是个难忘的日子.这一天.小编的BS学习開始了.BS的开头,从牛腩新闻公布系统開始.之前学习的内容都是CS方面的知识,软考过后.開始学习BS,接触BS有几天的时间了,跟着牛腩老师 ...

  9. 牛腩新闻发布系统--学习Web的小技巧汇总

    2014年11月10日,是个难忘的日子,这一天,小编的BS学习开始了,BS的开头,从牛腩新闻发布系统开始,之前学习的内容都是CS方面的知识,软考过后,开始学习BS,接触BS有几天的时间了,跟着牛腩老师 ...

随机推荐

  1. 05-图2. Saving James Bond - Easy Version (25)

    1 边界和湖心小岛分别算一个节点.连接全部距离小于D的鳄鱼.时间复杂度O(N2) 2 推断每一个连通图的节点中是否包括边界和湖心小岛,是则Yes否则No 3 冗长混乱的函数參数 #include &l ...

  2. mui实现支付宝支付功能

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>H ...

  3. JY05-JavsScript-JS基础01

    JavaScript第一天 1.前端三层 HTML   结构层 语义 骨架 css  表现层 审美 衣服 JavsScript 行为层 行为交互 动作 2.转义字符\r\n\t \r return 回 ...

  4. IOS开发,如何用最新的Itunes给手机装ipa文件

    搜了半天,发现网上的很多教“使用Itunes给手机装ipa文件”文字都好几年了,现在的Itunes跟过去几年的功能和界面都有很大改变,话不多说直接两句话讲明白,希望帮到需要的人. 使用Itunes给手 ...

  5. 单点登录CAS使用记(五):cas-client不拦截静态资源以及无需登录的请求。

    一.问题在哪? 在配置cas-client中,有这么一段配置: <filter> <filter-name>CAS Filter</filter-name> < ...

  6. 你好,C++(21)只要天还没黑,就一直在工地干活-4.3.1 while循环:只要…就一直…

    4.3  循环控制语句 在现实世界中,有这样一类现象: 只要油箱中的当前油量小于油箱容量100升,就一直往油箱中加油: 一直不断地为祖国辛勤工作,只要我还活着: 公司100000位员工,每个人的工资都 ...

  7. POJ 3254 状压DP

    题目大意: 一个农民有一片n行m列 的农场   n和m 范围[1,12]  对于每一块土地 ,1代表可以种地,0代表不能种. 因为农夫要种草喂牛,牛吃草不能挨着,所以农夫种菜的每一块都不能有公共边. ...

  8. Yum 安装 zabbix...

    环境:centos6_64 Mysql环境.禁用iptable selinux 安装基础包: 需要安装LAMP.自己安装吧...不会的请移步...LAMP rpm -ivh http://repo.z ...

  9. 1104解决ecos挂件中数组传递的相关问题。

    1.挂件综述: 挂件组成:_config.html   后台配置,即点添加时的弹出框. default.html  前台显示,即在前台显示出来的页面. widget.php   设置挂件的基本信息.. ...

  10. Delphi的IDHTTP的基本用法

    一.IDHTTP的基本用法 IDHttp和WebBrowser一样,都可以实现抓取远端网页的功能,但是http方式更快.更节约资源,缺点是需要手动维护cook,连接等 IDHttp的创建,需要引入ID ...