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 ...
随机推荐
- JVM 详解,大白话带你认识 JVM
前言 如果在文中用词或者理解方面出现问题,欢迎指出.此文旨在提及而不深究,但会尽量效率地把知识点都抛出来 一.JVM的基本介绍 JVM 是 Java Virtual Machine 的缩写,它是一个虚 ...
- 【实战】ZooKeeper 实战
1. 前言 这篇文章简单给演示一下 ZooKeeper 常见命令的使用以及 ZooKeeper Java客户端 Curator 的基本使用.介绍到的内容都是最基本的操作,能满足日常工作的基本需要. 如 ...
- 后端API接口的错误信息返回规范
前言 最近我司要制定开发规范.在讨论接口返回的时候,后端的同事询问我们前端,错误信息的返回,前端有什么意见? 所以做了一些调研给到后端的同事做参考. 错误信息返回 在使用API时无可避免地会因为各种情 ...
- Html5 部分快捷键
1:Tab键,快速创建标签 2:ctrl+d,删除光标所在行 3; ctrl+/ 快速添加注释 ctrl+shirt+/ 快速添加多行注释,在js里分别为添加单行注释和多行注释 4; ctrl+alt ...
- 后台获取日期值,前台Js对日期进行操作
需求描述: 方法一: 方法二: 一些标签常用隐藏方法: 需求描述: 在初始化页面的时候,需要根据系统当前的时间对前台JSP页面的某项进行值的初始化,若前台JSP标签没有相关可以初始化的属性,那么可以从 ...
- java调用shell脚本执行操作
//定时清空 日志 String shellString = "sh /home/jyapp/delete_log.sh"; Process process = Runtime.g ...
- apache和LAMP架构
资源池: httpd依赖包:apr 和 apr-util 下载:点击这里 httpd 下载:点击这里 mysql 下载:点击这里 php 下载: 点击这里 本章资源: 点击这里 资源提取码:u2jv ...
- Spring Boot自定义starter必知必会条件
前言 在目前的Spring Boot框架中,不管是Spring Boot官方还是非官方,都提供了非常多的starter系列组件,助力开发者在企业应用中的开发,提升研发人员的工作效率,Spring Bo ...
- 【STM32】时钟
1. 在STM32中,有五个时钟源,为HSI.HSE.LSI.LSE.PLL: ① HSI是高速内部时钟,RC振荡器,频率为8MHz: ② HSE是高速外部时钟,可接石英/陶瓷谐振器,或者接外部时钟源 ...
- 2021年的十五个DevOps趋势预测
DevOps已经走过了很长的一段路,毫无疑问,它将在今年继续闪耀.由于许多公司都在寻找围绕其数字化转型的最佳实践,因此了解领导者认为该行业的发展方向非常重要.从这个意义上说,下面的文章收集了DevOp ...