vue中iframe的使用说明

iframe嵌套页面,在某些时候使用起来还是挺不错的,比如:第三方登录,页面a中加入页面b等

<iframe ref="iframeRef" src="" frameBorder="0" loading="eager" width="100%" height="100%"  style="border:none;"></iframe>

默认情况下iframe是有边框的,可以使用frameBorder或者style.border取消边框,frameBorder在h5中不支持

通信问题:

1、页面a传值到页面b(a页面嵌套b页面)

const iframeRef = this.$refs.iframeRef.contentWindow;
iframeRef.postMessage({},'*')

2、页面b传值到页面a

window.parent.postMessage({b: 2},'*')

3、接收值

window.addEventListener('message',(e) =>{})

在页面添加监听事件,页面销毁时,要把监听事件移除掉

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/887016.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机毕业设计 | SpringBoot+vue汽车资讯网站 汽车购买咨询管理系统(附源码+论文)

1&#xff0c;绪论 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的管理显得特别重要。因此&#xff0c;使用计算机来管理汽车资讯网站的相关信息成为必然…

RedHat系统配置静态IP

1、执行nmtui命令进入字符配置界面如下图所示 2、选择编辑连接进入 3、选择编辑进入后&#xff0c;将IPv4设置为手动模式后&#xff0c;选择显示后进行ip地址、网关、DNS的配置&#xff0c;配置完成后选择确定退出编辑 4、进入主界面后选择启用连接进入后&#xff0c;选择启用&…

Android开发教程案例源码分享-匹配动画多个头像飘动效果

Android开发教程案例源码分享-匹配动画多个头像飘动效果 匹配往往出现多个头像飘动&#xff0c;吸引人点击&#xff0c;有时出现的位置还不固定 一、思路&#xff1a; 用MotionLayout 二、效果图&#xff1a; 看视频更直观点&#xff1a; Android开发教程案例源码分享-匹配…

设计LRU缓存

LRU缓存 LRU缓存的实现思路LRU缓存的操作C11 STL实现LRU缓存自行设计双向链表 哈希表 LRU&#xff08;Least Recently Used&#xff0c;最近最少使用&#xff09;缓存是一种常见的缓存淘汰算法&#xff0c;其基本思想是&#xff1a;当缓存空间已满时&#xff0c;移除最近最少使…

SAM-Med2D 训练完成后boxes_prompt没有生成mask的问题

之前对着这这篇文章去微调SAM_Med2D(windows环境),发现boxes_prompt空空如也。查找了好长时间问题SAM-Med2D 大模型学习笔记&#xff08;续&#xff09;&#xff1a;训练自己数据集_sam训练自己数据集-CSDN博客 今天在看label2image_test.json文件的时候发现了一些端倪: 官方…

39页PDF | 毕马威_数据资产运营白皮书(限免下载)

一、前言 《毕马威数据资产运营白皮书》探讨了数据作为新型生产要素在企业数智化转型中的重要性&#xff0c;提出了数据资产运营的“三要素”&#xff08;组织与意识、流程与规范、平台与工具&#xff09;和“四重奏”&#xff08;数据资产盘点、评估、治理、共享&#xff09;…

在 macOS 和 Linux 中,波浪号 `~`的区别

文章目录 1、在 macOS 和 Linux 中&#xff0c;波浪号 ~macOS示例 Linux示例 区别总结其他注意事项示例macOSLinux 结论 2、root 用户的主目录通常是 /root解释示例切换用户使用 su 命令使用 sudo 命令 验证当前用户总结 1、在 macOS 和 Linux 中&#xff0c;波浪号 ~ 在 macO…

【LeetCode每日一题】——485.最大连续 1 的个数

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时空频度】九【代码实现】十【提交结果】 一【题目类别】 数组 二【题目难度】 LeetCode 三【题目编号】 485.最大连续 1 的个数 四【题目描述】 给定…

windows 操作系统下载 Android源码教程

前言 开始我是装了hyber-v 虚拟机ubuntu 的&#xff0c;然而非常的卡顿且难用。因此我尝试在windows上使用repo&#xff0c;因此有了这篇文章 补充 第二天发现编译源码也需要linux命令因为源码中的很多脚本都是.sh的 因此最终通过安装WSL解决&#xff08;在window应用商店就…

