Vue3 如何给 iframe src 赋值

breakwhile2 breakwhile2 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 1.1k累计阅读 1.2k平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄18年
关注
原创 最新推荐文章于 2026-10-14 14:43:06 发布 1.1k 阅读 AI 写同款· GEO 优化 ›
Vue3中如何通过内嵌iframe传递参数与接收参数 Vue3是一种用于构建用户界面的JavaScript框架，它提供了很多方便的功能和工具来开发交互式的Web应用程序。其中一个常见的需求是在Vue应用程序中内嵌一个iframe，并且需要在两者之间传递参数。本文将介绍如何在Vue3中实现此功能，包括如何在Vue组件中内嵌iframe以及如何传递参数和接收参数。通过以上步骤，我们可以在Vue3应用程序中内嵌一个iframe，并且实现参数的传递和接收。通过设置iframe的src属性来传递参数，并在iframe页面中使用JavaScript来解析参数。 阅读详情

1.定义一个变量

2.将变量赋值给 :src 

const token=localStorage.get('token');

const ifURL="http://localhost:8085/jmreport/list?token="+token;

</script>

<template>

  <iframe :src="ifURL"  frameborder="0" width="100%" :style="{height:calHeight}" scrolling="auto"></iframe>

</template>

标签
#windows
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
在 Vue3 中使用 ＜iframe＞，常见场景、问题及其解决方案 对于复杂场景（如微前端），可考虑更专业的方案（如 qiankun 或 Web Components），但 iframe 仍是最简单的隔离方案。 阅读详情

相关推荐

[vue] 动态修改iframe的src属性导致路由历史记录异常的解决方案

本文深入分析了Vue项目中动态修改iframe的src属性导致浏览器后退行为异常的根源，即同源iframe的导航会污染主页面历史记录。核心解决方案是使用iframe.contentWindow.location.replace()方法替代直接赋值src，从而避免添加多余历史条目，确保$router.go(-1)等操作能正常返回。文章还探讨了跨域处理、加载状态优化等实战进阶技巧。

weixin_29001419的博客 159

iframe的使用动态添加

window.postMessage() 方法可以安全地实现跨源通信。但是一个文档里的脚本还是不能调用在其他文档里方法和读取属性，但他们可以用window.postMessage结合window.addEventListene这种消息传递技术来实现安全的通信。 标签是一个内联框架，即用来在当前 HTML 页面中嵌入另一个文档的，且所有主流浏览器都支持iframe标签。在iframe的子页面中需要发出事件，让父页面销毁。在引入iframe的index.html页面。

wangyingying12的博客 7202

解决iframe动态更新src后页面未刷新的3种实用方案

本文深入探讨了iframe动态更新src后页面未刷新的核心问题，指出浏览器缓存机制是主要原因，并提供了三种实用解决方案。重点推荐使用key属性大法，通过强制重建iframe来彻底解决缓存导致的页面不刷新问题，同时分析了nextTick操作与监听刷新策略的适用场景。

rgv23456789的博客 390

vue 给iframe设置src_Vue 中嵌入 iframe 并进行双向通信的完整流程

背景Vue 应用中，需要使用 el-dialog 弹出一个 iframe 页面，该页面来源于其他项目，这就要解决 Vue 父页面和 iframe 子页面的两个通信问题：Vue 父页面向 iframe 子页面传递初始化数据子页面的关闭按钮，需要通知父页面关闭 el-dialog本文将整理 Vue 中嵌入 iframe 并进行双向通信的完整过程。子页面直接调用父页面方法的跨域问题理论上，如果 ifr...

weixin_39753791的博客 2327

Vue后台管理系统iframe页面切换状态保持方案：v-show优化实现

在Web前端开发中，页面状态管理与组件缓存是提升用户体验的关键技术。其核心原理在于通过特定的技术手段，在路由切换时避免组件实例被销毁，从而保留其内部状态（如表单数据、滚动位置）。这一技术对于构建流畅的单页面应用（SPA）具有重要价值，尤其在后台管理系统、数据看板等需要频繁切换视图的场景中。Vue生态中，`<keep-alive>`是内置的组件缓存方案，但其在处理特殊HTML元素如iframe时存在局限性。iframe因其独立的文档上下文和`src`属性特性，在常规的Vue组件生命周期中切换时会被强制刷新，导

weixin_30824479的博客 361

VUE3语法--img图片不显示/img的src动态赋值图片显示

在VUE中，img中的src动态赋值的之后，无法显示图片出现404.以及VUE中通过require访问静态资源出现的Uncaught Error: cannot module ‘asstes/logo.png’问题。

雾林小妖的博客 2万+

Vue3实践问题：iframe的src设置不合法，引发页面刷新

问题描述：关闭抽屉时，还额外做了很多事情代码：原因分析：打开抽屉时：pdfSrc.value = blob:http://localhost:5173/bed4bf8e-7734-468b-b14a-99e343bd7edb#toolbar=0关闭抽屉时：pdfSrc.value = #toolbar=0在 Vue3 中，如果pdfSrc的值是#toolbar=0（不完整的 URL），iframe。

BillKu的博客 675

前端开发：Vue中嵌套标签iframe的使用

前言 在前端开发过程中，往原有页面中嵌入新的页面的需求也是比较常见的需求操作，尤其是在比较复杂的必须要用嵌套的场景下。前端中使用嵌套的时候，需要用到的就是iframe标签，通过该标签可以规定一个内联框架，然后放入需要嵌套的新页面即可。本篇博文来分享一下关于iframe的使用方法，尤其是对于初级开发者来说尤为重要。 iframe 1、定义和使用 <iframe> 标签规定一个内联框架，一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。 2、使用说明 （1）可以把需要的文本放

全沾软贱开发攻城狮 1万+

vue 给iframe设置src_vue项目中，iframe的src动态赋值

