实现iframe嵌套页面通信
实现iframe嵌套页面通信
在项目中通过iframe标签嵌入其他网页时,该如何iframe页面进行通信呢?小菜鸡在这里简单记录一下~
1、父组件获取子组件:
(注:父组件是当前项目页面,子组件是iframe标签)
Iframe.contentWindow:获取iframe的window对象
Iframe.contentDocument:获取iframe的document对象
当需要从当前页面传递数据给嵌入的iframe页面时,可通过postMessage()方法进行通信。
iframe.contentWindow.postMessage(message, targetOrigin, [transfer]);
postMessage()方法有三个参数,message:即将要传递到其他页面的数据;targetOrigin:指定哪些窗口能接收到消息事件,其值可以是 *(表示无限制)或者一个 URI,一般用来做数据来源验证;transfer:选填参数,可不传。
示例:
ifr为iframe标签
iframe页面中获取传递的数据:
2、子组件获取父组件:
Window.parent:获取上一级的window对象。如果上一级(父级)还是iframe则是该iframe的window对象
Window.top:获取最顶级容器的window对象
Window.self:返回自身window的引用
(注:调用父级方法,则父级要将发放挂在window层)
iframe页面向引入的页面传递数据:
window.parent.postMessage(message, targetOrigin, [transfer])
获取iframe页面传入的数据,方法与iframe页面获取数据类似,也是通过addEventListener()方法监听message,获取传递的message、targetOrigin等参数数据进行进一步处理。
(ps:如果对您有帮助,希望点个赞噢(~~)
实现iframe嵌套页面通信相关推荐
- vue中用iframe嵌套页面,点击返回实现真正的退回上一步功能
vue项目中需要嵌套第三方的页面,但是第三方页面中的网页没有返回按钮,如图所示:此为页面b,页面a为跳到b页面的前一个页面. 点击iframe嵌套页面跳转的第二个页面 要实现不管进入多少层iframe ...
- TP超链接无法下载问题解决 hrome浏览器默认禁止iframe嵌套页面下载文件
var urlshow="{:U('Grant/download')}&grt_id="+row['grt_id']; let link = document.create ...
- 关于前端iframe嵌套页面的跳转问题
因工作中遇到的项目,有iframe页面嵌套,遇到了页面跳转的问题,所以记录解决问题的过程 关于前端iframe嵌套页面的跳转问题 问题: 在A页面使用iframe嵌套了B页面,B页面中做了权限校验,即 ...
- h5 iframe嵌套页面_汇总IOS下奇葩BUG以及iframe嵌套页面带来的一些困扰
做H5开发,安卓和IOS的兼容问题经常会困扰我们,尤其是跟第三方平台合作,用到iframe嵌入式应用,令很多Web前端开发的童鞋脑壳疼,相信大家也入了不少坑,且踩且珍惜吧,呵呵^_^.今天抽时间整理一 ...
- 前端Docker部署 https服务以及使用 iframe嵌套页面遇到的问题
中心思想:先部署 http服务,再部署 https服务转发到 http服务上 (如果 http和 https服务部署在同一台服务器上,可共用一个 docker容器同时部署,见 3) 前端Docker微 ...
- 移动端使用iframe嵌套页面 scrolling:auto,ios出现横向滚动条问题
移动端使用iframe嵌套页面 scrolling:auto,ios出现横向滚动条问题 一.业务需求/及问题点 业务需求:开发移动端项目时,在项目网页内引用第三方网页,为此采用<iframe s ...
- 调用iframe嵌套页面的方法
iframe标签定义一个id:" iframeDOM ". 调用页面用的方法: function callIframe(){document.getElementById(&quo ...
- iframe嵌套页面下载问题
出于沙盒安全性考虑,83版本的chrome浏览器默认禁止了iframe嵌套页面,通过a和window.open,localtion.href点击下载, 为了解决这个问题,可以在父页面的iframe中s ...
- vue中iframe嵌套页面父子组件互相通信
//父传子页面 <iframe id="mainIframe" name="mainIframe" ref="iframe" :src ...
最新文章
- Android Material Design之在RecyclerView中嵌套CardView实现
- 单步调试时遇到cout和cin会自动跳到ostream文件中的解决方案
- java类编译_java类编译过程
- Android 自定义 View 中 onKeyDown监听 没反应
- Spring源码版本命名规则及下载安装(下)笔记
- 前端学习(2360):生命周期函数的学习
- 创建启动oracle快捷方式,GNOME3创建连接OracleFS管理软件启动快捷方式
- Class.forName和ClassLoader有什么区别
- java web 配置教程,javaWeb实战教程0-环境配置,javaweb实战教程0-
- python 队列实现_Python Queue队列实现线程通信
- Scikit-learn:模型选择Model selection之pipline和交叉验证
- UVA 1213 Sum of Different Primes
- Java实现栈和队列
- 串口接收完整一帧数据包的3种方法
- Urllib2的使用,提供接口
- 计算机为什么能做翻译,为什么计算机能翻译?
- 用 LINQ 编写 C# 都有哪些一招必杀的技巧?
- C# 微信网页协议 代码记录
- 前百度员工离职总结:如何做个好员工?
- c语言read怎么一行一行读,使用read从标准输入中读取一行