在实际项目开发中可能会碰到在 a.com 页面中嵌套 b.com 页面，这时第一反应是使用 iframe，但是产品又提出在 a.com 中操作，b.com 中进行显示，或者相反。

1、postMessage

  postMessage方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。

语法：

otherWindow.postMessage(message, targetOrigin, [transfer]);
  • otherWindow：其他窗口的引用，如 iframe的contentWindow、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。
  • message：将要发送到其他window的数据。
  • targetOrigin：指定那些窗口能接收到消息事件，其值可以是字符串 “*” 表示无限制，或者是一个URI。
  • transfer：是一串和message同时传递的Transferable对象，这些对象的所有权将被转移给消息的接收方，而发送方将不再保留所有权。

postMessage方法被调用时，会在所有页面脚本执行完毕之后像目标窗口派发一个 MessageEvent 消息，该MessageEvent消息有四个属性需要注意：

  • type：表示该message的类型
  • data：为 postMessage 的第一个参数
  • origin：表示调用postMessage方法窗口的源
  • source：记录调用postMessage方法的窗口对象

parent.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>iframe+postMessage 跨域通信 主页面</title>

</head>

<body>

    <h1>主页面</h1>

    <iframe id="child" src="./child.html"></iframe>

    <div>

        <h2>主页面接收消息区域</h2>

        <span id="message"></span>

    </div>

</body>

<script>

    window.onload = function(){

        document.getElementById('child')

         .contentWindow.postMessage("主页面消息","http://192.168.23.10:9000/child.html")//父向子传递

    }

    window.addEventListener('message', function(event){//父获取子传递的消息

        document.getElementById('message').innerHTML = "收到"

         + event.origin + "消息：" + event.data;

    }, false)

</script>

</html>

　　child.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>iframe+postMessage跨域通信 子页面</title>

</head>

<body>

    <h2>子页面</h2>

    <div>

        <h3>接收消息区域</h3>

        <span id="message"></span>

    </div>

</body>

<script>

    window.addEventListener('message',function(event){//子获取父消息

        console.log(event);

        document.getElementById('message').innerHTML = "收到" + event.origin + "消息：" + event.data;

        console.log(top)

        top.postMessage("子页面消息收到", 'http://192.168.23.10:9000/parent.html')//父向子消息

    }, false);

</script>

</html>

　　注:不支持file协议

使用 iframe + postMessage 实现跨域通信的更多相关文章

  1. JavaScript 跨域：window.postMessage 实现跨域通信

    JavaScript 跨域方式实现方式有很多,之前,一篇文章中提到了 JSONP 形式实现跨域.本文将介绍 HTML5 新增的 api 实现跨域:window.postMessage . 1 othe ...

  2. 使用window.postMessage实现跨域通信

    JavaScript由于同源策略的限制,跨域通信一直是棘手的问题.当然解决方案也有很多: document.domain+iframe的设置,应用于主域相同而子域不同: 利用iframe和locati ...

  3. 利用HTML5的window.postMessage实现跨域通信

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp77   HTML5的window.postMessage简述 postM ...

  4. 黄聪：利用iframe实现ajax 跨域通信的解决方案（转）

    原文:http://www.cnblogs.com/xueming/archive/2013/02/01/crossdomainajax.html 在漫长的前端开发旅途上,无可避免的会接触到ajax, ...

  5. html5: postMessage解决跨域通信的问题

    效果图 postmessage解析 HTML5提供了新型机制PostMessage实现安全的跨源通信. 语法 otherWindow.postMessage(message, targetOrigin ...

  6. 使用postMessage实现跨域 解决'Failed to execute 'postMessage' on 'DOMWindow''

    使用iframe+postMessage解决跨域问题,首先来过一遍其中的原理咯 原理: 发送方使用postMessage方法向接收方推送消息,第一个参数为推送的内容,第二个参数是允许被访问的域名: 接 ...

  7. html5 postMessage解决iframe跨协议跨域通信问题

    a.html有个iframe载入b.com/login.html,当login完成时通知a.html页面登录完成并传递UserName 1.a.html 监听消息 window.addEventLis ...

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

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

  9. iframe跨域通信方案

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

随机推荐

  1. SDUT OJ 字典树 AND 静态内存与动态内存

    字典树 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Problem Description 遇到单词不认识怎么办? 查字典 ...

  2. phpstudy下安装phalcon

    其实,一共也就下面几步,顺利的话,两分钟完事. 第一步:下载和当前php版本对应的php_phalcon.dll 文件 第二步:将此文件放到php版本下的ext里面. 第三步:在php.ini中添加如 ...

  3. JS 命名规范

    JS的命名规则和规范 规则 - 必须遵守的,不遵守会报错 由字母.数字.下划线.$符号组成,不能以数字开头 不能是关键字和保留字,例如:for.while. 区分大小写 规范 - 建议遵守的,不遵守不 ...

  4. 微信小程序之页面之间传递值

    页面之间传值有三种方式 1.url传值 2.本地存储传值 3.全局变量传值 1.url传值: 通过url传值的需要通过option来获取参数值. 更多详情可以访问小程序-navigateTo章节. A ...

  5. LeetCode154.寻找旋转排序数组中的最小值 II

    154.寻找旋转排序数组中的最小值 II 描述 假设按照升序排序的数组在预先未知的某个点上进行了旋转. ( 例如,数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7,0,1,2] ). ...

  6. JAVA数据结构--LinkedList双向链表

    链表是一种物理存储单元上非连续.非顺序的存储结构,数据元素的逻辑顺序是通过链表中的指针链接次序实现的.链表由一系列结点(链表中每一个元素称为结点)组成,结点可以在运行时动态生成.每个结点包括两个部分: ...

  7. [转] 商业应用中Java浮点数的精确计算及表示

    [From] https://blog.csdn.net/stevene/article/details/586089 问题提出 (1).浮点数精确计算 胜利油田三流合一项目中一直存在一个问题,就是每 ...

  8. Hibernate处理一个实体映射多张相同结构的数据表--动态映射

    [转自] http://blog.csdn.net/majian_1987/article/details/8725197 LZ在项目中需要处理这样一个业务,每天都有终端设备上传GPS位置信息到服务端 ...

  9. PIE SDK文本元素的绘制

    1. 功能简介 在数据的处理中会用到文本元素的绘制,利用ITextElement文本元素接口进行绘制,目前PIE SDK支持ITextSymbol符号接口,TextSymbol对象是用于修饰文字元素对 ...

  10. Ionic3，关于配置公共的css文件，引用非标准的文件（三）

    说明 在开发过程中,很多样式为了能够共用,这样能够节省很大一部分时间用来编写样式,同时,一个完整的共用模板,在进行样式更换的时候,可以达到事半功倍的效果,因此在开发效率上也可以获得提高. 相关步骤: ...