切换标签页时如何保留iframe状态？基于Marcelle框架

问题根源在于Marcelle的标签页切换默认会卸载非活动标签的组件实例，导致iframe的DOM节点被销毁，切换回该标签时会重新创建iframe并加载URL，丢失之前的状态。以下是针对性的解决方案：

核心思路 #

避免销毁iframe所在的组件实例，通过CSS控制显示/隐藏来实现标签切换，保留iframe的DOM节点和运行状态。

方案1：修改组件生命周期方法，保留实例 #

修改你的component.js，重写mount、unmount和新增activate方法，避免重复销毁组件实例，仅通过样式控制显示：

import { Component } from '@marcellejs/core';
import View from './widget.view.svelte';

export class Widget extends Component {
    constructor(options = {}) {
        super();
        this.title = '';
        this.options = options;
        this.url = options.url || '';
        this.$$.app = null; // 初始化组件实例变量
    }

    mount(target) {
        const t = target || document.querySelector(`#${this.id}`);
        if (!t) return;
        
        // 仅在实例不存在时创建，避免重复初始化
        if (!this.$$.app) {
            this.$$.app = new View({
                target: t,
                props: {
                    title: this.title,
                    options: this.options,
                    url: this.url,
                    active: true
                }
            });
        } else {
            // 更新属性并显示组件
            this.$$.app.$set({
                title: this.title,
                url: this.url,
                active: true
            });
            t.style.display = 'block';
        }
    }

    // 卸载时仅隐藏，不销毁实例
    unmount() {
        if (this.$$.app) {
            this.$$.app.$set({ active: false });
            this.$$.app.target.style.display = 'none';
        }
    }

    // 激活标签时显示组件
    activate() {
        if (this.$$.app) {
            this.$$.app.$set({ active: true });
            this.$$.app.target.style.display = 'block';
        }
    }
}

方案2：调整Svelte视图，通过active属性控制iframe显示 #

修改view.svelte，移除条件渲染，改用active属性控制iframe的显示状态，确保DOM节点始终存在：

<script>
  import { ViewContainer } from '@marcellejs/design-system';
  export let title;
  export let url;
  export let active = true; // 新增属性控制显示
</script>

<ViewContainer {title}>
  <iframe 
    title="Embedded Management Panel"
    src={url}  
    width="{parseInt(window.innerWidth) * 0.9}" 
    height="750px" 
    style="border: none; display: {active ? 'block' : 'none'};"
  ></iframe>
</ViewContainer>

<style>
  .my-color {
    color: seagreen;
  }
</style>

方案3：使用Marcelle标签页的持久化选项（若支持） #

检查Marcelle框架的Tabs组件文档，如果提供了类似keep-alive、preserve-panel的配置项，直接开启即可保留非活动标签的DOM节点。例如：

<Tabs preserveInactive>
  <TabPanel title="常规设置">...</TabPanel>
  <TabPanel title="属性管理">
    <Widget url="/your-management-page" />
  </TabPanel>
</Tabs>

验证效果 #

完成上述修改后，切换标签时iframe的DOM节点会被保留，仅通过display样式控制可见性，不会触发重新加载，内部变量状态和操作数据将持久化。

内容的提问来源于stack exchange，提问作者dea