可以类似这样：/*** 动态创建iframe* @param dom 创建iframe的容器，即在dom中创建iframe。dom能够是div、span或者其它标签。* @param src iframe中打开的网页路径* @param onload iframe载入完后触发该事件。能够为空* @return 返回创建的iframe对象*/createIframe(dom, src, onload...

weixin_39567169的博客 2504

Python学习（一）

快速入门 1.Linux系统中是可以直接使用Python进行编程，具体如下： 进入Python：在linux的Terminal中输入 Python ，进入Python的命令行； 退出Python：在linux的Terminal中输入quit() 或 exit() 或 ctrl +d ，再回车，退出Python的命令行。 2.python的源程序就是一个特殊格式的文本文件，可以使用任意文本编辑软件做Python的开发。 3.Python程序的文件扩展名通常都是 .py。 4.执行Python程序的方式：在

SummerXRT的博客 1281

sysrepo 开发者指南（一个基于libyang与支持rpc的数据库）

sysrepo 开发者指南（一个基于libyang与支持rpc的数据库） 日志记录 默认情况下，所有 Sysrepo 日志记录都处于关闭状态。如果启用，日志消息有 3 种输出。它们可以写入stderr、由 处理syslog或简单地传递给回调。 请务必注意，启用 Sysrepo 日志记录也会修改libyang日志记录设置。错误消息被视为标准 Sysrepo 错误，其他严重性较低的消息完全隐藏。要更改此行为，只需在启用 Sysrepo 日志记录后调整libyang日志记录设置。 此外，几乎每个 Sysrepo

weixin_43489394的博客 9230

vue嵌套iframe问题

最近在项目中遇到一个需求需要在一个项目中直接引用另一个项目，尝试各种情况无果后选择了iframe。现将调用过程中遇到的问题做一个分享。 router.go()的使用   此情况主要适用于更改iframe中src值以后导致的路由跳转混乱。   详细描述：当多次更改iframe->src属性后，调用router.go(-1)，不能实现路由后退上一级，而是将iframe当作一个窗口文档，调用了该窗口文档的window.history.go(-1)，并未更改父级项目的路由后退功能。   解决办法：

会点php的前端小渣渣 2100

别再死记硬背GNN公式了！用PyTorch Geometric从零实现一个GraphSAGE（附完整代码）

本文通过PyTorch Geometric从零实现GraphSAGE模型，深入解析图神经网络的核心原理与实战应用。文章提供完整代码示例，涵盖环境配置、邻居采样、信息聚合等关键步骤，帮助开发者掌握图表示学习技术，避免陷入公式推导的困境。适合希望将GNN应用于实际项目的中级开发者和学生。

weixin_42530570的博客 348

Vue3 iframe src为空字符串引发页面刷新：根因、防御与排查实战

在Web前端工程中，iframe是嵌入第三方页面、报表或低代码模块的常用技术，但其src属性的取值却暗藏陷阱。当src被绑定为空字符串时，浏览器会将其解析为当前页面URL，导致iframe自发加载整个应用，在Vue Router history模式下配合SPA fallback便会出现整页白屏、刷新乃至跳回登录页的诡异问题。理解URL解析规则、掌握合法的地址校验机制，是稳定构建嵌入场景的关键前提。基于computed计算属性进行白名单过滤，并借助about:blank安全兜底，能够有效规避非法src引发的连

weixin_33978722的博客 120

一文搞懂【Linux 搭建 Dread Hunger 服务器】附本体及Docker部署集群方案

看直播发现了五花八门的开服器和版本，一时兴起按官方文档进行了搭建尝试，所以我的版本基于官方Stream2024.01.10更新的版本，也就是停服时的玩法，应该可以根据mod和补丁魔改成更那些开服器一样的版本，本文不做谈论，注重服务器搭建，毕竟8个人不可能在一个局域网里乱象：首先，我看了大量教程视频，一类是开服器的推广，另一类自建的基本采用Windows搭建，我觉得最离谱的是大部分教程都会教你买一台远程Windows虚拟机？？？

LHmine的博客 3987

三菱CNC数据采集实战：从环境搭建到代码实现的完整指南

本文提供了一份完整的三菱CNC数据采集实战指南，涵盖从开发环境搭建、核心SDK获取、网络配置到基于C#和A2协议的完整代码实现。文章详细解析了初始化、连接管理、数据获取与展示四大核心模块，并分享了错误处理、性能优化及与MES系统集成的关键技巧，帮助工程师快速构建稳定可靠的工业数据采集系统。

wood5的博客 891

Vue3中iframe src非法值导致页面频繁刷新：根因排查与修复方案

在数据可视化后台中，嵌入BI报表通常借助iframe实现，但Vue3中iframe的src属性经由setAttribute绑定响应式值时，一旦被赋为空字符串或对象，就会触发类型隐式转换，导致浏览器将非法值解析为相对路径，甚至递归加载当前页面，最终表现为整个应用反复刷新、操作中断。理解Vue3的响应式更新与setAttribute的字符串化机制，是定位这类“假刷新”问题的关键。针对该现象，工程实践中可通过URL白名单校验、computed统一清洗、v-if延迟挂载iframe，以及使用postMessage处

weixin_28693309的博客 243

超速U盘选购避坑指南：如何通过Rx Detect机制识别真伪USB3.0设备

本文深入解析了USB 3.0超速U盘的选购避坑要点，重点介绍了通过Rx Detect机制识别真伪设备的核心原理。文章提供了从软件检测到实际性能测试的完整方案，帮助消费者和技术人员有效辨别虚假的USB3.0设备，确保获得真正的超速传输体验。

weixin_29189373的博客 446

iframe在Vue3中的那些坑：手把手教你避免history路由混乱（含代码示例）

本文深入分析了在Vue 3项目中嵌入iframe时，因动态修改`src`属性导致浏览器历史记录被污染，从而引发路由混乱和`router.go(-1)`后退bug的根本原因。核心解决方案是使用`iframe.contentWindow.location.replace()`方法替代直接的`src`赋值，以实现无痕切换，并提供了封装好的健壮组件代码示例，帮助开发者彻底规避此问题。

raspberrypi5的博客 712

基于Jeecgboot3.9.0的vue3版本前后端分离的flowable流程管理平台

基于Jeecgboot3.9.0的vue3版本前后端分离的flowable流程管理平台

宁波阿成的博客 903

Kile5报错—＞ ARM-Compiler ‘Default Compiler Version 5‘ which is not available安装使用Compiler Version 5 的办法

Kile5报错—＞ ARM-Compiler ‘Default Compiler Version 5‘ which is not available安装使用Compiler Version 5 的办法

weixin_72050316的博客 1188

Vue3中iframe src非法导致页面刷新的根因与防御策略

在Web开发中，iframe是嵌入外部页面的常用标签，其src地址的合法性直接影响页面稳定性。浏览器对iframe src的解析遵循严格的URL规范，未编码的中文参数、特殊字符或空字符串都可能被解析为当前页面，从而触发浏览器级别的整页刷新。在Vue3项目中，动态拼接URL时若未使用URLSearchParams或encodeURIComponent处理，极易引发此类问题。这一机制对于构建健壮的前端应用具有重要意义，尤其在涉及报表嵌入、低代码平台集成等场景中。本文从一次真实线上故障出发，剖析iframe sr

weixin_29001683的博客 182

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

Vue iframe缓存最佳实践：常驻DOM + v-show实现状态不丢失

在现代前端开发中，页面状态保持是用户体验的关键。浏览器原生组件iframe因其独立文档会话，常导致切换页面后状态丢失。Vue提供的keep-alive只能缓存组件实例，无法拦截浏览器对iframe节点的重新加载。为解决该问题，业界常用iframe常驻DOM并以v-show切换显隐的策略：不销毁节点，只改变display，从而保证iframe内部会话不中断。该方案适用于中后台管理系统的多页签、数据大屏集成等场景，同时结合about:blank懒加载、LRU数量控制及postMessage通信分发，可构建稳定的

weixin_34326429的博客 286

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能：商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传，基本资料下载，开钱箱、小票打印、收款结算，支持多币种付款方式（现金、储值卡、礼券、微信等）,支持多种促销。运行环境：.net 4.0登陆信息用户名:1001 密码:123456内置商品信息，商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过，这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后，重新检测通过。

vue组件中如何给iframe标签中的img设置宽和高

这有一个iframe标签，src指向的是一个路径 let iframe = document.getElementById("preview"); console.log("iframe",iframe); let iwindow = iframe.contentWindow; iframe.a...

qq_40547015的博客 6455

SAP B1中文培訓教材_SDK

公司内部培训资料，对开发工具 ，DIAPI， UIAPI，Add-ON有详细解说

开箱即用 - 在vue中引入.html文件并渲染的使用总结

开箱即用 - 在vue中引入.html文件并渲染的使用总结 1.业务需求： 最近在项目中遇到了一个需求，在vue的模版中引入外部的HTML文件（这个HTML文件是后端生成的），并且渲染出来。 2.需求分析： 在vue中引入.html文件，我们一般的思路是先新建一个容器，然后再在vue中将HTML文件引入，然后再给容器的innerHTML属性进行赋值，照着这个思路干就对了。 3.解决方案： 1.首先我们新建一个这个容器，这个容器我使用的是iframe标签（那么为什么偏偏用它？因为在同域下能自由操作

cabinx的博客 1万+
上一篇： Spring Cloud Gateway 整合 sentinel 控制台不显示网关配置
下一篇： 利用java杀死进程
点赞 1
评论 0
书签 书签 1
breakwhile2
breakwhile2
博客等级 码龄18年 26粉丝 21原创
+ 关注
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值