如何实现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 相关文章推荐
JQuery 学习笔记 选择器之五
Jul 23 Javascript
前端开发的开始---基于面向对象的Ajax类
Sep 17 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
Dec 04 Javascript
js汉字转拼音实现代码
Feb 06 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
node.js 利用流实现读写同步,边读边写的方法
Sep 11 Javascript
JS实现的简单折叠展开动画效果示例
Apr 28 Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 Javascript
Vue注册组件命名时不能用大写的原因浅析
Apr 25 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
vue自定义树状结构图的实现方法
Oct 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
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
php 强制下载文件实现代码
2013/10/28 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
JS 页面计时器示例代码
2013/10/28 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
JS中判断null的方法分析
2016/11/21 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
js中this对象用法分析
2018/01/05 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
2021/02/08 Javascript
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
python3.5使用tkinter制作记事本
2016/06/20 Python
深入理解Python3 内置函数大全
2017/11/23 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
python导入坐标点的具体操作
2019/05/10 Python
Django基础三之视图函数的使用方法
2019/07/18 Python
python实现猜拳小游戏
2020/04/05 Python
浅谈python元素如何去重,去重后如何保持原来元素的顺序不变
2020/02/28 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
html5 canvas实现跟随鼠标旋转的箭头
2016/03/11 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
四年级学生评语大全
2014/04/21 职场文书
模具专业自荐信
2014/05/29 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
安全教育主题班会教案
2015/08/12 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis