技术栈：Spring Boot + Thymeleaf + jQuery + Bootstrap 4
适用场景：传统 iframe 后台框架的标签页体验优化

---

1. 问题背景

我们的物联网平台采用经典的"左侧菜单 + 顶部标签 + iframe 内容区"后台布局。用了一段时间后，用户反馈最多的一个问题是：

从「设备列表」进入「设备工作台」，再切回「设备列表」，之前设置的筛选条件、翻到的页码、滚动位置——全没了。

这不是个例。只要涉及多页面来回切换的场景，都会复现。

排查后发现，问题出在内容区的实现方式上——整个内容区只有一个 iframe，切换标签时反复修改它的 src：

<div id="content-main">
    <iframe class="tab-iframe" src="/main"></iframe>
</div>

$(".tab-iframe").attr("src", tabUrl);

每次切换都在重新加载目标页面，所谓的"标签"只是一个记录了 URL 的 li 元素，和内容区并没有一一对应关系。src 被重新赋值，页面必然重新加载，状态必然丢失。

继续在单 iframe 上做"状态保存/恢复"修补，需要为每个页面单独编写序列化和反序列化逻辑，工作量大且边角问题不断。

---

2. 改造方案

2.1 核心思路

不让 iframe 被复用，而是让每个标签拥有自己的 iframe。 切换标签时，不再修改 iframe 的 src，而是通过 CSS 控制显隐：

• 激活的标签 → 对应的 iframe display: block
• 其他标签 → 对应的 iframe display: none

iframe 没有被销毁，页面自然保留全部状态。

2.2 改造后的 HTML 结构

<div class="tab-frame-container" id="content-main">
    <iframe class="tab-iframe active" data-id="/main" src="/main"></iframe>
    <!-- 后续打开的页面会动态追加到这里 -->
</div>

每打开一个新标签，就向容器追加一个新 iframe，iframe 之间通过 data-id 属性建立与 tab 的映射关系。

2.3 CSS 显隐控制

/* 容器相对定位，iframe 绝对定位叠放 */
.tab-frame-container { position: relative; overflow: hidden; }

