前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
1,父子系统之间的通信问题
父系统给子系统传值可通过postMessage方式进行通信,postMessage(“传递的数据”,url)
1.1 父系统给子系统的传值
let iframe = document.getElementById('childFrame');
let o1 = {name:'zs',sex:'男'}
let o2 = JSON.stringify(o1);
iframe.contentWindow.postMessage(o2, 子系统url地址);
1.2 子系统获取系父统的传值
window.addEventListener("message", (event)=>{ console.log("通过iframe的postMessage传参了--",event.data)},false);
event.data就是传递过来的数据
1.3 子系统给父系统发送数据
window.parent.postMessage('传递的数据', url);
1.4 获取子系统发送的数据
window.addEventListener('message',function(e){console.log("获取子页面传递的数据====",e)console.log(e.data)//处理自己的逻辑})
2,js页面添加鼠标监听等事件案例
2.1 嵌入的第三方系统案例代码如下:
["click", "mouseup", "mousemove", "keyup", "touchend"].forEach(item => {window.addEventListener(item,() => {this.debounceMove();},false);});
throttle是js的节流函数,请第三方系统使用自己的节流函数。
methods: {debounceMove: throttle(function () {if(window.parent){window.parent.postMessage('传递的数据', 'url地址');}}, 1000),},
2.2 父系统获取第三方系统(子系统)的消息
let that = this;window.addEventListener('message',function(e){console.log("获取子页面传递的数据====",e)console.log(e.data)if(e.data == 'move'){//结束倒计时that.$bus.$emit('setCountDownTime',60);}})
2.3 节流函数的解释:
在某个时间内(比如500ms),某个函数只能被触发一次。
节流的应用场景
(1)监听页面的滚动事件;
(2)鼠标移动事件;
(3)用户频繁点击按钮操作;
(4)游戏中的一些设计;
总之,依然是密集的事件触发,但是这次密集事件触发的过程,不会等待最后一次才进行函数调用,而是会按照一定的频率进行调用;
相关文章:
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信 1,父子系统之间的通信问题 父系统给子系统传值可通过postMessage方式进行通信,postMessage(“传递的数据”,url) 1.1 父系统给子系统的传值 let iframe document.getElementById(childFrame); let o1 {…...
树莓派刷入OpenWrt后扩容overlay的方法
问题: 128G的SD卡刷入openwrt后发现可用空间不足100M(我用的squashfs固件,ext4也存在同样的问题,但能否用此方法需要自己尝试一下)。 rootOpenWrt:~# df -h Filesystem Size Used Available Use%…...
【JS】Node.js读取execle表格中的数据
在Node.js中读取.xlsx格式的Excel文件,可以使用xlsx库。这个库非常流行且易于使用。下面是一个基本示例,展示如何使用xlsx库读取.xlsx文件中的数据。 首先,你需要安装xlsx库。你可以使用npm来安装: npm install xlsx然后&#x…...
怎么为pdf文件设置密码?几种PDF文件设置密码的方法推荐
怎么为pdf文件设置密码?设置PDF文件密码,正是应对这一挑战的有效手段之一。通过为PDF文件设置密码,我们能够为文档加上一道安全锁,确保只有掌握密码的用户才能打开和查看文件内容。这一措施不仅保护了文档的隐私性,还防…...
Rust : FnOnce、线程池与多策略执行
一、问题:mpsc如何发送各类不同的函数? 3个关键词:闭包、Box与FnOnce;请细品。 use std::sync::{mpsc,Arc,Mutex}; use std::thread; fn process<F>(old:f32,name:String,f:F) where F: FnOnce(f32,String) {f(old,name);…...
一个汉字占几个字节、JS中如何获得一个字符串占用多少字节?
浅浅记录 一个汉字占几个字节?JS中如何获得一个字符串占用多少字节? 一个汉字占几个字节? GBK编码:一个汉字、中文字符都是占2个字节,英文字符占1个字节 UTF-8编码:一个汉字、中文字符都是占3个字节&#…...
CommonJS 和 ES modules
CommonJS 和 ES modules (ESM) 是两种不同的模块系统,它们用于组织 JavaScript 代码,并允许不同文件之间共享代码。 CommonJS (CJS) CommonJS 是最早的 JavaScript 模块化规范之一,主要用于 Node.js 环境中。CommonJS 规定每个文件都是一个…...
计算机网络——CDN
空间编码例子:不是发送N个相同颜色值,而是仅发送2个值,颜色和重复个数 时间编码例子:不是发送i1帧的全部编码,而是仅发送帧i差别的地方 视频播放时,先下载manifest file文件——>解析(不…...
大数据治理:挑战与策略
随着信息技术的飞速发展,大数据已成为当今社会的重要资源。大数据治理作为管理和利用大数据的关键手段,对于提升数据质量、保障数据安全、实现数据价值具有重要意义。本文首先阐述了大数据治理的概念和目标,接着分析了大数据治理面临的挑战&a…...
屋面通风器安装方案及流程
屋面通风器的安装方案及流程是一个系统性工作,需要仔细规划和执行,以确保安装质量和通风器的正常运行。昱合昇天窗厂家为大家整理了详细的安装方案及流程,供您参考。一、安装前准备 1、确定安装位置 根据建筑物屋顶结构和通风需求,…...
ComfyUI一键更换服装:IP-Adapter V2 + FaceDetailer(DeepFashion)
在这篇文章中,我们将探索如何使用新版的IP-Adapter和ComfyUI软件为人物进行换装。 整个过程非常简单,仅需要两张图片:一张服装图片和一张人物图片。 通过一系列节点的操作,ComfyUI就会把这个服装换到人物身上,并利用…...
AWS账号与亚马逊账号的关系解析
在当今数字化时代,云计算已成为企业和个人用户不可或缺的一部分。亚马逊网络服务(AWS)是全球领先的云计算平台,而亚马逊(Amazon)则是全球最大的在线零售商之一。许多人在使用这两个平台时,常常会…...
Java八大基本数据类型详解
引言 一、整数类型 二、 浮点类型 三、.字符类型 四、布尔类型 示例代码 注意事项 引言 在Java编程语言中,基本数据类型是构建程序的基础。了解这些数据类型的特性和使用方法对于编写高效且正确的代码至关重要。本文将详细介绍Java的八大基本数据类型ÿ…...
ChatGPT的终极指南概要
ChatGPT的终极指南概要 [ Prompt Format(提示格式) 是一种用于指导ChatGPT生成特定类型回答的模板。它通常包括以下几个部分: 角色(Role):定义AI模型在Prompt中所扮演的角色,例如专家、顾问、…...
Android应用性能优化的方法
Android应用性能优化是一个复杂而关键的过程,涉及多个方面,包括布局优化、网络优化、安装包优化、内存优化、卡顿优化、启动优化等。以下是对这些优化方法的详细解析: 一、布局优化 布局优化是Android性能优化的基础,主要目标是…...
『网络游戏』客户端发送消息到服务器【17】
将上一章服务器的协议PEProtocol的.dll文件重新生成导入unity客户端中 命名为Net 点击生成 另一种导入.dll文件方式 在客户端粘贴即可 此时Net文件夹的.dll文件就导入进来了 创建脚本:NetSvc.cs 编写脚本:NetSvc.cs 修改脚本:GameRoot.cs 在…...
【系统架构设计师】专题:数据库系统考点梳理
更多内容请见: 备考系统架构设计师-核心总结目录 文章目录 一、数据库基本概念1、数据库技术的发展2、数据模型3、数据库管理系统4、数据库三级模式二、关系数据库1、关系数据库基本概念2、关系运算3、关系数据库设计基本理论三、数据库设计1、数据库设计的基本步骤2、数据需求…...
Java传递对象是值传递还是引用传递?
🎉 前言 之前一直以为Java传对象是引用传递,直到最近用Java写数据结构链表时遇到一些问题,这才让我重新思考这个问题,经过我的一番研究,发现不能一棒子打死,其实这其中既有值传递,又有引用传递…...
解锁C++多态的魔力:灵活与高效的编码艺术(上)
文章目录 前言🌸一、多态的定义与概念🌻1.1 多态的核心思想:🌻1.2 多态的两种主要形式: 🌸二、多态的使用条件🌻2.1 基类指针或引用2.1.1 为什么需要基类指针或引用 🌻2.2 虚函数&am…...
k8s系列-Rancher 上操作的k8s容器网络配置总结
Rancher 上操作的k8s容器网络配置总结 要在 Rancher 中配置Spring Boot 应用 ykhd-zhjgyw-xpwfxfjfl 服务,正确的配置方式如下: 1. 应用程序监听端口 在 application.yaml 文件中,配置的应用监听端口是 10001,并且应用的上下文…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中,可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行,可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令,并忽略错误 rm somefile…...
C++:std::is_convertible
C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
抖音增长新引擎:品融电商,一站式全案代运营领跑者
抖音增长新引擎:品融电商,一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中,品牌如何破浪前行?自建团队成本高、效果难控;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...
微信小程序 - 手机震动
一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注:文档 https://developers.weixin.qq…...
江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命
在华东塑料包装行业面临限塑令深度调整的背景下,江苏艾立泰以一场跨国资源接力的创新实践,重新定义了绿色供应链的边界。 跨国回收网络:废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点,将海外废弃包装箱通过标准…...
css3笔记 (1) 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size:0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...
Java面试专项一-准备篇
一、企业简历筛选规则 一般企业的简历筛选流程:首先由HR先筛选一部分简历后,在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如:Boss直聘(招聘方平台) 直接按照条件进行筛选 例如:…...
C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。
1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj,再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...
Fabric V2.5 通用溯源系统——增加图片上传与下载功能
fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...
JS设计模式(4):观察者模式
JS设计模式(4):观察者模式 一、引入 在开发中,我们经常会遇到这样的场景:一个对象的状态变化需要自动通知其他对象,比如: 电商平台中,商品库存变化时需要通知所有订阅该商品的用户;新闻网站中࿰…...
