vue3+element-plus项目中使用iframe嵌入子项目，点击el-menu打开子级菜单，再点击iframe区域，子级菜单不收起（隐藏）

倾城烟雨墨

已于 2024-01-04 21:19:50 修改

阅读量1.2k

点赞数 8

文章标签： vue.js elementui 前端 typescript

于 2023-12-25 22:40:05 首次发布

本文链接：https://blog.youkuaiyun.com/qq_34743346/article/details/135209946

版权

文章讲述了在Vue3项目中使用Element-Plus时，如何通过postMessage方法解决因浏览器安全策略导致的iframe内点击事件无法穿透到父页面的问题，以及如何在主项目中监听并处理来自iframe的消息，确保弹出层功能正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目场景：

以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', () => {
  })
})