iframe子頁面與父頁面js通訊

父頁面呼叫子頁面方法：framename.window.childmethod();

子頁面呼叫父頁面方法：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子頁面與父頁面js通訊方式

iframe框架中的頁面與主頁面之間的通訊方式根據iframe中src屬性是同域鏈結還是跨域鏈結，有明顯不同的通訊方式，同域下的資料交換和dom元素互訪就簡單的多了，而跨域的則需要一些巧妙的方式來實現通訊。父頁面 parent.html 子頁面 child.html 如上面示例所示父頁面呼叫子頁面的...

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

iframe子頁面與父頁面通訊根據iframe中src屬性是同域鏈結還是跨域鏈結，通訊方式也不同。父頁面parent.html 子頁面child.html 方法呼叫 父頁面呼叫子頁面方法 framename.window.childmethod 子頁面呼叫父頁面方法 parent.window.pa...

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

iframe子頁面與父頁面通訊根據iframe中src屬性是同域鏈結還是跨域鏈結，通訊方式也不同。父頁面呼叫子頁面方法 framename.window.childmethod 子頁面呼叫父頁面方法 parent.window.parentmethod 獲取到頁面的window.document物件...