HTML iframe 多層嵌套：子頁面獲取頂層父頁面 window 對象

場景

a.html (頂層)
  └─ iframe → b.html
        └─ iframe → c.html (目標：獲取 a.html 的 window)

核心 API

同域解決方案

方法一：直接使用 window.top（最簡單）

// c.html 中
const topWindow = window.top; // 直接獲取 a.html 的 window
console.log(topWindow.document.title); // 訪問頂層文檔
topWindow.someFunction(); // 調用頂層函數

方法二：遞歸查找（可控深度）

function getTopWindow(win = window) {
    return win === win.top ? win : getTopWindow(win.parent);
}

// 使用
const topWin = getTopWindow();

方法三：通過 frameElement 向上遍歷（調試用）

function getAllAncestors() {
    const ancestors = [];
    let current = window;
    while (current !== current.top) {
        ancestors.push({
            url: current.location.href,
            frameElement: current.frameElement
        });
        current = current.parent;
    }
    ancestors.push({ url: current.location.href, frameElement: null }); // top
    return ancestors;
}

跨域解決方案：postMessage

// c.html (子頁面) - 發送消息請求數據
window.parent.postMessage({ type: 'GET_TOP_DATA', payload: {} }, '*');

// 或指定目標源 (更安全)
window.top.postMessage({ type: 'GET_TOP_DATA' }, 'https://parent-domain.com');

// a.html (頂層父頁面) - 監聽並響應
window.addEventListener('message', (event) => {
    // 安全驗證來源
    if (event.origin !== 'https://child-domain.com') return;
    
    if (event.data.type === 'GET_TOP_DATA') {
        event.source.postMessage({
            type: 'TOP_DATA_RESPONSE',
            data: {
                title: document.title,
                user: getCurrentUser(),
                // 任意可序列化數據
            }
        }, event.origin);
    }
});

安全最佳實踐

• ✅ **始終驗證 event.origin**
• ✅ **指定 targetOrigin** 而非 '*'
• ✅ **定義消息協議**：{ type, payload } 結構
• ❌ 避免在消息中傳遞敏感數據（Token、密碼）

常見坑點

參考資源

CSDN: iframe 嵌套獲取父頁面對象詳解

總結

• 🎯 **同域**：直接用 window.top 獲取頂層 window
• 🌐 **跨域**：postMessage 雙向通信，驗證 origin
• 🔧 **調試**：window.frameElement 定位 iframe 元素，getAllAncestors() 打印層級鏈

1. 上一篇文章： HTML 圖片熱區映射：單張圖片不同區域顯示不同 title 提示文本
2. 下一篇文章： 大量日志文件統計 Top 10 IP：Linux 命令行與大數據框架方案對比

程式設計疑難解答

C++ 默認構造函數與友元函數的交互陷阱：未初始化成員訪問導致報錯

C++ 中一個經典的「看似合理實則危險」的問題：類包含友元函

C 語言新手編譯錯誤：mian 與 main 的區別

C 語言程式編譯時出現 LNK2019 無法解析的外部符號

JavaScript AJAX 請求中 URL 拼接的含義解析

理解 base + /base/queryCommonVeh

jQuery 為 embed 標籤動態新增 allowFullScreen 屬性

問題 HTML 中的 <embed> 標籤缺少