https://blog.csdn.net/qq_38366657/article/details/81538145

// 父页面的js
<iframe id='TopHeader' src="XXX"></iframe>
$(window).scroll(function () {
var scrollTop = $(window).scrollTop()
console.log(scrollTop, '1111');
if (scrollTop > 600) {
// $("#TopHeader").attr('data-hh', 'ok')
// 父向子发送消息
var message = scrollTop;// 'Hello! The time is: ' + (new Date().getTime()) + "父的滚动" + scrollTop;
// console.log('blog.local: sending message: ' + message);
//send the message and target URI
iframe.postMessage(message, domain);
}
}); //弹出一个新窗口
var domain = location.origin;
var iframe = document.getElementById('TopHeader').contentWindow; //响应事件
window.addEventListener('message', function (event) {
// if(event.origin !== 'http://davidwalsh.name') return;
console.log('index22222222222: ' + event.data);
// event.source.postMessage('holla back youngin!',event.origin);
}, false); // 子页面的js //响应事件
window.addEventListener('message', function (event) {
//if(event.origin !== 'http://localhost:11893') return;
console.log('message lister6666666666: ' + event.data, event);
event.source.postMessage('holla back youngin!6666666666', event.origin); parent.$("#TopHeader").css("height", event.data+'px');
}, false);

  

iframe 父子互传消息,父页面滚动,子页面触发父页面高度的更多相关文章

  1. 解决移动端页面滚动后不触发touchend事件

    解决移动端页面滚动后不触发touchend事件 问题 在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件.用的较多的是使用touchend事件替代PC端的click和mouseup事件. ...

  2. js 父子标签同时设置onclick,子标签触发父标签onclick解决办法

    js 父子标签同时设置onclick,子标签触发父标签onclick 或 子标签为a 先触发onclick 再触发 a 的 href: 解决方案:在子标签的onclick里写 var ev = win ...

  3. vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法

    (vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法”问题疑问,本网通过在网上对“ (vue.js)vue ...

  4. 计算属性、侦听属性、局部与全局组件使用、组件通信(父子互传)、ref属性、动态组件和keep-alive、插槽

    今日内容概要 计算属性 侦听属性 局部组件和全局组件 组件通信之父传子 组件通信之子传父 ref属性(组件间通信) 动态组件和keep-alive 插槽 内容详细 1.计算属性 # 插值的普通函数,只 ...

  5. vue.js父组件引入子组件,父组件向子组件传值

    先看看目录结构app.vue为父组件,components里面的文件为子组件 下面这张图是父组件app.vue中的内容 下面这张图是子组件student.vue中的内容 这样父组件中的sdt数据就传入 ...

  6. vue父组件传值和子组件触发父组件方法

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <scr ...

  7. WOW.js – 让页面滚动更有趣

    演示1 演示2-仿oppo首页 下载 简介 有的页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.比如刚刚发布的 iPhone 6 的页面(查看).如果你希望你的 ...

  8. ionic 监听页面滚动,点击停止滚动

    类似今日头条,页面上有很多card,点击每个card跳转该card的详情页面.这里有一个问题,当我滚动页面时,会先后触发touchstart.touchmove.touchend,但是当touchen ...

  9. angular8 页面滚动到某一个特定位置

    背景:使用angular8安装的 Fuse-v8.0.0-demo 后台的框架 锚点: id='nearby' 流程:无论是点击触发方法也好,还是直接调用方法也好,这里只写 引入: import {C ...

随机推荐

  1. 洛谷P3850 书架

    题目描述 Knuth先生家里有个精致的书架,书架上有N本书,如今他想学到更多的知识,于是又买来了M本不同的新书.现在他要把新买的书依次插入到书架中,他已经把每本书要插入的位置标记好了,并且相应的将它们 ...

  2. java的几种对象(PO,VO,DAO,BO,POJO)

    一.PO persistant object 持久对象,可以看成是与数据库中的表相映射的java对象.最简单的PO就是对应数据库中某个表中的一条记录,多个记录可以用PO的集合.PO中应该不包含任何对数 ...

  3. 常用DOS命令及其用法

    md ​ 1.作用:建立子目录 ​ 2.用法:md [盘符:] [路径名] ①盘符:指定要建立子目录的磁盘驱动器字母,若省略,则为当前驱动器: ②路径名:要建立的子目录的上级目录名,若缺省则建在当前目 ...

  4. python atexit模块学习

    python atexit模块 只定义了一个register模块用于注册程序退出时的回调函数,我们可以在这个函数中做一下资源清理的操作 注:如果程序是非正常crash,或者通过os._exit()退出 ...

  5. Linux-yum安装和相关命令

    Linux-yum安装和相关命令 一 yum yum命令是在Fedora和RedHat以及SUSE中基于rpm的软件包管理器,它可以使系统管理人员交互和自动化地更细与管理RPM软件包,能够从指定的服务 ...

  6. xss原理及简单介绍

    XSS简单介绍-Web攻击 一 ·基础介绍 xss表示Cross Site Scripting(跨站脚本攻击),它与SQL注入攻击类似,SQL注入攻击中以SQL语句作为用户输入,从而达到查询/修改/删 ...

  7. Python开发桌面微型计算器

    开发Windows窗口需要用到tkinter库 所以上来的第一件事就是: import tkinter as t window = t.Tk()#创建了一个窗口 window.title('微型计算器 ...

  8. Codeforces Round #635 (Div. 1)

    传送门 A. Linova and Kingdom 题意: 给定一颗以\(1\)为根的树,现在要选定\(k\)个结点为黑点,一个黑点的贡献为从他出发到根节点经过的白点数量. 问黑点贡献总和最大为多少. ...

  9. 2019 沈阳网络赛 D Fish eating fruit ( 树形DP)

    题目传送门 题意:求一颗树中所有点对(a,b)的路径长度,路径长度按照模3之后的值进行分类,最后分别求每一类的和 分析:树形DP \(dp[i][j]\) 表示以 i 为根的子树中,所有子节点到 i ...

  10. P4587 [FJOI2016]神秘数(主席树)

    题意:给出1e5个数 查询l,r区间内第一个不能被表示的数 比如1,2,4可以用子集的和表示出[1,7] 所以第一个不能被表示的是8 题解:先考虑暴力的做法 把这个区间内的数字按从小到大排序后 从前往 ...