Vue3 如何给 iframe src 赋值

最新推荐文章于 2025-10-10 09:21:11 发布
原创 最新推荐文章于 2025-10-10 09:21:11 发布 · 1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#windows

文章介绍了如何在Vue.js项目中定义变量并从localStorage获取值，然后将该值动态设置到iframe的src属性，实现页面内容的动态加载。

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>

breakwhile2
关注
2.（vue3.x+vite）调用iframe的方法（vue编码）
GIS之家家长
09-14 687
11.（vue3.x+vite）调用iframe的方法（vue编码）
vue组件和iframe之间的传值-传值总结
qq_37949984的博客
09-18 2713
vue组件和iframe之间的传值-传值总结vue组件和iframe之间的传值-传值总结vue组件传值：vue组件接受值：iframe传值到vue 组件：iframe接收值 vue组件和iframe之间的传值-传值总结 前情提要：由于项目需要，我需要引入一个报表的插件。插件只能使用html的方式调用。 所以,我把插件的使用封装了一个html页面,vue项目则利用iframe的方式引入。 在项目进行过程中，需要iframe和vue组件之间的传值。暂时做个笔记。 vue组件传值： <el-main&gt
面试官：Vue3 组件如何嵌入 Vue2 项目？结合实际场景谈操作与优劣（补充 iframe 与 Web Component 方案）
最新发布
前端圈边缘选手，擅长把 UI 稿 “翻译” 成代码，也擅长在 console.log 里写 “求救信号”。日常状态：要么在调像素级对齐，要么在查 “为什么这个样式只在我电脑上生效”。博客不搞高深理论，只唠实在干货~
10-10 1150
摘要 本文针对Vue2项目中嵌入Vue3组件的需求，补充介绍了两种实用方案：iframe嵌入和Web Component封装。iframe方案适合轻量独立场景，通过原生iframe标签嵌入Vue3组件HTML文件，实现完全环境隔离，配置简单但通信复杂；Web Component方案利用Vue官方工具将Vue3组件封装为标准自定义元素，实现跨框架复用，适合多技术栈场景。两种方案各有优劣：iframe部署灵活但性能损耗较大，Web Component标准化但需处理事件通信。结合此前介绍的@vue/compat和
iframe的src赋值问题(服务器端)
09-28
frame的src赋值的问题，本文将进行详细探讨:服务器端的iframe重新src重新赋值,给iframe加一个ID，再加上runat=server，感兴趣的你可不要错过了哈
vue 给iframe设置src_vue项目中，iframe的src动态赋值
weixin_39567169的博客
12-19 2468
可以类似这样：/*** 动态创建iframe* @param dom 创建iframe的容器，即在dom中创建iframe。dom能够是div、span或者其它标签。* @param src iframe中打开的网页路径* @param onload iframe载入完后触发该事件。能够为空* @return 返回创建的iframe对象*/createIframe(dom, src, onload...
给iframe内的src赋值
weixin_44924565的博客
07-09 9552
一、给<iframe>内的src赋值 1、js代码insdata是点击选中行获取到的参数，需要传到后台处理 tapEstimate(insdata); function tapEstimate(insdata){ document.getElementById("oframe").src = "${ctx...
vue和iframe传值
weixin_60041868的博客
10-15 1199
【代码】vue和iframe传值。
javascript给span标签赋值的方法
01-19
js给span标签赋值的方法？一般有两种方法： 第一种方法：输出html <body onload=s()> <span id=hello></span> [removed] function s(){ document.getElementById(hello)[removed] = <iframe src= height=...
vue项目中，iframe的src动态赋值
xhangs的博客
05-13 3950
在iframe上加个v-if，利用一个状态来控制iframe的渲染。参考：https://segmentfault.com/q/1010000020293870
html5 iframe 赋值src,vue项目中，iframe的src动态赋值
weixin_28730927的博客
06-19 1310
可以类似这样：/*** 动态创建iframe* @param dom 创建iframe的容器，即在dom中创建iframe。dom能够是div、span或者其它标签。* @param src iframe中打开的网页路径* @param onload iframe载入完后触发该事件。能够为空* @return 返回创建的iframe对象*/createIframe(dom, src, onload...
Vue3中如何通过内嵌iframe传递参数与接收参数
Sun_blog
09-20 6338
Vue3是一种用于构建用户界面的JavaScript框架，它提供了很多方便的功能和工具来开发交互式的Web应用程序。其中一个常见的需求是在Vue应用程序中内嵌一个iframe，并且需要在两者之间传递参数。本文将介绍如何在Vue3中实现此功能，包括如何在Vue组件中内嵌iframe以及如何传递参数和接收参数。通过以上步骤，我们可以在Vue3应用程序中内嵌一个iframe，并且实现参数的传递和接收。通过设置iframe的src属性来传递参数，并在iframe页面中使用JavaScript来解析参数。
如何动态的给frame的src赋值
wr6521941的专栏
05-07 7676
思路：1、动态，则首先需要截取URL的传参。             2、将参数赋值给src             3、页面加载就截取并绑定给frame 实现代码： frame，取名为main 截取URL并赋值src，function为截取URL代码，$为页面加载就调用function并赋值src function GetQueryStri
js和jquery给iframe src赋值的3种方法
weixin_33895475的博客
01-10 5001
js和jquery给iframe src赋值的3种方法 网页使用iframe嵌入网页时，有时候需要动态处理src的值，而不是写死的，所以我们需要知道如何给iframe src赋值，通常是使用js或jquery来实现。本文介绍js和jquery给iframe src赋值的3种方法。 方法一 这是最常用的js给iframe src赋值的方法，代码如下： <!DO...
vue项目中与内嵌iframe传值
qq_38387487的博客
10-27 4248
vue项目作为父级，内嵌一个iframe 给iframa传值的写法 //html结构 <button @click="fatherpost">积分是开发的</button> <iframe ref="iframe" src="http://192.168.4.184:20011/#/regulation" width="800px" height="500px"> </iframe> //挂载在mounte
vue3中一个页面中使用iframe src刷新
08-22
在 Vue 3 中，若需要通过修改 `<iframe>` 的 `src` 属性来实现页面刷新，可以通过响应式数据绑定和方法调用来完成。Vue 的响应式系统允许开发者通过数据的变化来驱动 DOM 的更新，包括 `<iframe>` 的 `src` 属性。 ### 数据绑定与刷新机制 在 Vue 3 中，可以使用 `ref` 或 `reactive` 来管理 `src` 属性的状态。例如，可以将 `src` 绑定到一个响应式变量上，并在需要刷新时更新该变量的值。这种方式可以确保每次 `src` 变化时，`<iframe>` 都会重新加载指定的 URL。 ```vue <template> <div> <iframe :src="iframeSrc" width="100%" height="500" /> <button @click="refreshIframe">刷新</button> </div> </template> <script setup> import { ref } from &#39;vue&#39;; // 初始化 iframe 的 src 地址 const iframeSrc = ref(&#39;https://example.com&#39;); // 刷新方法：通过更新 src 的值来触发 iframe 的重新加载 function refreshIframe() { // 可以直接重新赋值当前 URL，或者附加时间戳以确保刷新 iframeSrc.value = iframeSrc.value + &#39;?t=&#39; + new Date().getTime(); } </script> ``` ### 使用时间戳确保刷新效果 在某些情况下，浏览器可能会缓存 `<iframe>` 的内容，导致即使 `src` 发生变化，页面也不会重新加载。为了避免这种情况，可以在 `src` 后附加一个时间戳参数，如 `?t=123456789`，这样每次刷新时 URL 都会不同，从而确保浏览器不会使用缓存内容[^1]。 ### 注意事项 - **性能优化**：频繁刷新 `<iframe>` 可能会影响页面性能，特别是在移动设备上。因此，应确保刷新操作仅在必要时执行。 - **跨域限制**：如果 `<iframe>` 加载的是第三方网站，可能会受到浏览器的同源策略限制，无法通过 JavaScript 直接操作其内容。 - **响应式设计**：确保 `<iframe>` 的宽度和高度适应不同的屏幕尺寸，尤其是在移动端。 ### 总结 通过 Vue 3 的响应式系统，可以轻松实现 `<iframe>` 的 `src` 刷新功能。结合时间戳参数，可以有效避免浏览器缓存问题，从而确保每次点击按钮时都能加载最新的页面内容。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值