How to communicate between the parent page and the iframe page All In One
How to communicate between the parent page and the iframe page All In One
父页面与 iframe 页面之间如何通信 All In One
postMessage
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
https://caniuse.com/?search=postMessage
// in main window
window.addEventListener('message',function(message){
if(message.data.type=="iframeScrollEvent"){
//do something
}
});
// in iframe
parent.postMessage({
type:"iframeScrollEvent",
other:"other data to pass"
}, "the url of main window");
Broadcast Channel API
https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API
https://caniuse.com/?search=Broadcast Channel
https://caniuse.com/?search=Broadcast Channel API
// in main window
const bc = new BroadcastChannel('iframeScrollEvent');
bc.onmessage = function(message){
console.log(message.data);
};
// in iframe
const bc = new BroadcastChannel('iframeScrollEvent');
bc.postMessage('Some data');
iframe.contentDocument
const iframe = document.getElementById('childPage');
console.log('iframe', iframe, iframe.contentDocument);
// iframe <iframe id="childPage" name="childPage" width="300" height="600" src="https://xgqfrms.xyz/preview/18/1294" frameborder="0">…</iframe>#document<!DOCTYPE html><html lang="en" style="font-size: 250%;">…</html></iframe> null
iframe.contentDocument;
// null
iframe.document;
// undefined
https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement
CORS bug
-
跨域 iframe 通信, 获取不到 iframe document ❌
-
同域 iframe 通信, 可以获取不到 iframe document ✅
CORS
https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
refs
©xgqfrms 2012-2020
www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！
原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！
本文首发于博客园，作者：xgqfrms，原文链接：https://www.cnblogs.com/xgqfrms/p/15638144.html
未经授权禁止转载，违者必究！
标签:
iframe
, Web API
, postMessage
, Broadcast Channel API
, contentDocument
, HTMLIFrameElement
, CORS
, JavaScript
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· .NET10 - 预览版1新功能体验（一）
2020-12-03 CURL & Weather
2020-12-03 Linux Schedule Cron & crontab All In One
2020-12-03 project config file language All In One
2020-12-03 how to use brew install gpg All In One
2020-12-03 20 个使用原生 JavaScript 实现的 Web 项目
2020-12-03 Github access token
2019-12-03 css grid layout & units function