後台管理介面常見需求：左側導航與右側內容分別載入於兩個 <iframe>，點擊頂部主導航需同時換載不同網址。用 jQuery 幾行代碼即可優雅解決，代碼簡潔且極易擴展。

核心 jQuery 函數

function goTwoFrames(urlA, urlB) {
  $('#ifr_a').get(0).src = urlA; // 原生 DOM 元素賦值 src
  $('#ifr_b').get(0).src = urlB;
}

HTML 調用示例

<a href="javascript:void(0)" onclick="goTwoFrames('https://google.com', 'https://baidu.com')>
  點我，下方兩個 iframe 內容同步變更
</a>

<iframe src="https://example.com" id="ifr_a" name="ifr_a" frameborder="0"></iframe>
<iframe src="https://example.com" id="ifr_b" name="ifr_b" frameborder="0"></iframe>

原理說明

• $('#ifr_a').get(0) 取得原生 HTMLIFrameElement，直接修改 src 屬性觸發載入。
• 純 JS 寫法需 document.getElementById('ifr_a').src = ...，代碼較冗長且需自行兼容處理。
• 若需三個以上 iframe，只需在函數參數與賦值行擴展即可。

適用場景

• 經典左右分欄後台（導航 + 內容）
• 多面板儀表板同步刷新
• 嵌入式預覽與編輯器聯動

輕量、無侵入、零依賴（除 jQuery 核心），是處理多 iframe 聯動的首選方案。