iframe 使用

iframe 與父頁面的主動交互

父頁面與 iframe 交互

/**
 * 父頁面獲取 iframe window 對象
 */
const iframeWin = document.getElementById("iframe").contentWindow;
const iframeWin = document.getElementsByTagName('iframe')[0].contentWindow;
/**
 * 父頁面獲取 iframe document 對象
 */
const iframeDoc = iframeWin.document;
/**
 * 父頁面獲取 iframe body 對象
 */
const iframeBody = iframeDoc.body;
/**
 * 父頁面調用 iframe 方法
 */
iframeWin.method(); // method 是 iframe 的一個方法名

iframe 與父頁面交互

/**
 * iframe 獲取父頁面 window 對象
 */
const parentWin = window.parent;
/**
 * iframe 獲取父頁面 document 對象
 */
const parentDoc = window.parent.document;
/**
 * iframe 獲取父頁面 window 對象
 */
const parentBody = window.parent.body;
/**
 * iframe 調用父頁面的方法
 */
window.parent.method(); // method 是父頁面的方法

iframe 與父頁面傳遞數據

window.postMessage 是容許兩個(跨域)窗口或 iframes 發送數據信息。像是跨域的AJAX，但不是瀏覽器跟服務器之間交互，而是在兩個客戶端之間通訊。更多信息查看 window.postMessage。

發送消息：

/**
 * iframe 頁面發送消息
 */
const message = 'Hello!'; // 發送到其餘 window的數據
const domain = '*'; // 指定哪些窗口能接收到消息事件，‘*’表示無限制
window.postMessage(message, domain);

接收消息：

/**
 * data: 發送方窗口發送的數據
 * origin: 發送方窗口的 origin 
 * source: 發送消息的窗口對象的引用
 */
window.addEventListener('message', (event) => {
  const { data, origin, source } = event
  console.log(event)
}, false);

嵌套 ifream 跳轉

背景
A, B, C, D 是四個頁面，B 是 A 的 iframe，C 是 B 的 iframe，D 是 C 的 iframe。

問題
在 D 中跳轉頁面

跳轉
使用 window.open() 是相似的。

/**
 * 在本頁面跳轉（D 頁面跳轉）
 */
window.location.href = '';
/**
 * 在上一層頁面跳轉（C 頁面跳轉）
 */
window.parent.location.href = '';
/**
 * 在上上一層頁面跳轉（B 頁面跳轉）
 */
window.parent.parent.location.href = '';
/**
 * 在最外層頁面跳轉（A 頁面跳轉）
 */
window.top.location.href = '';

連接或form
D 頁面中有form

/**
 * form 提交後，在 D 頁面跳轉
 */
<form></form>
/**
 * form 提交後，彈出新頁面
 */
<form target="_blank"></form>
/**
 * form提交後，在 C 頁面跳轉
 */
<form target="_parent"></form>
/**
 * form提交後，在 A 頁面跳轉
 */
<form target="_top"></form>

刷新

/**
 * C 頁面刷新
 */
window.parent.location.reload();
/**
 * A 頁面刷新
 */
window.top.location.reload();