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. 可能是最早的学习Android N新特性的文章

    可能是最早的学习Android N新特性的文章 Google在今天放出了Android N开发者预览版.Android N支持Nexus6及以上的设备.5太子Nexus5不再得到更新. Android ...

  2. 小程序渲染html的两种方法

    一.使用文档自带的原生API  rich-text, nodes属性直接绑定需要渲染的html内容即可,文档参见这里:https://developers.weixin.qq.com/miniprog ...

  3. IOC容器特性注入第四篇:容器初始化

    IOC容器,就是把各种服务都注入到容器里,想要什么就去拿什么,不仅解决服务类和接口类的耦合度还可以提高性能方便管理. 这里封装一个接口类和一个实现类 1.IContainerManager接口 pub ...

  4. [Algorithm] *String Matching and Hashing

    Link: Computer Algorithms: Rabin-Karp String Searching 为了避免挨个字符对文本和模式串进行比较,我们可以尝试一次性判断两者是否相等. 因此,我们需 ...

  5. 16解释器模式Interpreter

    一.什么是解释器模式 Interpreter模式也叫解释器模式,是行为模式之一,它 是一种特殊的设计模式,它建立一个解释器,对于特定 的计算机程序设计语言,用来解释预先定义的文法.简 单地说,Inte ...

  6. 图表统计FusionCharts

    工作中用的图形统计,用的FusionCharts,发现Chenssy总结了很详细了,特此记录一下.tks Chenssy. tks: http://www.cnblogs.com/chenssy/ar ...

  7. Linux模拟网络延迟、丢包等

    一.工具介绍 1.netem netem 是 Linux 2.6 及以上内核版本提供的一个网络模拟功能模块.该功能模块可以用来在性能良好的局域网中,模拟出复杂的互联网传输性能,诸如低带宽.传输延迟.丢 ...

  8. Spark Pipeline

    一个简单的Pipeline,用作estimator.Pipeline由有序列的stages组成,每个stage是一个Estimator或者一个Transformer. 当Pipeline调用fit,s ...

  9. Android开发-基本概念(申明:来源于网络)

    Android开发-基本概念(申明:来源于网络) 地址:http://blog.csdn.net/iwanghang/article/details/53505926

  10. J - Vertical Histogram(1.5.7)

    J - Vertical Histogram(1.5.7) Time Limit:1000MS    Memory Limit:65536KB    64bit IO Format:%I64d &am ...