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 ...
随机推荐
- (十二)整合 Shiro 框架,实现用户权限管理
整合 Shiro 框架,实现用户权限管理 1.Shiro简介 1.1 基础概念 1.2 核心角色 1.3 核心理念 2.SpringBoot整合Shiro 2.1 核心依赖 2.2 Shiro核心配置 ...
- Spring Boot 核心配置文件 bootstrap & application
Spring Boot 核心配置文件 bootstrap & application 1.SpringBoot bootstrap配置文件不生效问题 2.bootstrap/ applicat ...
- 浅谈OSI参考模型(七层模型)
很多人说"21世纪人类最伟大的发明就是计算机":正是如此,21世纪的今天,计算机正对我们的社会发展和生活起居产生着不可估量的影响:电脑,手机都能上网随时随地了解多彩的世界.但是有时 ...
- 使用V8和node轻松profile分析nodejs应用程序
目录 简介 使用V8的内置profiler工具 使用gm来build V8 手动build V8 生成profile文件 分析生成的文件 生成时间线图 使用nodejs的profile工具 简介 我们 ...
- C# 如何复制(拷贝)Label控件上的文本【新方法】
Label控件在目前是无法直接调用成员函数来复制其文本内容.其实网络上有很多热心程序员网民解答过这个问题,百度上也可以搜索到,不过大多数人建议使用 TextBox 并把边框调整为不可见(运行时文本框看 ...
- CF-1333F Kate and imperfection
F. Kate and imperfection 假设一个一个的往集合里面放元素,显然在放某个元素之前,我们不想让它的倍数已经在集合里面.因为在这之前,我们不如先把这个数放进去,再把它的倍数放进去更优 ...
- hdu 6681 Rikka with Cake(扫描线)
题意:给你一个n*m的的矩形框 现在又k条射线 问这个矩形框会被分为多少个区域 思路:之前的想法是枚举边界然后线段树扫一遍计算一下矩形个数 复杂度果断不行 后面发现其实答案就是交点数+1 然后就用线段 ...
- 2019牛客暑期多校训练营(第三场)B题、H题
传送门 题意: 就是说给你一个由0或1组成的字符串,让你找出来一个0的数量和1的数量相等的最长子字符串和最长子序列 题解: 可以把0当作-1,把1当作1来计算字符串的前缀和 这样的话,当两个位置的前缀 ...
- AcWing 238.银河英雄传说 (边带权并查集)
题意:有\(n\)列,有\(T\)条指令,若指令格式为\(M\),则将第\(i\)号的所有战舰移到第\(j\)号所在列的后面,若指令格式为\(C\),询问\(i\)和\(j\)是否在同一列,如果在,问 ...
- Windows系统自带的DOS窗口
写在前面: 整理自网络 记录学习过程,方便复习 说明 DOS全称为Disk Operating System,意思是"磁盘操作系统" DOS是个人计算机上的一类操作系统,windo ...