如何實現iframe父子傳參通信

這篇文章主要介紹了如何實現iframe父子傳參通信，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

在最近的項目里面,用到了不少關于iframe父子傳參通信的相關操作,記錄一下,雖然很簡單,但是確實十分有用的;

iframe通信可以分為2種,跨域和非跨域兩種.分別說明;

有一點很重要,iframe是可以給name 屬性的;給上name 屬性可以省下一些代碼;

非跨域 父調子

1. //父頁面
2. <button class="b" id="b">點擊</button>
3. <iframe src="a.html" name='child' id="f"></iframe>
4.  
5. <script>
6. var ob=document.getElementById('b');
7. var msg='hellow,i'm your father!!'
8. ob.onclick=function(){
9. if(child.document.readyState=="complete"){
10. child.window.fnChild(msg); //關鍵
11. }
12. }
13. </script>
14.  
15. //子頁面
16. <script>
17. function fnChild (arg) {
18. console.log(arg); //確實得到了 hellow,i'm your father!!
19. }
20. </script>
21.  

父頁面調用子頁面使用 childFrameName.window.fnName();;當然有一點很重要,你需要判斷iframe 里面的東西是否加載完成,如果加載未完成就調用的話是會報錯的;
判斷iframe 加載是否完成有2種方法
1,childFrameName.document.readyState=="complete"來判斷;
2,childFrameName.onload=function(){} 使用onload 回調函數,把調用的方法都寫在這個回調函數里面;

非跨域 子調父

1. //在父頁面
2. <div id="a" class="a"></div>
3. <iframe src="a.html" name='child' id="f"></iframe>
4.  
5. <script>
6. function changeColor(){
7. var oDiv=document.getElementById('a');
8. oDiv.style.backgroundColor="red";
9. }
10. </script>
11.  
12. //在子頁面
13. <button class="ob" onclick="c()">anniu</button>
14. <script>
15. function c(){
16. parent.window.changeColor(); //關鍵
17. }
18. </script>
19.  

同樣的,在子頁面調用父頁面的方法使用 parent.window.fnName()就可以了;

這種操作難免會遇到父頁面獲取子頁面的元素,或者子頁面獲取父頁面的元素進行操作;

非跨域 父頁面獲取子頁面元素操作

首先,我們有幾種方法拿到子頁面的window對象或者doucument 對象,(還是使用上面的html)

1. //原生js 獲取子頁面window對象
2. 1, var childWindow=document.getElementById("f").contentWindow;
3. 2, var childWindow=document.getElementsByTagName('f')[0].contentWindow;
4. //其實也就是普通的獲取方法,只是后面多了一個contentWindow;
5. //jquery
6. var childWindow=$('#f').contentWindow;
7.  
8. //獲取子頁面的document對象 (假設已經通過上面的方法得到了window對象)
9. var frameDoc=childWindow.document;
10. var frameBody=frameDoc.body;
11. //jquery 也是跟上面的一樣
12. var frameDoc=$(childWindow.document);
13.  
14. //原生獲取元素
15. childWindow.document.getElementById('a') //上面都已經拿到了子頁面的window對象,所以獲取子頁面的元素也就只需要想普通操作那樣獲取就好
16. childWindow.document.getElementById('a').style.color='red' //改個顏色
17.  
18. //jq拿子頁面元素
19. $('#f').contents().find('#a'); //$('#f').contents 這相當于拿到了iframe 里面所有的dom;
20.  

非跨域 子頁面獲取父頁面元素

1. //原生js
2. window.parent.document.getElementById('a'); //window.parent獲取到父頁面的window對象,那么接可以使用一般操作獲取元素
3. window.parent.document.getElementById('a').style.color="red";//dom操作
4. //jquery
5. $("#a",parent.document); //$(父頁面元素選擇器, parent.document);
6. $("#a",parent.document).css('border','1px solid red');

上面的是不存在跨域的情況,但是有時候會遇到跨域情況,在這次的項目里面就是出于跨域狀態下,開始看了一些資料,說是在用一個iframe做中間層去做,但是太麻煩,在這里介紹一個十分還用的方法postMessage

postMessage

window.postMessage() 方法可以安全地實現跨源通信。通常，對于兩個不同頁面的腳本，只有當執行它們的頁面位于具有相同的協議（通常為https），端口號（443為https的默認值），以及主機 (兩個頁面的模數 Document.domain設置為相同的值) 時，這兩個腳本才能相互通信。window.postMessage() 方法提供了一種受控機制來規避此限制，只要正確的使用，這種方法就很安全。
以上摘自MDN 原文 postMessage;

1. otherWindow.postMessage(message, targetOrigin, [transfer]);
2. //otherWindow 窗口對象
3. // message 傳遞的消息,可以是對象,可以是字符串
4. // target 目標窗口,* 代表所有;

postMessage十分強大,既可以子傳父,也可以父穿子,并且可以突破同源限制

來看我遇到的使用場景;
我在主頁面有個透明遮罩,里面是一個iframe的登錄窗口,在子頁面點擊關閉的時候,需要關掉父頁面的這個登陸遮罩;在這里存在跨域,所以使用上面的獲取元素,操作元素的方法不能夠使用,這里使用postMassage來做

1. //子頁面
2. <div id="loginBox">登錄窗口</div>
3. <div id="close"></div>
4.  
5. //父頁面
6. <div id="loginMask">
7. <iframe src="子頁面"></iframe>
8. </div>
9.  
10. //子頁面
11. <script>
12. let oClose=document.getElementById('#close');
13. oClose.onclick=function(){
14. window.parent.postMessage('close','*');
15. }
16. </script>
17. //父頁面
18. <script>
19. window.addEventListener('message',function(event){
20. if(event.data=='close'){
21. let oLoginMask=document.getElementById('loginMask');
22. oLoginMask.style.display="none";
23. }
24. })
25. </script>
26.  

上面的代碼其實很簡單,在子頁面里面獲取了元素,該元素觸發點擊事件的時候,向父窗口發送一個消息,傳遞了一個消息;(這個消息參數會在接收頁面的event.data查到);
在父頁面監聽message事件,監聽到了就讓登錄遮罩消失;

父傳子

同樣,在父窗口也可以使用postMassage 來傳遞消息到子頁面;

1. //父頁面
2. <button id="btn">傳遞消息</button>
3. <iframe id='f' src="子頁面.html"></iframe>
4. //子頁面
5. <div id="a"></div>
6.  
7. //父頁面
8. <script>
9. let oBtn=document.getElementById('btn');
10. let oFrame=document.getElementById('f');
11. oBtn.onclick=function(){
12. oFrame.contentWindow.postMessage('hello','*');
13. }
14. </script>
15.  
16. //子頁面
17. <script>
18. window.addEventListener('message',function(){
19. if(event.data=='hello'){
20. document.getElementById('#a').innerText=event.data;
21. }
22. })
23. </script>
24.  

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持我們。