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, 禁止转载 ️，侵权必究⚠️！