详解如何让页面与?iframe?进行通信_JavaScript

来源:脚本之家  责任编辑:小易  
目录
引言iframe 向父级页面发送消息父级页面向 iframe 发送消息接收消息指定发送消息的域名

引言

这篇文章介绍如何实现页面与 iframe 进行通信,实际工作中可能很难遇到,但一旦遇到了,我们要能够立即想到怎样去实现。

iframe 向父级页面发送消息

在 iframe 页面,使用 window.parent 调用 postMessage 方法,即可发送消息给父级页面。

window.parent.postMessage(message, '*');

message 只能是 String 类型,所以如果想发送多条数据,可以使用 JSON 序列化对象。

// 序列化对象
const message = JSON.stringify({
  message: 'Hello',
  date: Date.now(),
});
window.parent.postMessage(message, '*');

使用 JSON.stringify 方法对内容进行序列话,即可在传入 postMessage 方法。

父级页面向 iframe 发送消息

在父级页面,使用 iframe.contentWindow 调用 postMessage 方法,即可发送消息给 iframe。

iframeEl.contentWindow.postMessage(message, '*');

iframeEl 表示 iframe DOM 对象。

通过上面两个例子,我们可以得到一个信息。

向谁发送消息,那么调用者对象就是这个发送消息的目标对象,而不是当前对象。

这一点需要非常注意,这里是很容里踩坑的。

接收消息

无论是在 iframe 页面还是父级页面,都是使用 window 监听 message 事件接收消息。

window.addEventListener('message', function (e) {
  // 获取消息内容 data
  const { data } = e;
});

如果消息内容是序列化后的对象,还需要将消息内容反序列化。

window.addEventListener('message', function (e) {
  // 获取消息内容 data
  let { data } = e;
  data = JSON.parse(data);
});

使用 JSON.parse 方法对内容进行反序列化,即可的到传递过来的内容对象。

指定发送消息的域名

上面我们使用 postMessage 方法,传递的第二个参数都是 *,这里的含义是指任何域名都能接收消息。

建议如果知道消息接收方的域名,第二个参数请传递消息接收方的域名。因为这里是会存在安全隐患的,任何站点都可以向你的站点发送消息,如果没有做相关安全处理,是很容易造成攻击的。

iframeEl.contentWindow.postMessage(message, 'https://www.baidu.com');

上面的示例代码标识仅当 iframe 的指向 https://www.baidu.com 时才会发送消息。

通过制定域名的的方式,避免安全隐患。

以上就是详解如何让页面与 iframe 进行通信的详细内容,更多关于页面与iframe通信的资料请关注真格学网其它相关文章!

您可能感兴趣的文章:通过伪协议解决父页面与iframe页面通信的问题嵌入式iframe子页面与父页面js通信的方法iframe子页面与父页面在同域或不同域下的js通信JavaScript中sharedWorker 实现多页面通信的实例详解百度小程序之间的页面通信过程详解如何实现iframe父子传参通信JS解决iframe之间通信和自适应高度的问题

  • 本文相关:
  • 前端canvas中物体边框和控制点的实现示例
  • 微信小程序 使用canvas制作k线实例详解
  • 微信小程序 高德地图sdk详解及简单实例(源码下载)
  • js时间分片技术解决长任务导致的页面卡顿
  • 浅谈js正则regexp对象
  • 微信小程序promsie.all和promise顺序执行
  • 微信小程序 loading(加载中提示框)实例
  • 微信小程序 location api实例详解
  • 微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
  • 微信小程序 toast 详解及实例代码
  • 京东超市页面的商品介绍怎么做的?
  • 为什么我的WORD文档页面大小不一样,具体情况图详解。
  • 淘宝宝贝页面怎么设置宽屏呢、
  • 急急急!请问如何在页面右下角插入脚注?
  • android中如何设置点击button页面跳转
  • 设计一个专题页面、然后切页面、套程序,让这个专题正常的在...
  • mx2怎么删除多余的屏幕页面
  • 在flash中,如何制作当鼠标移动到页面某个位置时,该位置出现相...
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全javascriptasp.netphp编程ajax相关正则表达式asp编程jsp编程编程10000问css/htmlflex脚本加解密web2.0xml/rss网页编辑器相关技巧安全相关网页播放器其它综合dart首页javascript通过伪协议解决父页面与iframe页面通信的问题嵌入式iframe子页面与父页面js通信的方法iframe子页面与父页面在同域或不同域下的js通信javascript中sharedworker 实现多页面通信的实例详解百度小程序之间的页面通信过程详解如何实现iframe父子传参通信js解决iframe之间通信和自适应高度的问题前端canvas中物体边框和控制点的实现示例微信小程序 使用canvas制作k线实例详解微信小程序 高德地图sdk详解及简单实例(源码下载)js时间分片技术解决长任务导致的页面卡顿浅谈js正则regexp对象微信小程序promsie.all和promise顺序执行微信小程序 loading(加载中提示框)实例微信小程序 location api实例详解微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍微信小程序 toast 详解及实例代码微信小程序 数组(增,删,改,查)等操作实例详解微信小程序 for 循环详解微信小程序 小程序制作及动画(animation样式)详解微信小程序 input输入框控件详解及实例(多种示例)微信小程序 input输入框详解及简单实例微信小程序 传值取值的几种方法总结微信小程序 时间格式化(util.formattime(ne微信小程序中使元素占满整个屏幕高度实现方法微信小程序 wx.request(接口调用方式)详解及实例微信小程序通过api接口将json数据展现到小程序示例微信小程序点击控件修改样式实例详解微信小程序request请求后台接口php的实例详解javascript异步操作中串行和并行foreach循环里break使用方式详解javascript使用integrity属性进行安全验证微信小程序 获取设备信息 api实例详解微信小程序 window_x64环境搭建微信小程序 input输入框控件详解及实例(多种示例)javascript中直接写undefined的错误及用法剖析js创建对象的四种方式
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved