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

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

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

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

Window postMessage() 的說明文件可見：

• Window.postMessage() - 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-postmessage.html 和 iframe-child-postmessage.html 檔案到根目錄
3. 打開 http://example.com/iframe-parent-postmessage.html 就可以測試了
4. 註：iframe-parent-postmessage.html 會 iframe 嵌入 iframe-child-postmessage.html，點選頁面就可以測試互相呼叫

iframe parent / child 快速說明

• iframe-parent-postmessage.html
  • 原始碼裡面，iframe 需要給 id (id="myiframe")，就可以使用 myiframe.contentWindow.postMessage('test', ''); 傳送到 iframe (child) 頁面。
  • child 頁面會有 window.onmessage 接 收 e.data == 'test'，來決定要怎麼做。
• iframe-child-postmessage.html
  • 子頁裡面的 parent.postMessage('test-from-children', ''); ，這是寫來呼叫父頁(iframe-parent) 使用，父頁可以一樣使用 window.onmessage 和 e.data == 'test-from-children' 來 接收執行。
• 註：postMessage() 第二個參數使用 '*'，這是為了範例練習使用，實際使用有安全性顧慮，建議將 '*' 換成自己的 Domain name (ex: http://example.com)

相關網頁

• 想使用 frames 可參考此篇：iframe 父頁與子頁互相互叫的方法 (使用 frame 呼叫)

作者: Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活. 檢視「Tsung」的全部文章