解决在Vue中使用iframe框架的时候动态传src问题

最新推荐文章于 2025-02-25 14:30:00 发布

小方一身坦荡

最新推荐文章于 2025-02-25 14:30:00 发布

阅读量2.6k

点赞数 1

文章标签： vue

本文链接：https://blog.youkuaiyun.com/xiaofangzhen/article/details/126713201

版权

这里写自定义目录标题

解决在Vue中使用iframe框架的时候动态传src问题

解决在Vue中使用iframe框架的时候动态传src问题

使用iframe框架动态传src的时候，增加一个动态判断就好了

	 <iframe
        style="width: 100%; height: 100%;padding: 0.1rem;box-sizing: border-box;"
        :src="src"
        frameborder="0"
        v-show="isLoad"
      ></iframe>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小方一身坦荡

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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

全沾软贱开发攻城狮

10-20

1万+

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

vue2使用qiankun框架笔记

qq_39055970的博客

09-02

1737

本篇文章是针对vue项目巨石应用，对qiankuan框架的一份使用归纳，中间会记录一些遇到的问题和解决方案，如果喜欢自己探索的同学，也可以自行前往qiankun官网学习。同时也欢迎各位同学在评论区，说明自己遇到的问题，一同探讨。

参与评论您还未登录，请先登录后发表或查看评论

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

weixin_39713335的博客

02-22

666

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

动态生成的IFRAME，设置SRC时的问题解决分析

09-06

动态生成的IFRAME，设置SRC时的，不同位置带来的影响。以下所说的是在IE7下运行的。IE6下也是同样。在这个blog中，直接点击运行代码，和把下面代码保存到为网页在运行（以本地文件或域名访问），效果不一样。先看例子：

在 Vue3 中使用＜iframe＞，常见场景、问题及其解决方案

最新发布

繁若华尘的博客

02-25

1822

对于复杂场景（如微前端），可考虑更专业的方案（如 qiankun 或 Web Components），但 iframe 仍是最简单的隔离方案。

vue项目中使用iframe动态设置src地址无效解决方案

dengzihao1023的博客

05-30

926

今天些项目动态设置了一个iframe的src值，获取值后iframe不更新的解决方案。通过设置一个key值解决了。

vue 给iframe设置src_vue 中引入iframe，动态设置其src,遇到的一些小问题总结

weixin_39702316的博客

02-11

4698

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 src 赋值

breakwhile的博客

03-01

972

2.将变量赋值给 :src。

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

weixin_39753791的博客

12-19

2207

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

vue实战指南 vue项目动态设置iframe元素高度

一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

10-07

1583

然而，由于外部内容的高度通常是不可预知的，这给页面布局带来了挑战。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。在Vue中，任何数据的变化都会自动反映到DOM上，无需手动操作DOM。此外，对于响应式设计而言，这更是至关重要，因为不同设备上的显示尺寸差异很大。虽然Vue提供了许多高级特性，但在某些情况下，直接使用原生JavaScript可以提供更高的灵活性。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，

vue动态设置img的src路径实例

10-18

今天小编就为大家分享一篇vue动态设置img的src路径实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue与iframe之间的信息交互的实现

10-15

在某些应用场景中，比如集成第三方服务或者在单页应用中嵌入其他网页，我们可能需要在 Vue 应用与 iframe（内联框架）之间进行信息交互。本文将深入探讨如何在 Vue 项目中实现这种交互。首先，`iframe` 是一种 ...

用javascript 动态改变iframe 的src 属性

热门推荐

Happy Winner

08-24

8万+

var xxObj = document.frames;xxObj[0].src="index.htm";:) wzhiyuan(我是

iframe 页面的使用与动态改变 src 路径

qq_43312337的博客

11-05

1万+

iframe 标签定义了包含另外一个文档的内联框架。。意思是说通过其 src 属性，可以把一个页面链接到这个标签内。该标签是

iframe的使用动态添加

wangyingying12的博客

04-17

6816

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

如何动态的给frame的src赋值

wr6521941的专栏

05-07

7631

思路：1、动态，则首先需要截取URL的传参。 2、将参数赋值给src 3、页面加载就截取并绑定给frame 实现代码： frame，取名为main 截取URL并赋值src，function为截取URL代码，$为页面加载就调用function并赋值src function GetQueryStri

vue中内嵌iframe的src更新页面未刷新问题的解决方法

m0_69876298的博客

03-18

2222

的src中如果带hash=>#,src改变是不会刷新的内部页面的，我在网上找了一个最简单的写法之一来解决这个问题，加上一个。--vue中内嵌iframe的src，虽然是定义变量动态获取src如下。页面未重新渲染导致的啥数值没改变出现的问题。--但是iframe的内部页面没更新。解决方式如图--加上:key属性。--写项目又叕叕遇到问题了。

在VUE框架中点击iframe可以全屏显示该标签内容

06-03

在Vue框架中，可以通过以下步骤实现点击iframe可以全屏显示该标签内容： 1. 在组件中定义一个变量来记录是否全屏显示。 ``` data() { return { fullscreen: false } } ``` 2. 在模板中渲染iframe标签，并根据...