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 checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
JS操作图片(增,删,改) 例子
Apr 17 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
Apr 01 Javascript
js实现PC端和移动端刮卡效果
Mar 27 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
Vue实例中生命周期created和mounted的区别详解
Aug 25 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 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的FTP学习(四)
2006/10/09 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
ThinkPHP入库出现两次反斜线转义及数据库类转义的解决方法
2014/11/04 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
浅谈PHP中Stream(流)
2015/06/08 PHP
php 运算符与表达式详细介绍
2016/11/30 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
表单验证的完整应用案例探讨
2013/03/29 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
2015/05/25 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
2016/05/31 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
JavaScript的setter与getter方法
2017/11/29 Javascript
浅谈React高阶组件
2018/03/28 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
2018/08/12 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
vue+canvas实现移动端手写签名
2020/05/21 Javascript
Vue使用axios引起的后台session不同操作
2020/08/14 Javascript
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python常用列表数据结构小结
2014/08/06 Python
对于Python中RawString的理解介绍
2016/07/07 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
python学习之matplotlib绘制散点图实例
2017/12/09 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
python代码编写计算器小程序
2020/03/30 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
Linux Interview Questions For software testers
2012/06/02 面试题
志愿者宣传口号
2014/06/17 职场文书
2015年调度员工作总结
2015/04/30 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
初级职称评定工作总结
2015/08/13 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书
react 路由Link配置详解
2021/11/11 Javascript