iframe子頁面與父頁面在同域或不同域下的js通訊_javascript技巧

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

一、同域下父子頁的通訊

父頁parent.html

複製程式碼

複製程式碼

複製程式碼



複製程式碼



複製碼


程式碼如下:

子頁 child.html




複製程式碼



複製程式碼

程式碼如下










方法呼叫

父頁呼叫子頁方法：FrameName.window.childMethod( );

子頁面呼叫父頁方法：parent.window.parentMethod();
DOM元素存取

取得到頁面的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物件的參考。