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 相关文章推荐
总结一些js自定义的函数
Aug 05 Javascript
给jQuery方法添加回调函数一款插件的应用
Jan 21 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
Nov 15 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 Javascript
浅析Vue 防抖与节流的使用
Nov 14 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
详解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简单静态页生成过程
2008/03/27 PHP
一步一步学习PHP(8) php 数组
2010/03/05 PHP
thinkphp备份数据库的方法分享
2015/01/04 PHP
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
php自动加载方式集合
2016/04/04 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例
2019/05/29 PHP
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
2013/11/25 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
WEB 前端开发中防治重复提交的实现方法
2016/10/26 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
一个简易的js图片轮播效果
2017/07/22 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
vue使用nprogress实现进度条
2019/12/09 Javascript
简述Vue中容易被忽视的知识点
2019/12/09 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
Python Pillow Image Invert
2019/01/22 Python
python圣诞树编写实例详解
2020/02/13 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
Python如何使用27行代码绘制星星图
2020/07/20 Python
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
教育科研先进个人材料
2014/01/26 职场文书
心理健康活动总结
2014/04/30 职场文书
2014年辅导员工作总结
2014/11/18 职场文书
2014年度个人总结范文
2015/03/09 职场文书
房屋维修申请报告
2015/05/18 职场文书
惊天动地观后感
2015/06/10 职场文书
Python制作一个随机抽奖小工具的实现
2021/07/07 Python
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL
使用Ajax实现进度条的绘制
2022/04/07 Javascript