vue iframe进行父子页面通信并切换URL

需求是2个项目需要使用同一个面包屑进行跳转,其中一个是iframe所在的项目,另一个需要通过地址访问。通过 window.parent.postMessage ,帮助 <iframe> 内嵌入的子页面和其父页面之间进行跨域通信。

使用通义千问提问后得到一个很好的示例,在此写文保存。

页面结构展示大致如图所示:


【子页面】

// 子组件 (假设这是在iframe中的Vue应用)
new Vue({el: '#app',methods: {sendMessageToParent(url) {// 向父页面发送消息,包括目标URLwindow.parent.postMessage({ action: 'changeIframeSrc', url }, '*');}},template: `<button @click="sendMessageToParent('https://example.com/new-content')">Load New Content</button>`
});

【父页面】

<!-- 父页面 HTML -->
<div id="app"><iframe ref="myIframe" :src="currentUrl" width="600" height="400"></iframe>
</div>
// 父页面 Vue 实例
new Vue({el: '#app',data() {return {currentUrl: 'https://example.com/initial-content' // 初始URL};},mounted() {// 监听来自子组件的消息window.addEventListener('message', this.handleMessage);},beforeDestroy() {// 移除事件监听器以防止内存泄漏window.removeEventListener('message', this.handleMessage);},methods: {handleMessage(event) {const { data } = event;// 安全检查:验证消息来源和预期动作if (data.action === 'changeIframeSrc' && typeof data.url === 'string') {// 更新 iframe 的 src 属性this.currentUrl = data.url;}}}
});

请注意,在实际应用中,你不应该使用 '*' 作为 postMessage 的目标源参数,因为它允许消息被发送到任何域,这可能会导致安全问题。你应该指定一个明确的源,如 'https://your-iframe-domain.com',以便只接受来自特定域的消息。同样地,在父页面接收消息时,你也应该检查 event.origin 来确保消息确实来自预期的域。

【资料参考】

通义tongyi.ai_你的全能AI助手-通义千问

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

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

相关文章

【Qt】显示类控件:QLabel、QLCDNumber、QProgressBar、QCalendarWidget

目录 QLabel QFrame 例子&#xff1a; textFormat pixmap、scaledContents alignment wordWrap、indent、margin buddy QLCDNumber 例子&#xff1a; QTimer QProgressBar 例子&#xff1a; QCalendarWidget 例子&#xff1a; QLabel 标签控件&#xff0c;用来显示…

UVM 验证方法学之interface学习系列文章(十二)virtual interface 终结篇

一 双向和三态问题 任何具有多个驱动器的信号,都需要使用网(net)来建模。网是唯一能够同时解决不同状态和强度驱动同一信号效果的构造。net的行为由内置解析函数定义,该函数使用net上所有驱动器的值和强度。每当其中一个驱动器发生变化时,就会调用该函数来生成解析值。该…

【游戏设计原理】22 - 石头剪刀布

一、游戏基础&#xff1a;拳头、掌心、分指 首先&#xff0c;石头剪刀布&#xff08;又名“Roshambo”&#xff09;看似简单&#xff0c;实际上可是个“深藏玄机”的零和博弈&#xff08;听起来很高深&#xff0c;其实就是输赢相抵消的意思&#xff09;。游戏中有三种手势&…

iterm2 focus时灰色蒙层出现的解决办法

问题描述&#xff1a; 当前我的iterm2版本是3.5.10&#xff0c;是我最近才更新的&#xff0c;然后就出现以下页面显示问题&#xff0c;如图所示&#xff1a; 我个人对终端、编辑器等使用存在洁癖&#xff0c;尤其是页面显示效果不满意更是不能忍受&#xff0c;之前找了很久没有…

如何在window 使用 conda 环境下载大模型

最近开始学习 变形金刚&#xff0c;最大的问题就是 huggingface 无法访问&#xff0c;无论是翻墙还是通过本地镜像网站HF-Mirror&#xff0c;然后再通过git下载都很慢&#xff0c;影响学习进度&#xff0c;后面看了如下文章&#xff0c;Huggingface配置镜像_huggingface镜像-CS…

Linux 网络维护相关命令简介

目录 零. 概要一. ping二. ip命令2.1 ip address2.2 ip route2.3 ip neighbour 三. traceroute四. DNS查询4.1 nslookup4.2 dig 五. ss 查看网络连接状态 零. 概要 ⏹在Linux系统中有2套用于网络管理的工具集 net-tools 早期网络管理的主要工具集&#xff0c;缺乏对 IPv6、网…

Liveweb视频融合共享平台在果园农场等项目中的视频监控系统搭建方案

一、背景介绍 在我国的大江南北遍布着各种各样的果园&#xff0c;针对这些地处偏僻的果园及农场等环境&#xff0c;较为传统的安全防范方式是建立围墙&#xff0c;但是仅靠围墙仍然无法阻挡不法分子的有意入侵和破坏&#xff0c;因此为了及时发现和处理一些难以察觉的问题&…

Ubuntu vi(vim)编辑器配置一键补全main函数

1.打开对应的配置文件 vi ~/.vim/snippets/c.snippets 2.按G将光标定位到文件末尾 3.按i进入插入模式 以tab键开头插入下的内容&#xff0c;空行也要加 tab键 4.:wq保存退出 5.再打开任意一个新的 .c文件后&#xff0c;插入模式输入 main 然后按tal键就能补全了

javaEE-线程的常用方法-4

目录 一.start():启动一个线程 调用start()方法 start()方法只能调用一次&#xff1a; java中的API: start()和run()的区别: 二.中断一个线程 中断线程方法1:引入标志位 中断线程方法2:调⽤interrupt()⽅法 抛出的异常: 三.等待一个线程 join() 四、获取线程引用 五…

服务器数据恢复—V7000存储中多块磁盘出现故障导致业务中断的数据恢复案例

服务器存储数据恢复环境&#xff1a; 一台V7000存储上共12块SAS机械硬盘&#xff08;其中1块是热备盘&#xff09;&#xff0c;组建了2组Mdisk&#xff0c;创建了一个pool。挂载在小型机上作为逻辑盘使用&#xff0c;小型机上安装的AIXSybase。 服务器存储故障&#xff1a; V7…

2024年图像处理、多媒体技术与机器学习

重要信息 官网&#xff1a;www.ipmml.org 时间&#xff1a;2024年12月27-29日 地点&#xff1a;中国-大理 简介 2024年图像处理、多媒体技术与机器学习&#xff08;CIPMT 2024&#xff09;将于2024年12月27-29日于中国大理召开。将围绕图像处理与多媒体技术、机器学习等在…

linux----文件访问(c语言)

linux文件访问相关函数 打开文件函数 - open 函数原型&#xff1a;int open(const char *pathname, int flags, mode_t mode);参数说明&#xff1a; pathname&#xff1a;这是要打开的文件的路径名&#xff0c;可以是绝对路径或者相对路径。例如&#xff0c;"/home/user/…

Redis 集群实操:强大的数据“分身术”

目录 Redis Cluster集群模式 1、介绍 2、架构设计 3、集群模式实操 4、故障转移 5、常用命令 Redis Cluster集群模式 1、介绍 redis3.0版本推出的Redis Cluster 集群模式&#xff0c;每个节点都可以保存数据和整个集群状态&#xff0c;每个节点都和其他所有节点连接。Cl…

探索 Seaborn Palette 的奥秘:为数据可视化增色添彩

一、引言 在数据科学的世界里&#xff0c;视觉传达是不可或缺的一环。一个好的数据可视化不仅能传递信息&#xff0c;还能引发共鸣。Seaborn 是 Python 中一款广受欢迎的可视化库&#xff0c;而它的调色板&#xff08;palette&#xff09;功能&#xff0c;则为我们提供了调配绚…

多模态医学图像融合概述

Part1: Summary 实际应用中&#xff0c;我们常用到多种来源不同数据进行融合&#xff1b; 包括图像分解、重建、融合规则及质量评估。如&#xff1a;MRI、CT、PET、SPECT、US等成像方式; 也可能有点云数据融合 CT&#xff0c;或MR 进行定位等&#xff1b; Part2: 融合数据的…

STM32F103 | Embedded IDE03 - 使用OpenOCD在STM32F103项目时出现下载固件失败

导言 在上一篇备忘录介绍使用OpenOCD的stlink-v2.cfg接口下载固件&#xff0c;在STM32F407的项目上很顺利。但是&#xff0c;在stm32f103上会出现下载失败。 在网上搜了一下&#xff0c;这位博主的文章解决了这个问题: https://www.iotword.com/26738.html 一、修改stm32f1x.c…

Android Studio IDE环境配置

​需要安装哪些东西&#xff1a; Java jdk Java Downloads | OracleAndroid Studio 下载 Android Studio 和应用工具 - Android 开发者 | Android DevelopersAndroid Sdk 现在的Android Studio版本安装时会自动安装&#xff0c;需要注意下安装的路径Android Studio插件…

人工智能ACA(四)--机器学习基础

零、参考资料 一篇文章完全搞懂正则化&#xff08;Regularization&#xff09;-CSDN博客 一、 机器学习概述 0. 机器学习的层次结构 学习范式&#xff08;最高层&#xff09; 怎么学 监督学习 无监督学习 半监督学习 强化学习 学习任务&#xff08;中间层&#xff0…

Qt之QML应用程序开发:给应用程序添加图标文件

开发环境: 1、Qt Creator 14.0.1 2、windows10 先看下面的步骤,不明白再返回来看下面官方指导链接。 先看下面的步骤,不明白再返回来看下面官方指导链接。 先看下面的步骤,不明白再返回来看下面官方指导链接。 --------------------------------------------------------…

代码随想录D24-25 回溯算法03-04 Python

目录 93. 复原 IP 地址 78. 子集 子集问题 90. 子集 II 491. 非递减子序列 46. 全排列 排列问题 47. 全排列 II 332. 重新安排行程 利用字典实现图 51. N 皇后 多维问题入门 37. 解数独 93. 复原 IP 地址 要点&#xff1a; 本质上和上一期的回文字串切分是相似的&am…