window.open的小技巧分享（转）

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

时间： 2024-10-21 21:17:49

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

window.open的小技巧分享

今天再次谈起window.open是因为发现了一个比较好玩的小技巧,详细内容我们稍后详细说明. 聊到window.open,不得不说明一下他的使用方法,主要有两种形式: window.open()没有任何参数,这种方式可以新标签打开页面 window.open(url, name, pars),带有参数的可以在当前页面打开窗口 详细的使用方法,之前有过介绍,如果想了解,可以点击这里. 知道了如何使用,接下来介绍几个特别的属性和方法(下面所说到的都是同域页面): window.open()打开的窗

3.python小技巧分享－使用min和max函数去找字典中的最大值和最小值

睡前分享一个小技巧- 使用min和max函数来巧妙的查找一个字典中的最大value和最小value. 比如说,现在有一个字典,字典的key是用户名,value则是这个用户的账户有多少钱. 现在想要找出账户内余额最多的用户,请问如何实现? d1 = {'suhaozhi':12345,'tony':4513,'eric':135,'jolin':13000000} 很简单,只要使用zip函数结合max函数就可以做到了. print max(zip(d1.values(),d1.keys())) #

干货|微信小程序线上线下推广的方法和销售话术小技巧分享

一款小程序在被开发后,若想获得广泛的用户群体,就得靠一些巧妙地话术宣传和推广措施.那么问题来了,微信小程序推广和话术有哪些呢?具体要怎么操作?别着急,请听小编来跟大家一一道来. 小程序推销话术小技巧 1.有自信,说话有底气 销售人员在宣传小程序时,一定在客户面前要很自信地说话.不自信的话是缺乏说服力量的.有了自信以后,销售人员在讲话的尾语可以作清楚的.强劲的结束,由此给对方确实的信息.如"一定可以使您满意的".这样的话会让客户对你宣传的小程序产生一定的信心. 2.重复重要语句,加深在顾

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

本次分享了python编程小技巧总结如下,希望对大家有帮助,非常实用哦注意:很多人学Python过程中会遇到各种烦恼问题,没有人帮答疑.为此小编建了个Python全栈免费答疑交流.裙 :一久武其而而流一思(数字的谐音)转换下可以找到了,不懂的问题有老司机解决里面还有最新Python教程项目可拿,,一起相互监督共同进步! 交换值 从列表中的所有元素创建单个字符串 查询列表中出现频率最多的元素 检查两个单词是否是字谜 反转字符串 反转列表 转置 2 维数组 链式比较 链式函数调用 列表复制 字典值获

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

如果你还是新手, 而且读完所有这些技巧的详解和每种技巧是如果工作的以后运用它们, 你会写出更加简练高效的JavaScript程序. 确实, JavaScript高手已经运用这些技巧写出了很多强大, 高效的JavaScript程序. 但是你可以这样. 强大的 && 和 || 表达式你可能在JavaScript库和JavaScript框架中已经见过它们了, 那么我们先由几个基本的例子开始: 例子1. || (或)设置默认值, 通常用 代码如下: 1 function documentTitle

Moosefs管理小技巧分享

1. 挂载目录管理 Moosefs系统支持客户端根据需要挂载对应子目录:默认不指定-S的话会挂载到根目录(/)下,当通过df –sh查看空间使用used显示的是当前整个mfs系统的硬盘使用情况:而挂载子目录则只会看到目录的使用情况.具体操作如下: Shell> mfsmount /mnt –H mfsmaster - 挂载到根目录(/)下    Shell> mkdir –p /mnt/subdir    Shell> umount /mnt    Shell> mfsmount 

eclipse 开发python 小技巧分享

1.如何在Eclipse中显示空格(space)和制表符(tab) 在ECLIPSE开发中,我们有时无法区分空格(SPACE)和制表符(TAB),通过下面的选择设置就能很好区分Window->references->General->Editors->TextEditors->Showwhitespacecharacters

Wireshark 抓包仅保存当前过滤数据包的小技巧分享

如果你在抓包的时候只想保留当前经过显示过滤匹配的数据包,怎么做呢? 如图,我只想当前过滤后的数据包可以选择 "导出特定分组" (Wireshark 2.x版本默认支持中文了) 然后就可以保存指定的数据报文了. .

好程序员分享Vue的一些小技巧

好程序员分享Vue的一些小技巧,前言:用Vue开发一个网页并不难,但是也经常会遇到一些问题,其实大部分的问题都在文档中有所提及,再不然我们通过谷歌也能成功搜索到问题的答案,为了帮助小伙伴们提前踩坑,在遇到问题的时候,心里大概有个谱知道该如何去解决问题.这篇文章是将自己知道的一些小技巧分享给大家,希望看完本文可以有所收获. 文章内容总结: 组件style的scoped Vue 数组/对象更新 视图不更新 vue filters 过滤器的使用 列表渲染相关 深度watch与watch立即触发回调 这