当我更改选项卡时，有没有办法在 iframe 中维护信息？

Question

我有一个带有多个选项卡的网页。在其中一个中，我包含一个 iframe 作为管理某些属性的一种方式，因此我需要数据是持久的。每次我更改到另一个选项卡并返回时，Iframe 都会重新加载，从而丢失变量的状态。如何确保每次离开选项卡时 iframe 不会卸载？

我有两个文件。一是风景。svelte

  import { ViewContainer } from '@marcellejs/design-system';
  export let title;
  export let url;  // Accept the URL prop
</script>

<ViewContainer {title}>
  {#if url}
    <iframe title="" src={url}  width="(parseInt(window.innerWidth) * 0.9)" height="750px" style="border: none;"></iframe>
  {/if}
</ViewContainer>

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

另一个是组件.js

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 || '';  // Accept a URL option to embed the webpage
    }

    mount(target) {
        const t = target || document.querySelector(`#${this.id}`);
        if (!t) return;
        this.destroy();
        this.$$.app = new View({
            target: t,
            props: {
                title: this.title,
                options: this.options,
                url: this.url  // Pass URL to the view
            }
        });
    }
}

我还没有找到任何可以在这个框架内工作的东西。

Answer 1

您需要通过 CSS 隐藏 iframe，而不是通过 JS 将其从页面中删除。您当前执行此操作的方式是每次在页面上显示 iframe 时强制重新加载 iframe。