如何实现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.  

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。