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

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

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

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

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

在此 Github 有完整範例

範例測試步驟

  1. git clone https://github.com/tsung/iframe-inter-communication
  2. 複製 iframe-parent.htmliframe-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(); 來執行。

相關網頁

關於「Tsung」

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.
分類: Programming,標籤: , , , , 。這篇內容的永久連結

在〈iframe 父頁與子頁互相呼叫的方法 (使用 frame 呼叫)〉中有 1 則留言

  1. 自動引用通知: iframe 父頁與子頁互相呼叫的方法 (使用 postMessage 呼叫) - Tsung's Blog

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料