面试从微前端拓展到iframe是如何通信的

一、跨域通信

1、父页面发消息给 iframe

const iframe = document.getElementById('myIframe'); 
iframe.contentWindow.postMessage('form parent', 'https://iframe-domain.com')

// iframe 接收
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://parent-domain.com') {
    return; // 检查消息来源以确保安全
  }
  console.log('Message from parent:', event.data);
})

2、发消息给父页面：

window.parent.postMessage('from iframe', 'https://parent-domain.com')

// 父页面接收
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://iframe-domain.com') {
    return; // 检查消息来源以确保安全
  }
  console.log('Message from iframe:', event.data)
})

二、同源通信

1、共享存储

localStorage、sessionStorage

localStorage.setItem('message', '今晚吃火锅！');

window.addEventListener('storage', (event) => {
  if (event.key === 'message') {
    console.log('新留言:', event.newValue);
  }
});

2、通过 iframe DOM 直接调用

父页面调用 iframe

const iframe = document.getElementById('myIframe')
iframe.contentWindow.someFunction()

iframe 调用父页面方法

window.parent.someFunction() 

3、BroadCast Channel 通道

// 创建通道
const channel = new BroadcastChannel('shop_channel');
channel.postMessage({ action: 'addMsg', content: '今晚吃火锅' });

// 接收
channel.onmessage = (event) => {
  console.log('收到消息:', event.data); 
};