项目场景：

以vue3+element-plus的主项目中的某些页面使用iframe嵌入了angular子项目。点击某些菜单需要打开对应的angular页面。

问题描述

如下图，点击灰色（iframe）区域，红色框中的二级菜单不收起。

诸如此类的，如el-popover等有弹出层的都有此问题。

原因分析：

是由于浏览器的安全策略的限制，iframe的事件（如点击事件）默认只能冒泡到iframe自身的window对象，而不能冒泡到父页面的window对象。

解决方案：

这时，我们可以使用postMessage方法向iframe的父页面发送消息。通过监听iframe内部document的点击事件来通知父页面派发对应的事件。由于弹出层（菜单）关闭是使用ClickOutside指令（可查阅element-plus源码）实现的，故我们可以这样实现：

iframe中代码：

document.addEventListener('click', () => {
        // 第二个参数传入你的targetOrigin
        window.parent.postMessage({action: 'clickIframe'}, 'http://example.com')
    })

主项目中代码：

onMounted(() => {
  window.addEventListener('message', (e) => {
    // 验证消息的来源
    if (e.origin !== "http://example.com") return;
    if (e.data.action === 'clickIframe') {
      ['mousedown', 'mouseup'].forEach(type => {
        const ev = new MouseEvent(type, {bubbles: true, cancelable: true});
        document.dispatchEvent(ev);
      })
    }
  })
})

onBeforeUnmount(() => {
  window.removeEventListener('message', () => {
  })
})