今天再次谈起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. python : 批量下载R语言库包

    soupR.py 代码例如以下 # -*- coding: cp936 -*- import urllib import urllib2 import os, re from BeautifulSou ...

  2. hdu3278Puzzle

    其实最终的结果无非是中间8个方块是相同的颜色,外面16个方块是另外两种颜色.那么其实可以把外面两种颜色看作是0,中间的颜色看做是1. 那么题目就变成了把那种颜色看做1,而其它两种颜色看做0,可以用最少 ...

  3. Mysql学习笔记（二）数据类型 补充

    原文:Mysql学习笔记(二)数据类型 补充 PS:简单的补充一下数据类型里的String类型以及列类型... 学习内容: 1.String类型 2.列类型存储需求 String类型: i.char与 ...

  4. Windows Phone开发（24）：启动器与选择器之发送短信

    原文:Windows Phone开发(24):启动器与选择器之发送短信 本节我们通过一个简单的发送短信示例来演示一下如果配合使用PhoneNumberChooserTask和SmsComposeTas ...

  5. 白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》串行4（场景变化）

    作为一个真正的利用价格值应用,首先,你应该至少有两页,通过切换页面来实现很多其他互动.比如手机人人网,首先,打开后进入登录页面,将有登录后,新的东西.然后拉左侧面板.你可以看到相册.私人信息.像其他应 ...

  6. .Net程序猿乐Android发展---(1)环境结构

    对于没有接触Android人才发展,你可能会觉得Android更难以发展.接下来的一段时间,我们将了解Android开发的详细细节,主要是面对.NET程序猿,来看看.NET程序猿如何进行Android ...

  7. 经纬Zhang英拉垫背的企业家VC没有到这种地步这么卑鄙

    经纬的合伙人张颖前不久发了一篇名为<泡沫就在那里------致经纬系CEO的一封信>,这篇文章所提到的泡沫论在业界引发了强烈的反响,随后有评论觉得,这明明是VC(风险投资)们自己的危机,为 ...

  8. JTree demo

    JFrame居中方法一:   setLocationRelativeTo(null); 注意:必须在整个frame初始化完成后再加上此语句,否则将显示在屏幕右下角 方法二: private Dimen ...

  9. 交叉编译libxml2

    请勿用于商业用途,转载请注明出处! xml的优势就是可以方便的管理配置项,libxml2是c语言实现的xml管理库,眼下项目须要ARM下的版本号,libxml2编译过程例如以下: 0.准备工作 下载地 ...

  10. linux---Vim命令集

    Vim命令集 命令历史 以:和/开头的命令都有历史纪录,能够首先键入:或/然后按上下箭头来选择某个历史命令. 启动vim 在命令行窗体中输入下面命令就可以 vim 直接启动vim vim filena ...