详解如何让页面与?iframe?进行通信
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
引言
这篇文章介绍如何实现页面与 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通信的资料请关注程序员之家其它相关文章！
相关文章
document 和 document.all 分别什么时候用
document 和 document.all 分别什么时候用...2006-06-06
这篇文章主要介绍了微信小程序登录态控制深入分析的相关资料,需要的朋友可以参考下2017-04-04
这篇文章主要介绍了js 实现文件上传样式，下面文章举例说明js 是如何实现文件上传样式的，附有代码详细解说,需要的朋友可以参考一下，希望对你有所帮助2021-10-10
这篇文章主要为大家介绍了ResizeObserver 监视 DOM大小变化示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了JavaScript如何实现优先级队列，在计算机里，队列是一种先进先出的数据结构。就跟我们平时排队一样，先到的排在前面，前面的优先处理，下面我们就来看看在JavaScript里面的优先队列又当如何2021-12-12
本文基于JavaScript基础，介绍了 BigInt 函数，常见的属性，通过 BigInt 函数进行数字运算符的比较。布尔运算等等，通过按案例的分析进行详细的讲解,需要的朋友可以参考一下2021-10-10
这篇文章主要介绍了微信小程序中hidden不生效原因的解决办法的相关资料,需要的朋友可以参考下2017-04-04
lodash内部方法getFuncName及setToString剖析详解
本篇章我们主要是通过了解lodash里的两个内部方法getFuncName方法和setToString方法，在实际开发中我们也可以借鉴方法的实现思路，在需要的时候简单封装一下，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要为大家介绍了JS实现将图片URL转base64示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
fs-extra实现yarn?create?tlist创建示例详解
这篇文章主要为大家介绍了fs-extra实现yarn?create?tlist创建示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
最新评论