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 ...
随机推荐
- 编译安装 codeblocks 20.03 mips64el
期末考试要用哦,不然谁会愿意去踩这么多坑. qaq 龙梦 Fedora28 中有 codeblocks 17.12,但是 Ctrl-v 粘贴会闪退,导致压根不能用.Bing了一下发现这其实是 code ...
- snmp协议 及snmpwalk
推荐阅读: snmp及工具:https://www.jianshu.com/p/dc2dc0222940 snmp协议详解:https://blog.csdn.net/shanzhizi/articl ...
- OSPF路由汇总
转载自红茶三杯博客:http://blog.sina.com.cn/s/blog_5ec353710102vtfy.html 1. 关于路由汇总 路由汇总,又被称为路由聚合(Route Aggrega ...
- CR和LF
现在的电脑操作系统主要有windows.unix/linux.macos这三种. 首先, 回车:英文(carriage return ),缩写CR 换行:英文(line feed),缩写LF 在wi ...
- vue、element-ui 依权限动态导航 v-for、v-if
在管理后台需要按用户权限展示不同导航菜单时,我们需要从后端请求数据来进行菜单渲染. 但由于v-for与v-if不能在同一标签内使用(存在性能问题:v-for 具有比 v-if 更高的优先级,意味着 v ...
- CentOS 7 部署redis
1.下载redis: 地址:http://download.redis.io/releases/: 选择需要下载的版本,然后通过ssh工具导入到centos中,这里放到了/usr/local; 解压文 ...
- zjnu1725 COCI (类似二维树状数组模拟)
Description The 3rd round of COCI is already here! In order to bet on predict the scores, we have as ...
- 2019牛客暑期多校训练营(第九场) D Knapsack Cryptosystem
题目 题意: 给你n(最大36)个数,让你从这n个数里面找出来一些数,使这些数的和等于s(题目输入),用到的数输出1,没有用到的数输出0 例如:3 4 2 3 4 输出:0 0 1 题解: 认真想一 ...
- 洛谷 P1429 平面最近点对(加强版) (分治模板题)
题意:有\(n\)个点对,找到它们之间的最短距离. 题解:我们先对所有点对以\(x\)的大小进行排序,然后分治,每次左右二等分递归下去,当\(l+1=r\)的时候,我们计算一下距离直接返回给上一层,若 ...
- centos 7下设置.net core项目开机自启动
1.在etc/systemd/system下创建xxx.service文件 例如:vi /etc/systemd/system/ubif.service2.编辑 ubif.service内容如下: [ ...