JS实现iframe中子父页面跨域通讯的方法分析


Posted in Javascript onMarch 10, 2020

本文实例讲述了JS实现iframe中子父页面跨域通讯的方法。分享给大家供大家参考,具体如下:

在非跨域的情况下,iframe中的子父页面可以很方便的通讯,但是在跨域的情况下,只能通过window.postMessage()方法来向其他页面发送信息,其他页面要通过window.addEventListener()监听事件来接收信息;

#跨域发送信息

#window.postMessage()语法

otherWindow.postMessage(message, targetOrigin, [transfer]);
  • otherWindow
    其他窗口的一个引用,写的是你要通信的window对象。
    例如:在iframe中向父窗口传递数据时,可以写成window.parent.postMessage(),window.parent表示父窗口。
  • message
    需要传递的数据,字符串或者对象都可以。
  • targetOrigin
    表示目标窗口的源,协议+域名+端口号,如果设置为“*”,则表示可以传递给任意窗口。在发送消息的时候,如果目标窗口的协议、域名或端口这三者的任意一项不匹配targetOrigin提供的值,那么消息就不会被发送;只有三者完全匹配,消息才会被发送。例如:
    window.parent.postMessage('hello world','http://xxx.com:8080/index.html')
    只有父窗口是http://xxx.com:8080时才会接受到传递的消息。

  • [transfer]
    可选参数。是一串和message 同时传递的 Transferable 对象,这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权。我们一般很少用到。

#跨域接收信息

需要监听的事件名为"message"

window.addEventListener('message', function (e) {
  console.log(e.data) //e.data为传递过来的数据
  console.log(e.origin) //e.origin为调用 postMessage 时消息发送方窗口的 origin(域名、协议和端口)
  console.log(e.source) //e.source为对发送消息的窗口对象的引用,可以使用此来在具有不同origin的两个窗口之间建立双向通信
})

#示例Demo

示例功能:跨域情况下,子父页面互发信息并接收。

  • 父页面代码:
<body>
  <button onClick="sendInfo()">向子窗口发送消息</button>
  <iframe id="sonIframe" src="http://192.168.2.235/son.html"></iframe>
  <script type="text/javascript">

    var info = {
      message: "Hello Son!"
    };
    //发送跨域信息
    function sendInfo(){
      var sonIframe= document.getElementById("sonIframe");
      sonIframe.contentWindow.postMessage(info, '*');
    }
    //接收跨域信息
    window.addEventListener('message', function(e){
        alert(e.data.message);
    }, false);
  </script>
</body>
  • 子页面代码
<body>
  <button onClick="sendInfo()">向父窗口发送消息</button>
  <script type="text/javascript">

    var info = {
      message: "Hello Parent!"
    };
    //发送跨域信息
    function sendInfo(){
      window.parent.postMessage(info, '*');
    }
    //接收跨域信息
    window.addEventListener('message', function(e){
        alert(e.data.message);
    }, false);
  </script>
</body>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
分享XmlHttpRequest调用Webservice的一点心得
Jul 20 Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
js获取上传文件大小示例代码
Apr 10 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
javascript从定义到执行 你不知道的那些事
Jan 04 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
Vue.js 60分钟快速入门教程
Mar 28 Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
p5.js实现故宫橘猫赏秋图动画
Oct 23 Javascript
vue实现将一个数组内的相同数据进行合并
Nov 07 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 #Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
Mar 10 #Javascript
js模拟实现烟花特效
Mar 10 #Javascript
JS实现放烟花效果
Mar 10 #Javascript
JS实现烟花爆炸效果
Mar 10 #Javascript
JS Web Flex弹性盒子模型代码实例
Mar 10 #Javascript
JS实现网页烟花动画效果
Mar 10 #Javascript
You might like
设定php简写功能的方法
2019/11/28 PHP
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
js关于字符长度限制的问题示例探讨
2014/01/24 Javascript
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
2016/06/09 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
2016/06/23 Javascript
jQuery深拷贝Json对象简单示例
2016/07/06 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
python实现mysql的读写分离及负载均衡
2018/02/04 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
python安装scipy的步骤解析
2019/09/28 Python
Python %r和%s区别代码实例解析
2020/04/03 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
幼儿园小班教师寄语
2014/04/03 职场文书
暑期社会实践先进个人主要事迹
2014/05/22 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
计算机实训报告范文
2014/11/05 职场文书
酒店人事主管岗位职责
2015/04/11 职场文书
幼儿园教研工作总结2015
2015/05/12 职场文书
聊聊redis-dump工具安装问题
2022/01/18 Redis
如何用六步教会你使用python爬虫爬取数据
2022/04/06 Python
MSSQL基本语法操作
2022/04/11 SQL Server