postMessage API

发送数据：

otherWindow.postMessage(message, targetOrigin, [transfer]);
  • otherWindow：
    窗口的一个引用,比如iframe的contentWindow属性,执行window.open返回的窗口对象,或者是命名过的或数值索引的window.frames.
  • message：
    要发送到其他窗口的数据,它将会被!结构化克隆算法序列化.这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化.
  • targetOrigin：
    通过窗口的origin属性来指定哪些窗口能接收到消息事件,指定后只有对应origin下的窗口才可以接收到消息,设置为通配符”*”表示可以发送到任何窗口,但通常处于安全性考虑不建议这么做.如果想要发送到与当前窗口同源的窗口,可设置为”/”
  • transfer | 可选属性：
    是一串和message同时传递的Transferable对象,这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权.

场景：

父页面（index.html）用iframe嵌入了个子页面（iframePage.html）,且里面加载了第三方项目，现在我们要实现父页面与子页面间的相互通信。
但由于同源策略，导致普通方法不行，所以这里我们采用HTML5里的postMessage实现。

一、父页面向子页面传值

父页面index.html：

<!-- index.html -->
<body style="border:5px solid #333;">
  <h1>this is index</h1>
  <iframe src="./iframePage.html" id='myframe'></iframe>
</body>

<script type="text/javascript"> 
    var iFrame = document.getElementById('myframe')

    //iframe加载完毕后再发送消息，否则子页面接收不到message
    iFrame.onload = function(){
      //iframe加载完立即发送一条消息
      iFrame.contentWindow.postMessage('MessageFromIndex1','*');
    }
</script>

我们知道postMessage是挂载在window对象上的，所以等iframe加载完毕后，用iFrame.contentWindow获取到iframe的window对象，然后调用postMessage方法，相当于给子页面发送了一条消息。

子页面iframePage.html：

<!-- iframePage.html -->
<body style="border:5px solid #333;">
  <h1>this is iframePage</h1>
</body>

<script type="text/javascript"> 
    //回调函数
    function receiveMessageFromIndex ( event ) {
      console.log( 'receiveMessageFromIndex', event )
    }

    //监听message事件
    window.addEventListener("message", receiveMessageFromIndex, false);
</script>

然后我们在index.html页面查看，发现子页面的receiveMessageFromIndex函数收到了来自于index.html页面传来的数据MessageFromIndex1，所以成功了。
这里写图片描述
event对象中的data属性存放着我们从父页面传过来的数据

二、子页面向父页面传值

子页面iframePage.html：

<!-- iframePage.html -->
<body style="border:5px solid #333;">
  <h1>this is iframePage</h1>
</body>

<script type="text/javascript"> 
    //给父页面发送消息，data为对象
    parent.postMessage( {msg: 'MessageFromIframePage'}, '*');
</script>

父页面index.html：

<!-- index.html -->
<body style="border:5px solid #333;">
  <h1>this is index</h1>
  <iframe src="./iframePage.html" id='myframe'></iframe>
</body>

<script type="text/javascript">
    //回调函数
    function receiveMessageFromIframePage (event) {
        console.log('receiveMessageFromIframePage', event)
    }

    //监听message事件
    window.addEventListener("message", receiveMessageFromIframePage, false);
</script>

然后我们在index.html页面查看，发现父页面的receiveMessageFromIndex函数收到了来自于子页面iframePage.html传来的数据receiveMessageFromIframePage，所以成功了。

这里写图片描述

Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

avatar CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

avatar CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生

avatar CSDN学习社区