实例

父页面发消息给子页面，子页面接收消息后回复父页面。

父页面代码：

<body>

    父级页面：

    <button id="btn">给iframe子页面传递消息button</button>

    <iframe src="index2.html" id="iframe1"></iframe>

    <script>

        var btn = document.getElementById('btn');

        btn.addEventListener('click',function() {

            var data = {

                message: '子页面应该接收的消息'

            }

            // 给子页面发送消息

            document.getElementById('iframe1').contentWindow.postMessage(data,"/");

        },false);

        // 接收子页面传递的消息

        window.addEventListener('message',function(e) {

            console.log(e.data); // 父页面：我接收到消息了

        },false);

    </script>

</body>

iframe子页面代码：

<script type="text/javascript">

    // 接收父页面发送的内容

    window.addEventListener('message',function(e) {

        console.log(e.data) // {message: "子页面应该接收的消息"}

        // 接收内容后，我们也可以给父页面发消息

        window.parent.postMessage('父页面：我接收到消息了','/');

    },false);

</script>

message事件

  • data 包含任意字符串数据，由原始脚本发送
  • origin 一个字符串，包含原始文档的方案、域名以及端口(如：http://domain.example:80)
  • lastEventId 一个字符串，包含了当前的消息事件的唯一标识符。
  • source 原始文件的窗口的引用。更确切地说，它是一个WindowProxy对象。
  • ports 一个数组，包含任何MessagePort对象发送消息。

我们可以打印下子页面接收父页面的消息的对象，如下：

// 接收父页面发送的内容

    window.addEventListener('message',function(e) {

        console.log(e)

    },false);

打印结果：

postMessage方法

postMessage方法支持两个参数，具体参考下表：

  • message：发送的数据
  • targetOrigin： 发送数据的来源

postMessage方法中的message参数不仅仅可以是字符串，结构对象、数据对象(如：File和ArrayBuffer)或是数组都是可以的。在IE8/IE9/FireFox3.6及其以下版本只支持字符串数据。

targetOrigin参数指接收文档的来源。除非接收信息浏览上下文来源于提供的targetOrigin中的一个匹配，否则浏览器是不会发送消息的。直接使用"*"通配符绕开限制，但显然这样很不安全。您在实际使用的时候务必指定目标来源。您还可以通过使用"/"来限制信息只能同源发送。

参考地址

小tips：postMessage处理iframe跨域通信的更多相关文章

  1. Javascript使用postMessage对iframe跨域通信

    今天才发现原来有这么个好东西啊,跨域通信太方便了, 举个小栗子: 共两个页面, 页面1:www.a.com/a.html 页面2:www.b.com/b.html 实现目标:两个网站页面实现跨域相互通 ...

  2. iframe跨域通信实战

    "长时间不写文章,开头的方式总是那么出奇的相似",最近很忙,好久没写博客了啊(是不是?). 更换工作已经有三个月有余,这段三个月把过去三年没加过的班都加了一次.收获挺多,发现的问题 ...

  3. Javascript 使用postMessage对iframe跨域传值或通信

    实现目标:两个网站页面实现跨域相互通信 当前例子依赖于 jQuery 3.0 父页面代码:www.a.com/a.html <iframe id="myIframe" src ...

  4. iframe跨域通信方案

    概述 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: 首先什么 ...

  5. 对iframe跨域通信的封装

    github源码:https://github.com/boycy815/topProxy 为了偷懒所以依赖了Kissy:http://docs.kissyui.com/ 用法举例:需求是在http: ...

  6. iframe跨域通信window.postMessage()方法

    需求:A页面中要嵌入一个iframe,这个iframe是B页面,此时A页面需要得到B页面的一些信息. window.postMessage() 我们都知道浏览器的同源策略,即对于两个不同页面的脚本,只 ...

  7. postMessage解决iframe跨域问题

    转:https://juejin.im/post/5b8359f351882542ba1dcc31 https://juejin.im/post/590c3983ac502e006531df11 ht ...

  8. 【JavsScript】父子页面之间跨域通信的方法

    由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时 ...

  9. 【JavaScript】父子页面之间跨域通信的方法

    由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时 ...

  10. iframe跨域数据传递

    项目中需要和其他单位合作开发,方案采用iframe嵌入页面,开发过程中设计到了跨域数据的传递,初步方案决定使用html5 API postMessage进行iframe跨域数据传递: 域名A下的页面 ...

随机推荐

  1. SpringSecurity安全管理

    SpringSecurity安全管理 一.安全简介 在 Web 开发中,安全一直是非常重要的一个方面,因此从应用开发的第一天就应该把安全相关的因素考虑进来,并在整个应用的开发过程中. 主要安全框架:S ...

  2. Laravel 组件

    创建组件命令 php artisan make:component Alert make:component 命令还将为组件创建视图模板.视图将放在 resources/views/component ...

  3. JavaScript 监听组合按键

    JavaScript监听组合按键   by:授客 QQ:1033553122 1.   思路 如图,通过监听并打印键盘keydown事件,得到图示内容,观察发现, 当按下的组合键包含Ctrl键时,ct ...

  4. python与c/java的异

    1.注释 #为单行注释 """ 这里是多行注释 """ ''' 这个也可以是多行注释 ''' 2.赋值 在python中赋值不需要特定变量的 ...

  5. python selenium元素定位

    1.ID元素定位基于元素属性中的id的值来进行定位,id是一个标签的唯一属性值可以通过id属性来唯一定位一个元素,是首选的元素定位方式,动态ID不做考虑.driver .find_element_by ...

  6. 【Maxwell】02 Kafka配置

    一.快速搭建Kafka环境 基于Docker容器创建(供参考): https://www.cnblogs.com/mindzone/p/15608984.html 这里简要写一下命令: # 拉取zk ...

  7. 【Java】JDBC Part2 工具类封装实现

    JDBC 工具类封装实现 - 注册和配置都放在静态代码块完成 - 静态方法获取连接,和释放资源 - 本类不产生实例 - 5版本 + 已经可以实现无驱动注册,所以驱动部分注释了 package cn.d ...

  8. 【Linux】Re01

    一.三种网络模式 https://www.bilibili.com/video/BV1Sv411r7vd?p=7 1.桥接模式 该虚拟机和宿主机同一网段,和外部网络相通,但是占用网段地址资源,IP分配 ...

  9. C# 委托和闭包

    前言 本文只是为了复习,巩固,和方便查阅,一些知识点的详细知识会通过相关链接和文献标记出来. 委托是什么 大部分的解释是 委托是一个对方法的引用,可以不用自己执行,而是转交给其他对象.就好比每天都有一 ...

  10. Java核心编程-第一卷:基础知识

    public static void main(String[] args) { BigInteger bigInteger1 = BigInteger.probablePrime(20, new R ...