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 相关文章推荐
jQuery Ajax使用 全解析
Dec 15 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
Jun 08 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
May 14 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
Jul 22 Javascript
js关于getImageData跨域问题的解决方法
Oct 14 Javascript
vue动态改变背景图片demo分享
Sep 13 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 Javascript
Vuex实现数据增加和删除功能
Nov 11 Javascript
使用node.JS中的url模块解析URL信息
Feb 06 Javascript
vue模块移动组件的实现示例
May 20 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数据采集的详解
2013/06/02 PHP
PHP中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
img标签中onerror用法
2009/08/13 Javascript
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
Js冒泡事件详解及阻止示例
2014/03/21 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
2016/01/08 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
微信小程序转发事件实现解析
2019/10/22 Javascript
JavaScript实现文件下载并重命名代码实例
2019/12/12 Javascript
Node登录权限验证token验证实现的方法示例
2020/05/25 Javascript
[46:10]2014 DOTA2国际邀请赛中国区预选赛 CnB VS HGT
2014/05/21 DOTA
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python中文编码问题小结
2014/09/28 Python
python如何在列表、字典中筛选数据
2018/03/19 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
Python多线程的退出控制实现
2020/08/10 Python
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
什么是网络协议
2016/04/07 面试题
奉献爱心演讲稿
2014/09/04 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2015年公路养护工作总结
2015/05/13 职场文书
财务人员入职担保书
2015/09/22 职场文书
PHP判断是否是json字符串
2021/04/01 PHP
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang