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. mysql、sql server、oracle大比较

    MYSQL 多个数据库多个用户形式(最好每个数据库对应一个用户),占用内存小,适用于所有平台,开源免费 客户端和命令窗口,都是由数据库决定内容-> use datebase; 组函数在selec ...

  2. Java面试(解答题二)

    1.一个用户具有多个角色,请查询出该表中具有该用户的所有角色的其他用户.备注:用户表:tb,角色字段为role,主键为id.请写出sql语句. 解答: 2.概述MVC体系结构 解答: MVC包括三类对 ...

  3. CSS(简介or选择器)

    我们为什么需要CSS? 使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离 在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性,当H ...

  4. 网络编程(socket简介)

    socket简介 Python 提供了两个基本的 socket 模块. 第一个是 Socket,它提供了标准的 BSD Sockets API. 第二个是 SocketServer, 它提供了服务器中 ...

  5. hadoop的Namenode HA原理详解

    为什么要Namenode HA? 1. NameNode High Availability即高可用. 2. NameNode 很重要,挂掉会导致存储停止服务,无法进行数据的读写,基于此NameNod ...

  6. Java程序操作HBase

    package com.zy.test; import java.io.IOException; import org.apache.hadoop.conf.Configuration; import ...

  7. [ICPC 2018 宁夏邀请赛] A-Maximum Element In A Stack(思维)

    >传送门< 前言 辣鸡网络赛,虽然我是个菜鸡,然而好几个队伍十几分钟就AK???我心态那会彻底崩了,后来群里炸了,话题直接上知乎热搜,都是2018ICPC宁夏网络赛原题,这怎么玩,拼手速? ...

  8. HDU5739 Fantasia【点双连通分量 割点】

    HDU5739 Fantasia 题意: 给出一张\(N\)个点的无向图\(G\),每个点都有权值\(w_i\),要求计算\(\sum_{i=1}^{N}i\cdot G_i % 1e9+7\) 其中 ...

  9. Dire Wolf——HDU5115

    Dire wolves, also known as Dark wolves, are extraordinarily large and powerful wolves. Many, if not ...

  10. hdu3577 Fast Arrangement

    Problem Description Chinese always have the railway tickets problem because of its' huge amount of p ...