今天再次谈起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页面内容如下：
 
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

window.open的小技巧分享（转）的更多相关文章

  1. window.open的小技巧分享

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

  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. android4.0 USB Camera示例(五个辅助)jpg压缩

    前的最后一个 我们说,一个直接yuv变成jpg该功能 但是转换不成功 主要功能是yuv420转jpg的 根据研究发现 yuv420的序列是这种 YYYY YYYY UVUV 而yuv422的隔行扫描的 ...

  2. Z.ExtensionMethods 扩展类库

    Z.ExtensionMethods 一个强大的开源扩展库 今天有意的在博客园里面搜索了一下 Z.ExtensionMethods 这个扩展类库,确发现只搜到跟这个真正相关的才两篇博文而已,我都点进去 ...

  3. Linux下 目录 压缩 解压缩 打包

    http://blog.sina.com.cn/s/blog_7479f7990100zwkp.html tar -zcvf /home/xahot.tar.gz /xahot    tar -zcv ...

  4. C语言程序代写(QQ:928900200)

    1.学生成绩统计 要求描述: 用结构数组实现学生信息的统计功能. struct student { long no; /*学号*/ char name[10]; /*姓名*/ char sex; /* ...

  5. 源码安装apache及配置转发

    一.    安装Apache a)    解压:tar -xvf httpd-*; b)    ./configure --prefix=/usr/oracle/apache CC="gcc ...

  6. HDU 2063 过山车 二分图题解

    一个男女搭配的关系图,看能够凑成多少对,基本和最原始的一个二分图谜题一样了,就是 一个岛上能够凑成多少对夫妻的问题. 所以是典型的二分图问题. 使用匈牙利算法,写成两个函数,就很清晰了. 本程序还带分 ...

  7. F5当刷新页面，出现“要再次显示此页，web该浏览器，你曾经有过发送消息再次提交...点击重试&quot;，如何防止此对话框解决方案的出现，

    如何取消刷新页面弹出"重试"对话? 找了好多类似的问题都没有我想要的答案,请大家看清楚再回答. 比方说,登录过程中,成功之后转向还有一个页面success.jsp, 这时,假设刷新 ...

  8. [Windows Phone] 以多国语言做为开发前提 (2)

    原文:[Windows Phone] 以多国语言做为开发前提 (2) ? 前言 在先前的文章 [Windows Phone 开发 - 以多国语言做为开发前提 (1)] 中说明了简单的多国语言范例,今天 ...

  9. windows中间vmware的Linux系统安装jdk步骤

    1.设置文件的享受,对于本地阅读windows档 于vmware虚拟机设置共享文件夹,那么共享文件中,你可以 2.然后打开虚拟机上,使用root输入账户,然后,在夹/mnt/hgfs/   共享文件了 ...

  10. 如何插上U盘 自动复制内容

    U盘插入自动复制,有效对付那些不肯给PPT的老师,还有一定几率拿到期末考试卷子···有图有真相!业界良心的好东西!!现在看还来得及!!! 代码优化了一下,把不是很重要的都删掉了,这次使用时看不出任何现 ...