这是什么dom

这是Vue开发中非常经典的高级场景。iframe的生命周期是和DOM绑定的 ，一旦Vue的<router-view>因为路由切换卸载了该组件（DOM被移除），iframe内部的window对象就会销毁。当你再次回来时，DOM重建，iframe只能重新加载。

Vue标准的<KeepAlive>也无法完美解决这个问题，因为<KeepAlive>在底层是把DOM节点移出文档流（Detach），而iframe一旦被移出文档流，浏览器内核通常会自动刷新它。

最佳实践原理：布局层分离（Layout Separation）

要实现"保活"，必须保证iframe的DOM节点永远不被移除 ，只是通过CSS隐藏（display: none）。

我们需要将这个iframe组件从 <router-view> 中移出来 ，放在布局组件（如 Layout.vue）中，与 <router-view> 并列存在。

核心架构图解

解决方案实施步骤

1. 改造布局文件 (Layout.vue)

这是最关键的一步。不要让路由去控制iframe组件的生死，而是由路由元信息控制它的显隐。

Code snippet

<template>
  <div class="app-main">
    <div v-show="!isIframeRoute" class="normal-view">
      <router-view v-slot="{ Component }">
        <component :is="Component" />
      </router-view>
    </div>

    <CentralIframeContainer v-show="isIframeRoute" />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { MODULE_MAP } from '@/constants'
import CentralIframeContainer from './CentralIframeContainer.vue' // 你提供的组件

const route = useRoute()

// 判断当前路由是否属于 iframe 菜单
const isIframeRoute = computed(() => {
  // 假设 MODULE_MAP 的 key 是路由 name
  return !!(route.name && MODULE_MAP[route.name as string])
})
</script>

运行

---

2. 优化组件代码 (CentralIframeContainer.vue)

基于你提供的代码，我进行了重构。主要改动点如下：

1. 移除销毁逻辑 ：路由切换时不再触发 onUnmounted，所以iframe不会掉线。

2. 监听路由变化：当从"原菜单"切回"iframe菜单"时，不再初始化，而是发送指令让iframe内部跳转到正确模块。

3. 懒加载初始化：第一次进入iframe相关页面时才初始化，避免应用刚打开就加载iframe消耗资源。

以下是完整可执行的优化代码：

Code snippet

<template>
  <div id="central-container" ref="containerRef"></div>
</template>

<script setup lang="ts">
import { watch, ref, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ParentIframe } from '@smb/iframe-package'
import appStore from '@/store'
import { useInitStore } from '@/store/modules/init-iframe'
import { MODULE_MAP } from '@/constants'
import { useCentralMessage } from '@/hooks/use-central-message'
import { setIframeCtrl } from '@/utils/central-iframe-manager'

// 类型定义保持不变...
interface IframeMessage {
  type: string
  data?: any
}

const route = useRoute()
const router = useRouter()
const initStore = useInitStore()
const containerRef = ref<HTMLElement | null>(null)

// 核心状态管理
let iframeCtrl: ParentIframe | null = null
let isIframeInitialized = false
let currentModule = '' // 记录iframe内部当前停留的模块

// 辅助函数：判断是否需要显示iframe (用于内部逻辑判断)
const isCurrentRouteIframe = (name: string) => !!MODULE_MAP[name]

const getModuleFromRoute = (): string => {
  const routeName = route.name as string
  return MODULE_MAP[routeName] || 'central-admin'
}

// ------------------- 核心逻辑变更区域 -------------------

// 1. 初始化逻辑 (仅执行一次)
const initializeIframe = async (): Promise<void> => {
  if (isIframeInitialized || !containerRef.value) return
  
  // 只有当确实进入了iframe页面，且尚未初始化时，才开始加载
  console.log('[CentralKeepAlive] 开始初始化 iframe 实例')

  // ... (保留你原有的 ParentIframe 实例化代码) ...
  // 为了简洁，此处省略部分原有的 getChildOrigin 等辅助代码，逻辑保持不变
  const childOrigin = getChildOrigin() 
  
  iframeCtrl = new ParentIframe([{
    name: 'CENTRAL',
    childOrigin,
    parentNode: containerRef.value
  }])
  
  setIframeCtrl(iframeCtrl)
  listenToLoadEvent()
  listenToMessageEvent()
  
  // 标记为已初始化
  isIframeInitialized = true
  
  // 初次加载不需要发 jump，因为 load 事件会处理，或者直接发 init
  show() 
}

