今天再次谈起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. [RxJS] Combining streams in RxJS

    Source: Link We will looking some opreators for combining stream in RxJS: merge combineLatest withLa ...

  2. [Redux] Avoiding Object Mutations with Object.assign() and ...spread

    Learn how to use Object.assign() and the spread operator proposed for ES7 to avoid mutating objects. ...

  3. Can't connect to local MySQL server through socket '/tmp/mysql.sock' (111)

    遇着这个提示的话,如果本地只安装了一个mysql,这里写的很详细的 http://www.blogjava.net/asenyifei/articles/82575.html 看这里可以解决,如果本地 ...

  4. thinkphp3.2.3 成功对接支付宝接口

    一.首先下载支付宝官方接口,下载地址: https://b.alipay.com/order/productDetail.htm?productId=2012111200373124&tabI ...

  5. 解决 iOS webkit 使用CSS动画时闪烁的问题

    -webkit-backface-visibility: hidden;

  6. python运行时间计算之timeit

    timeit.timeit(stmt='pass', setup='pass', timer=<default timer>, number=1000000) stmt:statement ...

  7. JAVA泛型那些事儿

    本篇内容源于本人一个好友sgpro提供的java学习例子,现拿出来给大家分享. 此例子非常直观的通过代码讲解了java泛型的用法和好处,是笔者一直珍藏的最好的泛型学习笔记. 一.面向过程的时代 我们先 ...

  8. SQL Server 2008将数据导出为脚本

    之前我们要将一个表中的数据导出为脚本,那么只有在网上找一个导出数据的Script,然后运行就可以导出数据脚本了.现在在SQL Server 2008的Management Studio中增加了一个新特 ...

  9. 快速幂：quickpow

    众所周知,快速幂是优化对数的次方运算的最普遍手段.在学习快速幂的思想时,其分治思想容易让大家用简单的递归实现. 但其实,除了递归之外,更好的方法会是简单的 WHILE循环.下面贴代码: #includ ...

  10. 学习OpenSeadragon之三 (覆盖层Overlayer的使用)

    Overlayer(覆盖层)是一个很重要的机制,它可以在可缩放图片上显示额外的信息. 1.简单应用 以下是我做出的一个小例子: 看这小老鼠头部的红色框内的部分就是一个分离出来的overlay. 介绍一 ...