xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

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

  1. 跨域 iframe 通信, 获取不到 iframe document ❌

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

posted @ 2021-12-03 15:20  xgqfrms  阅读(30)  评论(5)  编辑  收藏  举报