iframe 父頁與子頁互相呼叫的方法 (使用 frame 呼叫)

HTML iframe 很常使用，遇到內外(父頁與子頁)想要互相溝通的時候，要怎麼做呢？

此篇使用 HTML frames 的 呼叫方式來說明

iframe 父頁與子頁互相呼叫的方法 (使用 frame 呼叫)

Window parent 和 frames 的說明文件可見：

• Window.parent - Web APIs | MDN
• Window.frames - Web APIs | MDN

在此 Github 有完整範例

• tsung/iframe-inter-communication: iframe parent and child inter communication

範例測試步驟

1. git clone https://github.com/tsung/iframe-inter-communication
2. 複製 iframe-parent.html 和 iframe-child.html 檔案到根目錄
3. 打開 http://example.com/iframe-parent.html 就可以測試了
4. 註：iframe-parent.html 會 iframe 嵌入 iframe-child.html，點選頁面就可以測試互相呼叫

iframe parent / child 說明

• iframe-parent.html
  • 原始碼裡面有個 test()，這是寫給 iframe (child) 呼叫使用的。
  • 於子頁(iframe-child) 使用 parent.test(); 就可以呼叫到父頁(iframe-parent)
• iframe-child.html
  • 子頁裡面的 test()，這是寫給父頁(iframe-parent) 呼叫使用，父頁可以使用 window.frames 或 parent.contentWindow.test(); 來執行。

相關網頁

• javascript - Calling a parent window function from an iframe - 孩子呼叫父親