iframe 和 父窗口传递
iframe 向父窗口
window.parent.postMessage('向父窗口传递值',*);
父窗口向 iframe 内部子窗口传值
documnet.querySelector('iframe').contentWindow.postMessage('向iframe传递值',*);
接受信息
window.addEventList('message', (e) => {
console.log(e.data);
});
如果执行 e.data 不存在
window.addEventList('message', (e) => {
try{
if (e.data type e.data ==='string' ) {
console.log(e.data);
}
} catch (err) {
console.log(err)
}
});
注意传递dom结构高度
以vue为例,mounted 不一定dom都渲染完了,this.$nextTick(function () {...}) 也不定很有效解决,这时只能调用window.onload
iframe 和 父窗口传递的更多相关文章
- Iframe刷新父窗口的几种方式
/*Iframe刷新父窗口的几种方式在iframe的子页面中,使用onload刷新父页面的时候,遇到了一些问题. 1.目前来说,测试成功,并且兼容IE6/7和FF的刷新方式. */ <scrip ...
- iframe子父窗口相互操作方法或元素
一.jquery 父.子页面之间页面元素的获取,方法的调用: 1. 父页面获取子页面元素: 格式:$("#iframe的ID").contents().find("#if ...
- iframe中子父窗口互调的js方法
转载自:http://www.cnblogs.com/chinafine/archive/2011/09/15/2177746.html 一.父窗口调用iframe子窗口方法 1.HTML语法:< ...
- Jquery获取iframe子/父窗口中的标签
获取子窗口中的标签: $("#id",document.frames('iframename').document); 获取父窗口中的标签: $('#id', parent.doc ...
- Iframe和父窗口互调方法的集合
1.子iframe里调用父级的方法:window.parent.document. 2.父级里调用子集iframe:window.frames["iframe_text"].d ...
- layui之弹出层--从父窗口传递数据到子窗口
原文链接:https://blog.csdn.net/Code_shadow/article/details/80524633 var Index = layer.open({ title: &quo ...
- iframe里面的页面调用父窗口,左右窗口js函数的方法
iframe里面的页面调用父窗口,左右窗口js函数的方法 实现iframe内部页面直接调用该iframe所属父窗口自定义函数的方法. 比如有A窗口,A内有个IFRAME B,B里面的装载的是C页面 ...
- Js的iframe相关问题,如何判断当前是否在iframe中,iframe和它的父窗口如何通信
一.前言: 在web中,为了丰富我们的内容,往往需要引用其它HTML文件,这时候就需要用到 iframe 标签,本文就主要记录一下使用iframe所需要注意的问题 iframe 所使用的环境(笔者所遇 ...
- iframe中子父页面跨域通讯
目录 #跨域发送信息 #跨域接收信息 #示例Demo 在非跨域的情况下,iframe中的子父页面可以很方便的通讯,但是在跨域的情况下,只能通过window.postMessage()方法来向其他页面发 ...
随机推荐
- 【转帖】2015年2月份最佳的免费 UI 工具包
2015年2月份最佳的免费 UI 工具包 设计师们最喜欢 UI 工具包,这是一种思路拓展的方法,同时可以利用它们来解决各种复杂的项目,同时可用来了解其他设计师的风格.这里我们收集了最近这一个月一些最棒 ...
- MQTT 学习记录
学习mqtt协议,从网上找demo验证一下. 参考链接 https://www.jianshu.com/p/ebbe25d1c4b2 https://blog.csdn.net/xxmonstor/a ...
- Go语言_iota用法
一.介绍 iota,特殊常量,可以认为是一个可以被编译器修改的常量. 在每一个const关键字出现时,被重置为0,然后再下一个const出现之前,每出现一次iota,其所代表的数字会自动增加1. io ...
- 嵌入式开发之hi3519---PCIE DMA
http://blog.csdn.net/abcamus/article/details/76167747 大话pcie dma http://blog.csdn.net/qingfengtsing/ ...
- Linux systemd limits
https://www.cnblogs.com/IMxY/p/8941022.html limits 关于Centos 7 / RHEL 7 中的limits要了解以下几点: CentOS 7 / R ...
- [GAN] Generative networks
中文版:https://zhuanlan.zhihu.com/p/27440393 原文版:https://www.oreilly.com/learning/generative-adversaria ...
- 题目1018:统计同成绩学生人数(数组或者map)
题目链接:http://ac.jobdu.com/problem.php?pid=1018 详解链接:https://github.com/zpfbuaa/JobduInCPlusPlus 参考代码: ...
- twisted 源码分析一:reactor 单例
一个twisted进程只会有一个reactor反应器,下面我们来看看twisted是怎样实现这个单例反应器的, 路径:twisted\internet\reactor.py 主要代码如下: impor ...
- mysql学习之索引
首先,看一个例子,有一张大表,记录数超过1000,SELECT * FROM student WHERE name='xinan'; 如果没有索引,查找程序就得从头查找,很费时间,表越大越费时间.建立 ...
- ElasticSearch入门 第七篇:分词
这是ElasticSearch 2.4 版本系列的第七篇: ElasticSearch入门 第一篇:Windows下安装ElasticSearch ElasticSearch入门 第二篇:集群配置 E ...