// 2. 监听路由变化 (实现"切换"而非"重载")
watch(
  () => route.name,
  async (newName, oldName) => {
    if (!newName) return
    const newNameStr = newName as string
    
    // 情况A: 切到 Iframe 页面
    if (isCurrentRouteIframe(newNameStr)) {
      const targetModule = getModuleFromRoute()
      
      if (!isIframeInitialized) {
        // 如果是第一次访问，进行初始化
        await initializeIframe()
      } else {
        // 如果已经存在，直接发送跳转指令
        // 只有当目标模块和当前iframe停留模块不同时才跳转
        if (currentModule !== targetModule) {
          console.log(`[CentralKeepAlive] 唤醒 iframe，跳转至: ${targetModule}`)
          sendJumpMessage(targetModule)
        } else {
          console.log('[CentralKeepAlive] 唤醒 iframe，模块相同无需跳转')
        }
        
        // 可选：通知iframe它变可见了 (如果子系统需要处理)
        // iframeCtrl.send({ type: 'visibility', data: true })
      }
    } 
    // 情况B: 切到 原生 页面
    else {
       // 什么都不用做，Layout层会通过 v-show 隐藏此组件
       // iframe 实例保留在内存中，DOM 仅仅是 display: none
       console.log('[CentralKeepAlive] 切换至原生页面，iframe 进入后台保活模式')
    }
  },
  { immediate: true } // 立即执行以处理刷新页面的情况
)

// 3. 消息发送 (保持不变，增加空值保护)
const sendJumpMessage = (module: string) => {
  if (!iframeCtrl) return
  try {
    iframeCtrl.switchChild('CENTRAL') // 确保焦点在 Central
    iframeCtrl.send({
      type: 'jump',
      data: { module }
    })
    currentModule = module
  } catch (err) {
    console.error('[CentralKeepAlive] Jump 消息发送失败', err)
  }
}

// 4. show / getInitData 方法 (保持你原有逻辑)
const show = () => {
   // ... 保持原有代码 ...
   // 注意：初始化后，设置 currentModule
   const initData = getInitData()
   currentModule = initData?.module || getModuleFromRoute()
   
   // 发送 init 消息...
   if (iframeCtrl) {
       iframeCtrl.switchChild('CENTRAL')
       iframeCtrl.send({ type: 'init', data: initData || {/* default context */} }, 'CENTRAL')
   }
}

// ... (保留 getChildOrigin, listenToMessageEvent, handleCentralMessages 等原有辅助函数) ...
// 务必保留 getChildOrigin 函数，它是初始化的核心

const getChildOrigin = (): string => {
   // ... 保持你原有代码 ...
   const isDev = process.env.NODE_ENV === 'development'
   // 这里仅作示例，请保留你原始完整的逻辑
   if (isDev) return 'http://localhost:8001/?serviceType=0'
   return window.location.origin + '/cloudaccess/central/index.html' // 简化示例
}

const getInitData = () => {
   // ... 保持你原有代码 ...
   return initStore.getInitData()
}

const listenToLoadEvent = () => {
  iframeCtrl?.on('load', () => {
    console.log('[CentralKeepAlive] iframe DOM Loaded')
    // 首次加载完成，校准一次路由
    const targetModule = getModuleFromRoute()
    if (currentModule !== targetModule) {
      sendJumpMessage(targetModule)
    }
  })
}

// 5. 生命周期管理
onUnmounted(() => {
  // 只有当整个 Layout 销毁（例如退出登录、刷新浏览器）时才销毁 iframe
  console.log('[CentralKeepAlive] 组件彻底销毁，清理 iframe')
  if (iframeCtrl) {
    iframeCtrl = null
  }
  isIframeInitialized = false
})
</script>

<style lang="less">
#central-container {
  width: 100%;
  height: 100%;
  position: relative; // 确保布局正确
  // 注意：不需要 absolute 定位覆盖，因为它现在是流式布局的一部分
  
  iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
  }
}
</style>

运行

关键点总结

1. DOM位置决定生死 ：不要试图在 <router-view> 内部做保活。必须将 iframe 组件提升到 Layout 层级，与 <router-view> 平级。

2. CSS控制显隐 ：在 Layout 中使用 v-show="isIframeRoute"。当用户去往"原菜单"时，iframe 仅仅是 display: none，内存和 DOM 状态完好无损。

3. 懒加载与通讯：

   • 组件挂载时（Layout加载时）不立即创建 iframe，而是等到第一次访问 iframe 路由（watch 触发）时再创建。

   • 之后的切换，仅仅是 v-show 变为 true，同时触发 sendJumpMessage 通知 iframe 内部路由跳转。

下一步建议

Would you like me to help you refine the MODULE_MAP logic or the Layout implementation to ensure it fits seamlessly with your specific admin template (e.g., handling sidebar highlighting synchronization)?