Vue与Iframe双向通信并且等待子页面响应

可以在父级页面中使用Promise来等待子iframe发送确认消息。在父级页面中，您可以使用以下代码来等待子iframe发送确认消息：

function waitForConfirmation() {
  return new Promise(resolve => {
    window.addEventListener('message', function handler(event) {
      if (event.origin !== 'http://example.com') return // 检查消息的来源
      if (event.data === 'confirmed') {
        window.removeEventListener('message', handler) // 移除事件监听器
        resolve()
      }
    })
  })
}
​
async function doSomething() {
  // 发送消息到子iframe
  const iframe = document.getElementById('my-iframe')
  iframe.contentWindow.postMessage('hello from parent', '*')
​
  // 等待子iframe发送确认消息
  await waitForConfirmation()
​
  // 继续执行其他代码
  console.log('confirmed')
}

在子iframe中，可以使用以下代码来发送确认消息：

const parentWindow = window.parent
parentWindow.postMessage('confirmed', '*')

这里，confirmed是确认消息的内容。在父级页面中，waitForConfirmation()函数返回一个Promise，该Promise将在收到确认消息时解析。在doSomething()

函数中，我们首先发送消息到子iframe，然后等待确认消息。一旦收到确认消息，我们就可以继续执行其他代码。