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 和 父窗口传递的更多相关文章

  1. Iframe刷新父窗口的几种方式

    /*Iframe刷新父窗口的几种方式在iframe的子页面中,使用onload刷新父页面的时候,遇到了一些问题. 1.目前来说,测试成功,并且兼容IE6/7和FF的刷新方式. */ <scrip ...

  2. iframe子父窗口相互操作方法或元素

    一.jquery 父.子页面之间页面元素的获取,方法的调用: 1. 父页面获取子页面元素: 格式:$("#iframe的ID").contents().find("#if ...

  3. iframe中子父窗口互调的js方法

    转载自:http://www.cnblogs.com/chinafine/archive/2011/09/15/2177746.html 一.父窗口调用iframe子窗口方法 1.HTML语法:< ...

  4. Jquery获取iframe子/父窗口中的标签

    获取子窗口中的标签: $("#id",document.frames('iframename').document); 获取父窗口中的标签: $('#id', parent.doc ...

  5. Iframe和父窗口互调方法的集合

    1.子iframe里调用父级的方法:window.parent.document.   2.父级里调用子集iframe:window.frames["iframe_text"].d ...

  6. layui之弹出层--从父窗口传递数据到子窗口

    原文链接:https://blog.csdn.net/Code_shadow/article/details/80524633 var Index = layer.open({ title: &quo ...

  7. iframe里面的页面调用父窗口,左右窗口js函数的方法

      iframe里面的页面调用父窗口,左右窗口js函数的方法 实现iframe内部页面直接调用该iframe所属父窗口自定义函数的方法. 比如有A窗口,A内有个IFRAME B,B里面的装载的是C页面 ...

  8. Js的iframe相关问题,如何判断当前是否在iframe中,iframe和它的父窗口如何通信

    一.前言: 在web中,为了丰富我们的内容,往往需要引用其它HTML文件,这时候就需要用到 iframe 标签,本文就主要记录一下使用iframe所需要注意的问题 iframe 所使用的环境(笔者所遇 ...

  9. iframe中子父页面跨域通讯

    目录 #跨域发送信息 #跨域接收信息 #示例Demo 在非跨域的情况下,iframe中的子父页面可以很方便的通讯,但是在跨域的情况下,只能通过window.postMessage()方法来向其他页面发 ...

随机推荐

  1. Xcode6:模拟器消失了?

    今天打开Xcode,选择模拟器时发现只剩下了“iPhone 5”和“iPhone 5s”,原来什么“iPad Air”,“iPhone 4s”的都哪里去了?丢了? 别着急,依次打开“Xcode-> ...

  2. Github安卓开源项目编译运行

    转:http://blog.csdn.net/laihuan99/article/details/9054985 很多新手朋友朋友在Github搜索开源项目时,有时候不明白怎么导入eclipse.的确 ...

  3. MySql表结构修改详解

    修改表的语法=========================增加列[add 列名]=========================①alter table 表名 add 列名 列类型 列参数[加的 ...

  4. android rom开发

    How to Build Android ROMs on Ubuntu 16.04https://www.digitalocean.com/community/tutorials/how-to-bui ...

  5. 修改testtools框架,将测试结果显示用例注释名字

    在之前介绍的测试框架testtool中,发现测试结果中显示的都是测试用例的函数名,并没有将注释显示出来 这很不符合国人使用阿,没办法,自己动手来改改吧 首先,testtools是继承unittest的 ...

  6. Mac下利用Cordova打包 iOS App以及出现的问题

    安装 cordova sudo npm install cordova 创建项目 创建一个demo文件夹,里面自动加载基本的文件以及目录 cordova create demo com.test.de ...

  7. linux 关闭笔记本自带键盘

    linux 命令行工具 xinput list 找到 AT Translated Set 2 keyboard,其 id为 13 设置值为 0 xinput 如果想恢复,对应的值设为1即可 xinpu ...

  8. hdu4763 Theme Section【next数组应用】

    Theme Section Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tot ...

  9. 微信小程序学习——框架视图层(view)

    视图层是有WXML与WXSS编写的,由组件来进行展示. WXML(WeiXin Markup Language)用于写页面结构的. WXSS(WeiXin Style Sheet)用于页面的样式. 组 ...

  10. [No0000161]IDEA初步接触

    安装 参考https://blog.csdn.net/qq_35246620/article/details/61191375 安装过程全程默认(路径和快捷方式自定义,不需要下载jre): 启动后全程 ...