概述

当页面嵌入一个iframe，或者打开一个子窗口。这个时候如果父窗口需要与子窗口之间通讯，如果直接用DOM访问对方窗口window，会受到跨于安全机制影响。

javascript提供一个方法，可以解决这个问题，window.postMessage()；

示例

1.与iframe通讯

主页面：

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

<iframe id="iframe_1" src="http://192.168.5.136:10013/tmp_75.html"></iframe>

<!-- <iframe id="iframe_1" src="./temp_1263.html"></iframe> -->

<script type="text/javascript">

  var iframe_1 = document.getElementById("iframe_1");

  iframe_1.addEventListener("load", function(e){

    e.target.contentWindow.postMessage({"foo": 1}, "*");

  }, false);

  window.addEventListener("message", receiveMessage, false);

  function receiveMessage(event) {

    console.log(event);

  }

</script>

</body>

</html>

子页面：

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

<script type="text/javascript">

    window.addEventListener("message", receiveMessage, false);

    function receiveMessage(event) {

        console.log(event);

        window.parent.postMessage({"bar": 1}, "*");

    }

</script>

</body>

</html>

双方页面监听"message"事件，父页面等待子页面加载完毕后调用子窗口的window.postMessage发送信息，子窗口收到信息后触发"message"回调函数，回调函数中往父窗口的window.postMessage发送信息，父窗口收到消息后触发"message"回调函数。

2.与子窗口通讯

跟iframe不同之处在于，可能是出于某种安全机制的设计，通过window.open返回的window对象无法让父窗口监听该window对象的事件。

这就意味着父窗口无法通过事件去得知子窗口何时加载完毕，并且在何时适合调用window.postMessage发送信息。

有一种解决办法是让子窗口通过window.opener对象，调用父窗口的方法来到通知它子窗口已经就绪。

主页面：

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

<a id="a_1">open</a>

<script type="text/javascript">

  var a_1 = document.getElementById("a_1");

  var win_1;

  a_1.addEventListener("click", function(e){

    win_1 = window.open('./tmp_77.html','_blank','width=200,height=100');

  }, false);

  window.addEventListener("message", receiveMessage, false);

  function receiveMessage(event) {

    console.log(event);

  }

  function subWinReady(){

    win_1.postMessage({"foo": 1}, "*");

  }

</script>

</body>

</html>

子页面：

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

<script type="text/javascript">

    window.opener.postMessage({"bar": 1}, "*");

    window.addEventListener("message", receiveMessage, false);

    function receiveMessage(event) {

        console.log(event);

    }

    //调用父页面方法

    window.opener.subWinReady();

</script>

</body>

</html>

注意：这种方式在跨域下是无效的，因为跨域下双方页面不能通过获取对方window对象直接调用其方法。

[JavaScript]父子窗口间参数传递的更多相关文章

  1. JS方法在iframe父子窗口间的调用

    本文向大家简单介绍一下iframe父子窗口间JS方法调用,JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用,希望本文介绍对你有所帮助. if ...

  2. Extjs Ext.ux.IFrame的用法 以及父子窗口间函数相互调用

    Extjs Ext.ux.IFrame的用法 以及父子窗口间函数相互调用 Ext.ux.IFrame Extjs官方提供的一个组件,可以很方便的使用. 这样就完成了一个简单的IFrame的使用,通过E ...

  3. WM_PAINT(父子窗口间)

    WM_PAINT(父子窗口间) 窗口句柄(HWND)都是由操作系统内核管理的,系统内部有一个z-order序列,记录着当前从屏幕底部(假象的从屏幕到眼睛的方向),到屏幕最高层的一个窗口句柄的排序,这个 ...

  4. vue之父子组件间通信实例讲解(props、$ref、$emit)

       组件间如何通信,也就成为了vue中重点知识了.这篇文章将会通过props.$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信. 组件是 vue.js 最强大的功能之一,而组件实例 ...

  5. 第四节：Vue表单标签和组件的基本用法，父子组件间的通信

    vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...

  6. Vue2.0父子组件间事件派发机制

    从vue1.x过来的都知道,在vue2.0中,父子组件间事件通信的$dispatch和$broadcase被移除了.官方考虑是基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会 ...

  7. 小强的HTML5移动开发之路（53）——jQueryMobile页面间参数传递

    在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并 ...

  8. 使用 SetParent 制作父子窗口的时候，如何设置子窗口的窗口样式以避免抢走父窗口的焦点

    原文:使用 SetParent 制作父子窗口的时候,如何设置子窗口的窗口样式以避免抢走父窗口的焦点 制作传统 Win32 程序以及 Windows Forms 程序的时候,一个用户看起来独立的窗口本就 ...

  9. Vue—非父子组件间的传值（Bus/发布订阅模式/观察者模式/总线）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 理解ConcurrentHashMap1.8源码

    ConcurrentHashMap源码分析 其实ConcurrentHashMap我自己已经看过很多遍了,但是今天在面试阿里的时候自己在描述ConcurrentHashMap发现自己根本讲不清楚什么是 ...

  2. Kubernetes行业调研报告：多集群、多云部署成企业首选策略

    新兴的多集群.多云部署成为首选的企业策略,而边缘部署则呈上升趋势 2019年11月5日,业界采用最广泛的Kubernetes管理平台创造者Rancher Labs(以下简称Rancher)发布了首份调 ...

  3. 【THUPC 2018】赛艇

    Problem Description Lavender.Caryophyllus.Jasmine.Dianthus现在在玩一款名叫"赛艇"的游戏. 这个游戏的规则是这样的: 玩家 ...

  4. 在cnetos7上搭建mysql主从服务

    本文主要是介绍在centos上搭建mysql的主从服务器.如果没有搭建过的,可以查看我以前的博客,里面有详细的安装centos和在centos上安装mysql的说明. 一.安装从虚拟机: 1.右键—& ...

  5. 与用户xxx一起提供的密码不正确。请确认输入的密码正确并重试

    环境: SharePoint 2010 / 2013 以系统账户身份登录管理中心,然后创建Web Application,报: 与用户xxx一起提供的密码不正确.请确认输入的密码正确并重试 明明都已经 ...

  6. window 操作

    忘记密码:https://jingyan.baidu.com/article/066074d6762a59c3c21cb0f9.html

  7. 12.2 中的Data Guard Standby 密码文件自动同步 (Doc ID 2307365.1)

    Data Guard Standby Automatic Password file Synchronization in 12.2 (Doc ID 2307365.1) APPLIES TO: Or ...

  8. 剑指Offer-39.把数组排成最小的数(C++/Java)

    题目: 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为321323. 分析: 将数组 ...

  9. 如何以管理员方式打开VS

    第一种 打开VS快捷方式的属性对话框. 勾选"用管理员身份运行" 但是这种方式只有在点击快捷方式直接打开vs时是一管理员身份启动的,也就是如果直接打开Solution,则不是管理员 ...

  10. button的onclick事件给函数传递参数

    ul+='<button onclick="pay(\''+regiId+'\')" >按钮</button>' //此为原生JS页面拼接//此方式的关键就 ...