单片机进阶硬件部分_day2_项目实践

设计要求 从绘制原理图到画PCB板&#xff0c;完成智能云衣柜项目 STM32 &#xff08;Modbus&#xff09;云IOT衣物云端管理 华为PCB布线规范 基于IoT的智享家主控系统 步骤分析 需求分析 器件选型绘制原理图&#xff08;器件连接&#xff09;PCB布局、布线泪滴、铺铜、添加丝印…

【分享一个vue指令】元素变化指令v-resize

描述 自定义指令 v-resize mounted(el, binding)&#xff1a;当元素被挂载到DOM上时&#xff0c;这个钩子会被调用。 如果浏览器支持 ResizeObserver&#xff0c;则创建一个 ResizeObserver 实例来监听元素的大小变化。当变化发生时&#xff0c;它会遍历所有的变化条目&#x…

接口上传视频和oss直传视频到阿里云组件

接口视频上传 <template><div class"component-upload-video"><el-uploadclass"avatar-uploader":action"uploadImgUrl":on-progress"uploadVideoProcess":on-success"handleUploadSuccess":limit"lim…

小R的随机播放顺序

问题描述 小R有一个特殊的随机播放规则。他首先播放歌单中的第一首歌&#xff0c;播放后将其从歌单中移除。如果歌单中还有歌曲&#xff0c;则会将当前第一首歌移到最后一首。这个过程会一直重复&#xff0c;直到歌单中没有任何歌曲。 例如&#xff0c;给定歌单 [5, 3, 2, 1,…

Flutter:photo_view图片预览功能

导入SDK photo_view: ^0.15.0单张图片预览&#xff0c;支持放大缩小 import package:flutter/material.dart; import package:photo_view/photo_view.dart;... ...class _MyHomePageState extends State<MyHomePage>{overrideWidget build(BuildContext context) {return…

目标驱动学习python动力

文章目录 迟迟未开始的原因打破思维里的围墙抛砖引玉爬虫 结束词 迟迟未开始的原因 其实我也是很早就知道有python&#xff0c;当时听说这个用于做测试不错&#xff0c;也就一直没有提起兴趣&#xff0c;后来人工智能火了之后&#xff0c;再次接触python&#xff0c;安装好pyth…

【Linux】详解僵尸进程与孤儿进程(Z僵死状态引发的内存泄漏与处理办法)

&#x1f308; 个人主页&#xff1a;谁在夜里看海. &#x1f525; 个人专栏&#xff1a;《C系列》《Linux系列》《算法系列》 ⛰️ 丢掉幻想&#xff0c;准备斗争 目录 引言 一、僵尸进程 1.子进程的创建与退出 2.进程表 3.僵尸状态产生 4.直观感受一下&#xff1a; 二、…

网络协议之UDP

一、UDP协议定义 UDP&#xff08;User Datagram Protocol&#xff0c;用户数据报协议&#xff09;是一种面向无连接的、不可靠的、基于数据报的传输层通信协议。UDP在传输数据时不需要建立连接&#xff0c;直接将数据包发送出去。这种特性使得UDP在实时性要求较高的应用场景中…

Go 工具链详解(八):go telemetry

目录 Go telemetry 的目的和工作原理 Go telemetry 的配置和命令 Telemetry 数据报告 telemetry.go.dev 是什么 小结 参考资料 Go 1.23 版本的工具链提供一个新工具——telemetry&#xff0c;用于收集 Go 工具链的使用和故障统计数据&#xff0c;以帮助 Go 团队了解工具链…

基于微信小程序的科学健身助手的设计与实现

&#x1f497;博主介绍&#x1f497;&#xff1a;✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌ 温馨提示&#xff1a;文末有 CSDN 平台官方提供的老师 Wechat / QQ 名片 :) Java精品实战案例《700套》 2025最新毕业设计选题推荐…

FPGA经验谈系列文章——8、复位的设计

前言 剑法往往有着固定的招式套路,而写代码似乎也存在类似的情况。不知从何时起,众多 FPGA 工程师们在编写代码时开启了一种关于 always 语句块的流行写法,那就是: always @(posedge i_clk or negedge i_rstn) 就笔者所经历的诸多项目以及所接触到的不少工程师而言,大家在…