jQuery 跨 Frame 操作：透過 window.top 存取頂層視窗再定位目標 iframe

頁面結構：頂層 frameset 分為上 top、左 left、主 mainFrame 三個 frame。需在 top frame 點擊連結後，修改 left frame 中 id="show" 元素的內容。直接用 parent.frames["left"] 因同源策略或 frame 階層關係失效。

解決思路：透過 window.top 取得頂層視窗，再向下查找

// 在 top frame 頁面中
$('#yh').click(function() {
    // 1. 取得頂層視窗
    var topWin = window.top;
    // 2. 從頂層找到 left frame 的 document
    var leftDoc = topWin.frames['left'].document;
    // 3. 操作目標元素
    $(leftDoc).find('#show').html('xxxx');
});

關鍵點

• 同源策略：所有 frame 必須同域名/協定/埠，否則跨域被瀏覽器攔截（需配置 document.domain 或 CORS）。
• frame 階層：window.top 永遠指向最頂層 frameset 視窗，避免 parent 層級不確定的問題。
• jQuery 選擇器上下文：$(selector, context) 或 $(context).find(selector) 指定搜尋範圍為目標 frame 的 document。

替代方案：頂層定義共用函式

在頂層 frameset 頁面定義：

function updateLeftShow(html) {
    frames['left'].document.getElementById('show').innerHTML = html;
}

子 frame 呼叫 window.top.updateLeftShow('xxxx')，封裝性更好、耦合度更低。

掌握 window.top 跨 frame 存取模式，可靈活解決多層 frame 間的通訊與操作需求。