iframe 父子互传消息,父页面滚动,子页面触发父页面高度
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 父子互传消息,父页面滚动,子页面触发父页面高度的更多相关文章
- 解决移动端页面滚动后不触发touchend事件
		解决移动端页面滚动后不触发touchend事件 问题 在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件.用的较多的是使用touchend事件替代PC端的click和mouseup事件. ... 
- js 父子标签同时设置onclick,子标签触发父标签onclick解决办法
		js 父子标签同时设置onclick,子标签触发父标签onclick 或 子标签为a 先触发onclick 再触发 a 的 href: 解决方案:在子标签的onclick里写 var ev = win ... 
- vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法
		(vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法”问题疑问,本网通过在网上对“ (vue.js)vue ... 
- 计算属性、侦听属性、局部与全局组件使用、组件通信(父子互传)、ref属性、动态组件和keep-alive、插槽
		今日内容概要 计算属性 侦听属性 局部组件和全局组件 组件通信之父传子 组件通信之子传父 ref属性(组件间通信) 动态组件和keep-alive 插槽 内容详细 1.计算属性 # 插值的普通函数,只 ... 
- vue.js父组件引入子组件,父组件向子组件传值
		先看看目录结构app.vue为父组件,components里面的文件为子组件 下面这张图是父组件app.vue中的内容 下面这张图是子组件student.vue中的内容 这样父组件中的sdt数据就传入 ... 
- vue父组件传值和子组件触发父组件方法
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <scr ... 
- WOW.js – 让页面滚动更有趣
		演示1 演示2-仿oppo首页 下载 简介 有的页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.比如刚刚发布的 iPhone 6 的页面(查看).如果你希望你的 ... 
- ionic 监听页面滚动,点击停止滚动
		类似今日头条,页面上有很多card,点击每个card跳转该card的详情页面.这里有一个问题,当我滚动页面时,会先后触发touchstart.touchmove.touchend,但是当touchen ... 
- angular8 页面滚动到某一个特定位置
		背景:使用angular8安装的 Fuse-v8.0.0-demo 后台的框架 锚点: id='nearby' 流程:无论是点击触发方法也好,还是直接调用方法也好,这里只写 引入: import {C ... 
随机推荐
- socket  的使用
			基于TCP协议的socket tcp是基于链接的,必须先启动服务端,然后再启动客户端去链接服务端 server端 import socket sk = socket.socket() sk.bind( ... 
- 使用 Tye 辅助开发 k8s 应用竟如此简单(一)
			最近正巧在进行 Newbe.Claptrap 新版本的开发,其中使用到了 Tye 来辅助 k8s 应用的开发.该系列我们就来简单了解一下其用法. Newbe.Claptrap 是一个用于轻松应对并发问 ... 
- Redis-设置Key的过期时间及相关策略
			Redis-设置Key的过期时间及相关策略 1.设置key的过期时间 1.1expire key second:设置key的过期时间(秒) 1.2ttl key:查看key的有效期 1.3persis ... 
- 秒啊,速来get这9个jupyter实用技巧
			1 简介 jupyter notebook与jupyter lab作为广受欢迎的ide,尤其适合开展数据分析相关工作,而掌握它们相关的一些实用技巧,势必会大大提升日常工作效率.而今天我就来给大家介绍9 ... 
- C# 使用PictureBox实现图片按钮控件
			引言 我们有时候会在程序的文件夹里看见一些图标,而这些图标恰好是作为按钮的背景图片来使用的.鼠标指针在处于不同状态时,有"进入按钮"."按下左键"," ... 
- Scala数据结构(数组,Map和Tuple)
			package com.zy import scala.collection.mutable import scala.collection.mutable.ArrayBuffer object te ... 
- CSAPP_AttackLab实验报告
			目录 屏幕截图 考察内容 各题答案 level1 level2 level3 level4 level5 解题思路 level1 任务 思路 level2 任务 思路 level3 任务 思路 lev ... 
- Manacher算法 & Palindrome
			马拉车用于解决最长回文子串问题,重点是子串,而不是子序列,时间复杂度为O(n). 解释一下变量的意义: Len[i]数组去存第i个位置到mx位置的长度 id记录上一次操作的位置(这个操作可以看模板) ... 
- Codeforces Round #498 (Div. 3)    D. Two Strings Swaps  (思维)
			题意:给你两个长度相同的字符串\(a\)和\(b\),你可以将相同位置上的\(a\)和\(b\)的字符交换,也可以将\(a\)或\(b\)中某个位置和对应的回文位置上的字符交换,这些操作是不统计的,你 ... 
- Codeforces Round #494 (Div. 3) D. Coins and Queries (贪心,数学)
			题意:给你一组全是\(2^d\ (d\ge0)\)的数,询问q次,每次询问一个数,问这个数是否能够由原数组中的数相加得到,如果能,输出最少用多少个数,否则输出\(-1\). 题解:首先贪心得出结论:如 ... 
