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()方法来向其他页面发 ...
随机推荐
- Xcode6:模拟器消失了?
今天打开Xcode,选择模拟器时发现只剩下了“iPhone 5”和“iPhone 5s”,原来什么“iPad Air”,“iPhone 4s”的都哪里去了?丢了? 别着急,依次打开“Xcode-> ...
- Github安卓开源项目编译运行
转:http://blog.csdn.net/laihuan99/article/details/9054985 很多新手朋友朋友在Github搜索开源项目时,有时候不明白怎么导入eclipse.的确 ...
- MySql表结构修改详解
修改表的语法=========================增加列[add 列名]=========================①alter table 表名 add 列名 列类型 列参数[加的 ...
- android rom开发
How to Build Android ROMs on Ubuntu 16.04https://www.digitalocean.com/community/tutorials/how-to-bui ...
- 修改testtools框架,将测试结果显示用例注释名字
在之前介绍的测试框架testtool中,发现测试结果中显示的都是测试用例的函数名,并没有将注释显示出来 这很不符合国人使用阿,没办法,自己动手来改改吧 首先,testtools是继承unittest的 ...
- Mac下利用Cordova打包 iOS App以及出现的问题
安装 cordova sudo npm install cordova 创建项目 创建一个demo文件夹,里面自动加载基本的文件以及目录 cordova create demo com.test.de ...
- linux 关闭笔记本自带键盘
linux 命令行工具 xinput list 找到 AT Translated Set 2 keyboard,其 id为 13 设置值为 0 xinput 如果想恢复,对应的值设为1即可 xinpu ...
- hdu4763 Theme Section【next数组应用】
Theme Section Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tot ...
- 微信小程序学习——框架视图层(view)
视图层是有WXML与WXSS编写的,由组件来进行展示. WXML(WeiXin Markup Language)用于写页面结构的. WXSS(WeiXin Style Sheet)用于页面的样式. 组 ...
- [No0000161]IDEA初步接触
安装 参考https://blog.csdn.net/qq_35246620/article/details/61191375 安装过程全程默认(路径和快捷方式自定义,不需要下载jre): 启动后全程 ...