如何实现iframe父子传参通信


Posted in Javascript onFebruary 05, 2020

在最近的项目里面,用到了不少关于iframe父子传参通信的相关操作,记录一下,虽然很简单,但是确实十分有用的;

iframe通信可以分为2种,跨域和非跨域两种.分别说明;

有一点很重要,iframe是可以给name 属性的;给上name 属性可以省下一些代码;

非跨域 父调子

//父页面
<button class="b" id="b">点击</button>
<iframe src="a.html" name='child' id="f"></iframe>

<script>
  var ob=document.getElementById('b');
  var msg='hellow,i'm your father!!'
  ob.onclick=function(){
    if(child.document.readyState=="complete"){
      child.window.fnChild(msg); //关键
    }
  }
</script>

//子页面
<script>
function fnChild (arg) {
  console.log(arg); //确实得到了 hellow,i'm your father!!
}
</script>

父页面调用子页面使用 childFrameName.window.fnName();;当然有一点很重要,你需要判断iframe 里面的东西是否加载完成,如果加载未完成就调用的话是会报错的;
判断iframe 加载是否完成有2种方法
1,childFrameName.document.readyState=="complete"来判断;
2,childFrameName.onload=function(){} 使用onload 回调函数,把调用的方法都写在这个回调函数里面;

非跨域 子调父

//在父页面
<div id="a" class="a"></div>
<iframe src="a.html" name='child' id="f"></iframe>

<script>
  function changeColor(){
    var oDiv=document.getElementById('a');
    oDiv.style.backgroundColor="red";
  }
</script>

//在子页面
<button class="ob" onclick="c()">anniu</button>
<script>
  function c(){
    parent.window.changeColor(); //关键
  }
</script>

同样的,在子页面调用父页面的方法使用 parent.window.fnName()就可以了;

这种操作难免会遇到父页面获取子页面的元素,或者子页面获取父页面的元素进行操作;

非跨域 父页面获取子页面元素操作

首先,我们有几种方法拿到子页面的window对象或者doucument 对象,(还是使用上面的html)

//原生js 获取子页面window对象
1, var childWindow=document.getElementById("f").contentWindow;
2, var childWindow=document.getElementsByTagName('f')[0].contentWindow;
//其实也就是普通的获取方法,只是后面多了一个contentWindow;
//jquery
var childWindow=$('#f').contentWindow;

//获取子页面的document对象 (假设已经通过上面的方法得到了window对象)
var frameDoc=childWindow.document;
var frameBody=frameDoc.body;
//jquery 也是跟上面的一样
var frameDoc=$(childWindow.document);

//原生获取元素
childWindow.document.getElementById('a') //上面都已经拿到了子页面的window对象,所以获取子页面的元素也就只需要想普通操作那样获取就好
childWindow.document.getElementById('a').style.color='red' //改个颜色

//jq拿子页面元素
$('#f').contents().find('#a'); //$('#f').contents 这相当于拿到了iframe 里面所有的dom;

非跨域 子页面获取父页面元素

//原生js
window.parent.document.getElementById('a'); //window.parent获取到父页面的window对象,那么接可以使用一般操作获取元素
window.parent.document.getElementById('a').style.color="red";//dom操作
//jquery
$("#a",parent.document); //$(父页面元素选择器, parent.document);
$("#a",parent.document).css('border','1px solid red');

上面的是不存在跨域的情况,但是有时候会遇到跨域情况,在这次的项目里面就是出于跨域状态下,开始看了一些资料,说是在用一个iframe做中间层去做,但是太麻烦,在这里介绍一个十分还用的方法postMessage

postMessage

window.postMessage() 方法可以安全地实现跨源通信。通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https),端口号(443为https的默认值),以及主机 (两个页面的模数 Document.domain设置为相同的值) 时,这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制,只要正确的使用,这种方法就很安全。
以上摘自MDN 原文 postMessage;

otherWindow.postMessage(message, targetOrigin, [transfer]);
//otherWindow 窗口对象
// message 传递的消息,可以是对象,可以是字符串
// target 目标窗口,* 代表所有;

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

来看我遇到的使用场景;
我在主页面有个透明遮罩,里面是一个iframe的登录窗口,在子页面点击关闭的时候,需要关掉父页面的这个登陆遮罩;在这里存在跨域,所以使用上面的获取元素,操作元素的方法不能够使用,这里使用postMassage来做

//子页面
<div id="loginBox">登录窗口</div>
<div id="close"></div>

//父页面
<div id="loginMask">
  <iframe src="子页面"></iframe>
</div>

//子页面
<script>
  let oClose=document.getElementById('#close');
  oClose.onclick=function(){
    window.parent.postMessage('close','*');
  }
</script>
//父页面
<script>
  window.addEventListener('message',function(event){
    if(event.data=='close'){
      let oLoginMask=document.getElementById('loginMask');
      oLoginMask.style.display="none";
    }
  })
</script>

上面的代码其实很简单,在子页面里面获取了元素,该元素触发点击事件的时候,向父窗口发送一个消息,传递了一个消息;(这个消息参数会在接收页面的event.data查到);
在父页面监听message事件,监听到了就让登录遮罩消失;

父传子

同样,在父窗口也可以使用postMassage 来传递消息到子页面;

//父页面
<button id="btn">传递消息</button>
<iframe id='f' src="子页面.html"></iframe>
//子页面
<div id="a"></div>

//父页面
<script>
  let oBtn=document.getElementById('btn');
  let oFrame=document.getElementById('f');
  oBtn.onclick=function(){
    oFrame.contentWindow.postMessage('hello','*');
  }
</script>

//子页面
<script>
  window.addEventListener('message',function(){
    if(event.data=='hello'){
      document.getElementById('#a').innerText=event.data;
    }
  })
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
extjs 列表框(multiselect)的动态添加列表项的方法
Jul 31 Javascript
Javascript表单验证要注意的事项
Sep 29 Javascript
javascript操作select元素实例分析
Mar 27 Javascript
jquery基本选择器匹配多个元素的实现方法
Sep 05 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
VueRouter导航守卫用法详解
Dec 25 Javascript
axios发送post请求springMVC接收不到参数的解决方法
Mar 05 Javascript
vue+axios新手实践实现登陆的示例代码
Jun 06 Javascript
webuploader分片上传的实现代码(前后端分离)
Sep 10 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 Javascript
详解TypeScript的基础类型
Feb 18 Javascript
JavaScript对象原型链原理详解
Feb 05 #Javascript
基于Vue的侧边目录组件的实现
Feb 05 #Javascript
Js视频播放器插件Video.js使用方法详解
Feb 04 #Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 #jQuery
JS代码优化的8点建议
Feb 04 #Javascript
9种方法优化jQuery代码详解
Feb 04 #jQuery
JS代码检查工具ESLint介绍与使用方法
Feb 04 #Javascript
You might like
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
javascript:void(0)使用探讨
2013/08/27 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
JavaScript截取字符串的2个函数介绍
2014/08/27 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
JS验证IP,子网掩码,网关和MAC的方法
2015/07/02 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
Highcharts入门之简介
2016/08/02 Javascript
jQuery基于ajax操作json数据简单示例
2017/01/05 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
2017/02/27 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
Python文件和目录操作详解
2015/02/08 Python
python脚本监控docker容器
2016/04/27 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
python django中8000端口被占用的解决
2019/12/17 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
2016/03/25 HTML / CSS
师范生自荐信
2013/10/27 职场文书
员工年终演讲稿
2014/01/03 职场文书
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
学校领导干部民主生活会整改方案
2014/09/29 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
《我的长生果》教学反思
2016/02/20 职场文书