/* 所有 iframe 默认隐藏，绝对定位叠放在容器内 */
.tab-iframe {
    display: none;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

/* 只有当前激活的 iframe 可见 */
.tab-iframe.active { display: block; }

这和浏览器原生标签页的行为一致——切换时不重新加载，只切换显示。

---

3. 核心实现

在 index.js 中新增三个核心函数，承担 iframe 的创建、显隐和销毁。

3.1 创建或显示

function createOrShowFrame(url) {
    var $frame = $(".tab-iframe[data-id='" + url + "']");
    if ($frame.length > 0) {
        // 已有 iframe，直接激活显示
        $(".tab-iframe").removeClass("active");
        $frame.addClass("active");
    } else {
        // 新建 iframe 并加载目标页面
        $(".tab-iframe").removeClass("active");
        var $newFrame = $(
            '<iframe class="tab-iframe active" ' +
            'data-id="' + escapeHtml(url) + '" ' +
            'src="' + escapeHtml(url) + '" ' +
            'title="内容区域"></iframe>'
        );
        $("#content-main").append($newFrame);
    }
}

这是整个改造的核心：如果 iframe 已存在，只切换 class，不碰 src。这就是状态得以保留的关键。

3.2 删除指定 iframe

function removeFrameByUrl(url) {
    $(".tab-iframe[data-id='" + url + "']").remove();
}

关闭标签时同步清理对应 iframe，避免 DOM 节点堆积。

3.3 改造标签行为

原有的标签管理函数只需要做一件事：把 $(".tab-iframe").attr("src", url) 替换为 createOrShowFrame(url)。以"打开新页面"和"关闭标签"为例：

// 打开新页面
function appendTab(menuUrl, menuName) {
    // ... 创建 tab HTML ...
    $(".nav-tabs").append(navTabHTML);
    createOrShowFrame(menuUrl);   // 创建新 iframe，不再改 src
    refreshTabControls();
}

// 关闭标签
function closeTab($tab) {
    var tabUrl = $tab.children(".tab-link").data("id");
    var $nextTab = $tab.next(".nav-tab");
    var $prevTab = $tab.prev(".nav-tab");

    $tab.remove();
    removeFrameByUrl(tabUrl);     // 同步删除 iframe

    if ($tab.children(".tab-link").hasClass("active")) {
        var targetUrl = ($nextTab.length ? $nextTab : $prevTab)
            .children(".tab-link").data("id") || "/main";
        activateTabByUrl(targetUrl);
    }
}

"关闭其他"和"关闭全部"同理——循环中对每个被关闭的 tab 调用 removeFrameByUrl，确保隐藏 iframe 不会越堆越多。

---

4. 统一跳转入口

光改主框架不够。在实际项目中，页面之间的跳转入口往往分散在多个地方：左侧菜单点击、页面内的快捷导航按钮、首页看板的入口卡片。如果各自用不同方式打开页面，就会出现一部分走真标签、一部分仍走旧逻辑的情况。

收口原则：所有入口统一调用主框架的两个公开方法——parent.activateTabByUrl(url) 激活已有 tab，parent.appendTab(url, name) 新建 tab。

以 product-links.js 中的 openParentTab 为例，改造前后对比：

// 旧代码（已删除）：直接操作 iframe src
parentJQuery(".tab-iframe").attr("src", menuUrl);

// 新代码：统一走主框架 API
function openParentTab(menuUrl, menuName) {
    var parentJQuery = window.parent && window.parent.$ ? window.parent.$ : null;
    if (!parentJQuery) { window.location.href = menuUrl; return; }

    var tabExists = parentJQuery(".nav-tabs .tab-link").filter(function () {
        return parentJQuery(this).data("id") === menuUrl;
    }).length > 0;

    if (tabExists && typeof window.parent.activateTabByUrl === "function") {
        window.parent.activateTabByUrl(menuUrl);
    } else if (!tabExists && typeof window.parent.appendTab === "function") {
        window.parent.appendTab(menuUrl, menuName);
    }
}

其余入口文件做了同样的精简——去掉直接操作 iframe src 的旧代码，统一收口到主框架 API。

---

5. 动态 iframe 的事件委托

后台有一套自动为页面添加标题栏和快捷导航按钮的逻辑，会在 iframe 加载完成后注入页面头部。改造前，它直接绑定在唯一的 iframe 上；改造后，iframe 是动态创建的，必须改用事件委托：

// 旧代码：直接绑定
$(".tab-iframe").off("load.pageHeader").on("load.pageHeader", function () {
    applyHeader(this);
});

// 新代码：事件委托，支持所有当前和未来的 iframe
$(document).off("load.pageHeader", ".tab-iframe")
    .on("load.pageHeader", ".tab-iframe", function () {
        applyHeader(this);
    });

同时，applyHeader 内部读取 URL 的方式也要调整——从"读当前激活的 tab"改为"读触发事件的那个 iframe 的 data-id"：

// 旧代码（只适用于单 iframe）
const tabUrl = $(".nav-tabs .tab-link.active").data("id") || "";

// 新代码（适用于多 iframe）
const tabUrl = $(iframe).data("id") || "";

这个改动看似微小，但如果漏掉，会出现"页面 A 加载完成，却拿到了页面 B 的标题和导航按钮"的诡异 bug。

---

6. 改造效果与注意事项

6.1 效果对比

场景	改造前	改造后
设备列表 → 工作台 → 设备列表	筛选/页码/滚动全部重置	天然保留
告警日志 → 工作台 → 告警日志	页面重新加载	天然保留
5 个标签来回切换	每次都重新请求服务器	只在首次打开时加载
关闭标签	只删 tab，iframe 被复用	tab + iframe 同步删除
内存占用	始终只有一个 iframe	随标签数量线性增长

6.2 需要注意的几个点

（1）内存是真实的代价。 每个标签保留一个独立 iframe，打开越多内存占用越高。应对方式是确保"关闭其他"和"关闭全部"功能可用，用户需要时可以一键清理。

（2）首页 iframe 不可关闭。 首页作为默认标签，关闭按钮不会显示，对应的 iframe 也不会被"关闭其他/关闭全部"删除。

（3）极少数页面可能依赖"每次切换都刷新"。 改造后页面不再自动刷新，如果某些页面确实需要重新加载（比如实时数据看板），可以为这些页面单独加"刷新"按钮，而不是回退到假标签模式。

（4）同步性是关键。 tab 和 iframe 必须严格同步：新增同步新增、激活同步显示、删除同步删除。任何一处漏掉，都会导致"标签和页面不一致"的问题。

6.3 改动范围

本次改造共涉及 5 个文件，全部在前端完成，不影响后端逻辑：

文件	改动
modern-theme.css	新增 iframe 显隐和容器定位样式
index.html	内容区加容器 class，初始 iframe 加 data-id
index.js	新增 3 个 iframe 管理函数，改造 7 个标签管理函数
product-links.js	删除 iframe src 兜底逻辑，统一走主框架 API
main.js	同上

大多数业务页面无需任何改动——只要 iframe 不销毁，页面自然保留状态。

---

这篇文章记录了一次对传统 iframe 后台框架的务实改造。方案不新，思路不复杂，但解决了一个长期困扰用户的核心体验问题。