Vue3 如何给 iframe src 赋值

最新推荐文章于 2024-05-30 14:27:51 发布
最新推荐文章于 2024-05-30 14:27:51 发布
阅读量488 收藏 1
点赞数 1
文章标签： windows
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/breakwhile2/article/details/136389895
版权

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
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中iframe的使用
upStar1的博客
03-31 3万+
iframe在同域时能自由操作iframe和父框架的内容(DOM)，在跨域时可以实现页面跳转。 <iframe id="iframe" :src="iframeSrc" style="height: calc(100% - 50px)" width="100%" frameborder="0"></iframe> 获取iframe里面的内容 iframe.contentWindow, 获取iframe的window对象 iframe.contentDocument, 获取if
vue 给iframe设置src_Vue 中嵌入 iframe 并进行双向通信的完整流程
weixin_39753791的博客
12-19 2026
背景Vue 应用中，需要使用 el-dialog 弹出一个 iframe 页面，该页面来源于其他项目，这就要解决 Vue 父页面和 iframe 子页面的两个通信问题：Vue 父页面向 iframe 子页面传递初始化数据子页面的关闭按钮，需要通知父页面关闭 el-dialog本文将整理 Vue 中嵌入 iframe 并进行双向通信的完整过程。子页面直接调用父页面方法的跨域问题理论上，如果 ifr...
vue项目中使用iframe动态设置src地址无效解决方案
dengzihao1023的博客
05-30 290
今天些项目动态设置了一个iframe的src值，获取值后iframe不更新的解决方案。通过设置一个key值解决了。
vue iframe src规则
最新发布
Ann_52547的博客
05-30 390
需要注意的是，为了安全起见，应尽量避免使用 JavaScript URL，尤其是在加载外部内容时，以防止恶意脚本的注入和执行。1、相对路径：相对于当前页面的路径。
vue 给iframe设置src_vue项目中，iframe的src动态赋值
weixin_28543661的博客
02-11 5875
可以类似这样：/*** 动态创建iframe* @param dom 创建iframe的容器，即在dom中创建iframe。dom能够是div、span或者其它标签。* @param src iframe中打开的网页路径* @param onload iframe载入完后触发该事件。能够为空* @return 返回创建的iframe对象*/createIframe(dom, src, onload...
JS查看当前页面的url信息 - Kaiqisan
Kaiqisan的博客
09-20 183
大家好，都吃了吗，我是Kaiqisan,是一个不善言辞的羞射男孩，这次来盘点一下url各个部分的获取方法。虽然是一条网址，但是，有时候，我们只是需要网址的某一部分(协议信息，域名，路由，参数…)，如果每一次都需要获取整条url，那么代码量就会直线上升。 这次的核心内容是BOM里面的location对象 现在以一个随意的网址为例来展开说明 http://kaiqisanOffcial.com:666/login?a=1&b=10#mobile 获取整个url信息 http://kaiqisa..
vue 3.0使用 iframe 标签引入本地HTML页面，并实现数据交互
hac_kill_you的博客
05-24 8701
最近在做vue的项目时候，需要引入本地html页面，中间遇到了很多问题，费时又费力，因此记录下来，以备不时之需，也给大家提供点资料。
iframe的src赋值问题(服务器端)
09-28
frame的src赋值的问题，本文将进行详细探讨:服务器端的iframe重新src重新赋值,给iframe加一个ID，再加上runat=server，感兴趣的你可不要错过了哈
Vue.js 动态为img的src赋值方法
10-18
下面小编就为大家分享一篇Vue.js 动态为img的src赋值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue用v-for给src属性赋值的方法
08-27
Vue中使用v-for给src属性赋值的方法 在 Vue 中，我们经常会遇到需要将数据绑定到 HTML 元素上的情况，其中一种常见的需求就是使用 v-for 指令来循环渲染一组数据，并将每个数据项的某个属性赋值给 HTML 元素的 src ...
在vue中实现嵌套页面(iframe)
11-19
vue中嵌套iframe,将要嵌套的文件放在static下面。src可以使用相对路径，也可使用服务器根路径http:localhost:8088/… <iframe src=”../../static/plusPro.html” width=”1200″ height=”300″ frameborder=”0″ scrolling=”auto”style=”position:absolute;top: -300px;left: 0px;”></iframe> 补充知识：关于VUE嵌套iframe的一系列问题 此文是建立在vue-cli之上 ，当然单写也可以，下文会涉及一些关于cli的知识，
vue下iframe标签页,切换标签页,iframe不重载
12-05
vue项目中一个模板组件，不同iframe的src地址，对应不同的路由，不同标签页，且切换标签页不重载。这种客户的要求是特例在网上没有，所以纯自行手码。由于项目在vuex保存了标签页，所以初次进入该组件时，调用了一次$store。思路很关键，看懂了可复用，熟悉vue的朋友酌情下载。
vue3嵌套iframe及相互通迅
05-22
vue3嵌套iframe及相互通迅，包含vue嵌套iframe的通用组件，vue 与 iframe 相互通讯的公共方法；同时包含apache部署vue的配置文件，以及vue访问apache代理的静态html页面。 实现通过vue路由 加载第三方服务页面，实时...
解决vuecli3中img src 的引入问题
10-15
主要介绍了解决vuecli3中img src 的引入问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 给iframe设置src_vue 中引入iframe，动态设置其src,遇到的一些小问题总结
weixin_39702316的博客
02-11 4415
1.重置其样式，去掉外框以及滚动条等id="myIframe"ref="iframe_a":src="mySrc"width="100%"height="100%"frameborder="no"border="0"marginwidth="0"marginheight="0"scrolling="no"allowtransparency="yes"/>2.在mounted里也找不到ifra...
Vue3中如何通过内嵌iframe传递参数与接收参数
Sun_blog
09-20 4290
Vue3是一种用于构建用户界面的JavaScript框架，它提供了很多方便的功能和工具来开发交互式的Web应用程序。其中一个常见的需求是在Vue应用程序中内嵌一个iframe，并且需要在两者之间传递参数。本文将介绍如何在Vue3中实现此功能，包括如何在Vue组件中内嵌iframe以及如何传递参数和接收参数。通过以上步骤，我们可以在Vue3应用程序中内嵌一个iframe，并且实现参数的传递和接收。通过设置iframe的src属性来传递参数，并在iframe页面中使用JavaScript来解析参数。
vue3-内嵌iframe的传参与接收参数
fat_shady的博客
02-24 7502
既然两个项目中有共通的内容 就少不了互相通信。核心的两个方法是 传值：postMessage() 和 接收值：addEventListener()。最后记得页面关闭时removeEventListener()方法移除监听事件。
vue中内嵌iframe的src更新页面未刷新问题的解决方法
m0_69876298的博客
03-18 1218
的src中如果带hash=>#,src改变是不会刷新的内部页面的，我在网上找了一个最简单的写法之一来解决这个问题，加上一个。--vue中内嵌iframe的src，虽然是定义变量动态获取src如下。页面未重新渲染导致的啥数值没改变出现的问题。--但是iframe的内部页面没更新。解决方式如图--加上:key属性。--写项目又叕叕遇到问题了。
vue中iframe标签str动态赋值
05-25
在 Vue 中动态给 iframe 元素的 src 属性赋值可以通过以下几种方式实现： 1. 使用 Vue 的数据绑定 在 Vue 组件的 template 中使用数据绑定的方式，将 iframe 的 src 属性与组件中的某个变量绑定起来，当变量的值发生变化时，iframe 的 src 属性也会相应地更新。 例如： ``` <template> <div> <iframe :src="url"></iframe> </div> </template> <script> export default { data() { return { url: 'http://www.example.com' } }, methods: { changeUrl() { this.url = 'http://www.google.com' } } } </script> ``` 2. 使用 ref 获取 iframe 元素 在 Vue 组件中使用 ref 获取 iframe 元素，然后通过 JavaScript 动态修改 iframe 的 src 属性。 例如： ``` <template> <div> <iframe ref="myiframe"></iframe> </div> </template> <script> export default { mounted() { this.$refs.myiframe.src = 'http://www.example.com' }, methods: { changeUrl() { this.$refs.myiframe.src = 'http://www.google.com' } } } </script> ``` 注意：使用 ref 获取元素需要在 mounted 钩子函数中，因为只有在挂载后才能获取到元素。 3. 使用 v-if 和 v-bind:key 动态创建和销毁 iframe 元素 在 Vue 组件中使用 v-if 和 v-bind:key 动态创建和销毁 iframe 元素，并根据数据来动态设置 iframe 的 src 属性。 例如： ``` <template> <div> <iframe v-if="show" :src="url" :key="url"></iframe> </div> </template> <script> export default { data() { return { show: true, url: 'http://www.example.com' } }, methods: { changeUrl() { this.url = 'http://www.google.com' } } } </script> ``` 当 show 值为 true 时，会动态创建一个带有指定 src 属性的 iframe 元素；当 show 值为 false 时，会销毁 iframe 元素。当 url 值发生变化时，根据 v-bind:key 的值重新创建 iframe 元素并更新 src 属性。 以上就是在 Vue 中动态给 iframe 元素赋值的几种方法，可以根据具体的需求选择适合的方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值