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. c++ linux socket编程 c++网络编程

    声明:大部分代码来自这篇博客http://www.cnblogs.com/diligenceday/p/6241021.html, 感谢博主 思路: 思路很重要呦~~~ socket详细信息,思路:h ...

  2. Nginx系列二:(Nginx Rewrite 规则、Nginx 防盗链、Nginx 动静分离、Nginx+keepalived 实现高可用)

    一.Nginx Rewrite 规则 1. Nginx rewrite规则 Rewrite规则含义就是某个URL重写成特定的URL(类似于Redirect),从某种意义上说为了美观或者对搜索引擎友好, ...

  3. Java如何从文件中打印与给定模式匹配的所有字符串?

    在Java编程中,如何从文件中打印与给定模式匹配的所有字符串? 以下示例显示了如何使用Util.regex类的Patternname.matcher()方法从文件中打印与给定模式匹配的所有字符串. p ...

  4. 错误:OSError: [Errno 1] Operation not permitted: 'lib/python/six-1.4.1-py2.7.egg-info'

    解决办法: $ $ pip install mock --ignore-installed six --user 问题:安装mock时报错: (venv)➜ test git:(master) pip ...

  5. Dapper Extensions Change Schema

    Dapper Extensions Change Schema You can use the AutoClassMapper to assign a new schema to your model ...

  6. SpringBatch的初步了解

    一.SpringBatch是一个批处理的框架,作为一个Spring组件,提供了通过使用Spring的依赖注入来处理批处理的条件. 什么是批处理呢? 在现代企业应用当中,面对复杂的业务以及海量的数据,除 ...

  7. 仿迅雷播放器教程 -- 基于ffmpeg的C++播放器 (1)

    2011年12月份的时候发了这篇博客 http://blog.csdn.net/qq316293804/article/details/7107049 ,博文最后说会开源一个播放器,没想到快两年了,才 ...

  8. electron安装+运行+打包成桌面应用+打包成安装文件+开机自启动

    1.初始化node项目,生成package.json文件 npm init 2.安装electron,并保存为开发依赖项 npm install electron -D 3.根目录下新建index.j ...

  9. react学习笔记(一)用create-react-app构建 React 开发环境

    React 可以高效.灵活的用来构建用户界面框架,react利用高效的算法最小化重绘DOM. create-react-app 是来自于 Facebook,通过该命令不需配置就能快速构建 React ...

  10. rar压缩find查找到的文件

    find . -name 'CMakeLists.txt' | xargs /d/Program\ Files/WinRAR/rar.exe a -r ./out.rar $ ------------ ...