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

2022-05-03 12:03:38 字數 2241 閱讀 1284

父頁面parent.html

function say()

function callchild()

script>

head>

iframe>

body>

html>

子頁面child.html

function say()

function callparent()

script>

head>

body>

html>

方法呼叫

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

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

dom元素訪問

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

注意事項

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

1. iframe上用onload事件

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

例子:iframe子頁面讓父頁面跳轉

parent頁面

iframe>

div>

child頁面

裡面有乙個按鈕,點選跳轉頁面,如果直接寫location.href ='',還是在iframe中

如果跳轉的頁面不想在iframe中,可以加乙個parent

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

父頁面向子頁面傳遞資料

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

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

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

子頁面向父頁面傳遞資料

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

Iframe父頁面與子頁面之間的呼叫

iframe父頁面與子頁面之間的呼叫 專業詞語解釋如下 iframe iframe元素是文件中的文件。window物件 瀏覽器會在其開啟乙個html文件時建立乙個對應的window物件。但是,如果乙個文件定義了乙個或者多個框架 即 包含乙個或者多個frame或者iframe標籤 瀏覽器就會為原始文件...

iframe子頁面與父頁面之間互相操作的方法。

jquery取得iframe中元素的幾種方法 在iframe子頁面獲取父頁面元素 如下 objid parent.document 在父頁面 獲取iframe子頁面的元素 如下 objid document.frames iframename document document.getelement...

iframe父頁面與子頁面之間的元素獲取與方法呼叫

父頁面與子頁面之間的元素獲取與方法呼叫 1 js 父調子 子調父 元素 window.frames iframe的name屬性值 window.parent.document.getelementbyid 父頁面元素id window.parent.document.getelementsbytag...