iframe 子頁面與父頁面通訊

iframe子頁面與父頁面通訊根據iframe中src屬性是同域鏈結還是跨域鏈結，通訊方式也不同。

一、同域下父子頁面的通訊

子頁面呼叫父頁面方法：parent.window.parentmethod();

獲取到頁面的window.document物件後，即可訪問dom元素

注意事項

要確保在iframe載入完成後再進行操作，如果iframe還未載入完成就開始呼叫裡面的方法或變數，會產生錯誤。判斷iframe是否載入完成有兩種方法：

1. iframe上用onload事件

2. 用document.readystate=="complete"來判斷

如果iframe所鏈結的是外部頁面，因為安全機制就不能使用同網域名稱下的通訊方式了。

實現的技巧是利用location物件的hash值，通過它傳遞通訊資料。在父頁面設定iframe的src後面多加個data字串，然後在子頁面中通過某種方式能即時的獲取到這兒的data就可以了，例如：

1. 在子頁面中通過setinterval方法設定定時器，監聽location.href的變化即可獲得上面的data資訊

2. 然後子頁面根據這個data資訊進行相應的邏輯處理

實現技巧就是利用乙個**iframe，它嵌入到子頁面中，並且和父頁面必須保持是同域，然後通過它充分利用上面第一種通訊方式的實現原理就把子頁面的資料傳遞給**iframe，然後由於**的iframe和主頁面是同域的，所以主頁面就可以利用同域的方式獲取到這些資料。使用 window.top或者window.parent.parent獲取瀏覽器最頂層window物件的引用。

iframe子頁面與父頁面通訊

父頁面html iframe.html頁面 關鍵點 父親訪問孩子頁面 window framename 返回iframe頁面的window物件 js中定義的方法和變數都做為window物件的屬性存在 iframe訪問父親頁面 parent 代表父親的window物件 html和iframe的跨域通訊...

iframe子頁面與父頁面js通訊

父頁面呼叫子頁面方法 framename.window.childmethod 子頁面呼叫父頁面方法 parent.window.parentmethod 獲取到頁面的window.document物件後，即可訪問dom元素 注意事項 要確保在iframe載入完成後再進行操作，如果iframe還未載...

iframe子頁面與父頁面之間通訊

父頁面parent.html function say function callchild script head iframe body html 子頁面child.html function say function callparent script head body html 方法呼叫 ...