HTML iframe 很常使用，遇到內外(父頁與子頁)想要互相溝通(使用 postMessage) 要怎麼做呢？
此篇使用 HTML postMessage 的 呼叫方式來說明
iframe 父頁與子頁互相呼叫的方法 (使用 postMessage 呼叫)
Window postMessage() 的說明文件可見：
在此 Github 有完整範例
範例測試步驟
- git clone https://github.com/tsung/iframe-inter-communication
- 複製 iframe-parent-postmessage.html 和 iframe-child-postmessage.html 檔案到根目錄
- 打開 http://example.com/iframe-parent-postmessage.html 就可以測試了
- 註：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 呼叫)
