X

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

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

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

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

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

在此 Github 有完整範例

範例測試步驟

  1. git clone https://github.com/tsung/iframe-inter-communication
  2. 複製 iframe-parent-postmessage.htmliframe-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)

相關網頁

Tsung: 對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.
Related Post