解決框架頁面退出登入無法跳出框架集的問題

問題場景

後台管理系統使用 `` 布局：左側菜單欄 (`leftFrame`)、右側內容區 (`mainFrame`)。菜單欄包含「退出系統」鏈接，點擊後僅右側框架跳轉到登入頁，左側菜單仍保留，用戶仍可操作菜單，存在安全隱患。

原始代碼

<!-- frameset 主頁 -->
<frameset rows="*" cols="185px,*" frameborder="no" border="0" framespacing="0" id="AdminMain">
    <frame src="user_left.php" frameborder="0" name="leftFrame" scrolling="yes" noresize="noresize" id="leftFrame" title="leftFrame" />
    <frame src="user_right.php" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>

<!-- 左側菜單退出鏈接 -->
<a class="menuChild" href="index.php?action=logoff" target="_self">退出系統</a>

根因分析

• target="_self" 表示在**當前框架** (`leftFrame`) 中打開鏈接
• 退出邏輯執行後，響應頁面（登入頁）僅載入左側框架
• 父級 `` 頁面未重載，右側 `mainFrame` 保持原狀

解決方案：使用 `target="_top"`

<a class="menuChild" href="index.php?action=logoff" target="_top">退出系統</a>

`target` 屬性值對照表

完整修正示例

<!-- user_left.php 菜單欄 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>管理後台菜單</title>
</head>
<body>
    <ul class="menu">
        <li><a href="dashboard.php" target="mainFrame">儀表盤</a></li>
        <li><a href="users.php" target="mainFrame">用戶管理</a></li>
        <li><a href="settings.php" target="mainFrame">系統設置</a></li>
        <li class="logout">
            <a href="index.php?action=logoff" target="_top">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
                    <polyline points="16 17 21 12 16 7"></polyline>
                    <line x1="21" y1="12" x2="9" y2="12"></line>
                </svg>
                退出系統
            </a>
        </li>
    </ul>
</body>
</html>

現代替代方案：棄用 Frameset，採用 AJAX + SPA 布局

<frameset>、<frame> 已在 **HTML5 標準中廢棄**，存在：

• SEO 不友好（搜尋引擎難以索引框架內容）
• URL 不變，無法收藏/分享特定頁面
• 瀏覽器歷史記錄混亂
• 響應式設計困難
• 無障礙訪問 (a11y) 差

推薦架構：單頁應用 (SPA) 或服務端渲染 + AJAX 部分刷新

<!-- 現代後台布局 (Flexbox/Grid) -->
<div class="app-layout">
    <aside class="sidebar" id="sidebar">
        <nav>
            <a href="/dashboard" data-nav>儀表盤</a>
            <a href="/users" data-nav>用戶管理</a>
            <a href="/settings" data-nav>設置</a>
            <button id="btnLogout">退出系統</button>
        </nav>
    </aside>
    <main class="content" id="mainContent"></main>
</div>

<script>
// 退出登入：全頁跳轉
document.getElementById('btnLogout').addEventListener('click', () => {
    window.location.href = '/logout'; // 或 fetch('/logout').then(() => location.reload())
});

// 菜單導航：AJAX 獲取內容注入 mainContent
document.querySelectorAll('[data-nav]').forEach(a => {
    a.addEventListener('click', e => {
        e.preventDefault();
        fetch(a.href).then(r => r.text()).then(html => {
            document.getElementById('mainContent').innerHTML = html;
            history.pushState(null, '', a.href); // 更新 URL
        });
    });
});
</script>

總結

1. 立即修復：將退出鏈接 `target="_self"` 改為 `target="_top"`，確保全頁跳轉
2. 短期規劃：在退出接口銷毀 Session、清除 Cookie、失效 Token
3. 長期重構：棄用 ``，遷移至現代響應式布局 (Flex/Grid) + AJAX/SPA 架構