面试从微前端拓展到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

2、通过 iframe DOM 直接调用

父页面调用 iframe

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

iframe 调用父页面方法

window.parent.someFunction()