vue3中使用iframe不成功的问题

最新推荐文章于 2024-10-02 15:18:09 发布

看到我请叫我铁锤

最新推荐文章于 2024-10-02 15:18:09 发布

阅读量353

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/wtd183833501176/article/details/142453212

版权

再做大屏的时候，引用了一个html的页面，但是vue3编码，所以需要用到iframe，但是一直报错，故将解决方法做一个备份：

<template>
    <div class="screen-bg">
            <iframe src="/static/index.html" style="width: 100%; height: 100%;z-index: 1;position: fixed; top:0;left: 0;"  ref="iframeDom"></iframe>
</div>
</template>

在public下面增加一个static的文件夹，在文件夹中放index.html,也就是你想要引用的html页面，在iframe的时候不需要public，直接引用/static/index.html即可，同时给宽高

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

看到我请叫我铁锤

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue 多页面iframe不刷新_Vue 中使用 Iframe 踩坑记

weixin_39775896的博客

12-19

790

背景创业项目使用的 Vue 开发前端，最近在开发的一个需求涉及到了 Iframe 的使用，为了让父子页面能够正常通信，头都搞大了。不过最终是解决了问题，写篇文章记录下，利人利己。难点之前没有在 Vue 中使用过 Iframe，网上的相关内容也比较少，这次的主要难点有以下两个：如何优雅地嵌入 Iframe如何优雅地实现父子页面间的通信第一点倒是不难，嵌入 Iframe 时使用 ref 属性，可以在父...

在vue中实现嵌套页面(iframe)

11-19

vue中嵌套iframe,将要嵌套的文件放在static下面。src可以使用相对路径，也可使用服务器根路径http:localhost:8088/… <iframe src=”../../static/plusPro.html” width=”1200″ height=”300″ frameborder=”...

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

vue3中使用iframe嵌入vue2页面

Anony_me的博客

10-21

3655

vue3中使用iframe嵌入vue2页面或vue页面和iframe页面的相互传参问题

vue中内嵌iframe 缓存不刷新问题

QQ2856639881的专栏

05-16

328

加上 key, 并且每次打开 key 不同。index.html中加上不缓存设置。

vue3中使用 iframe 查看pdf 影响路由跳转问题

世上没有真正的感同身受

06-09

843

iframe

使用iframe 解决 Vue2项目配置Vue3插件不兼容问题

HL0512的博客

05-21

590

Vue2项目开发过程中遇到一个需求在网上找了很多插件，匹配度不高。后找到当Vue3的插件比较满足当前的需求，由于考虑到项目是基于Vue2，插件的源码是Vue3的。求助大佬，给出建议使用iframe尝试解决。以上便完成了Vue2项目中使用Vue3插件的相互通信问题。若需部署上线，可选择打包配置静态资源或是部署nginx。三、在Vue3插件项目中配置监听接收来自于Vue2项目传输的消息，以及向Vue2项目发送消息。二、在需要配置插件的项目中创建一个vue文件。一、将插件的源码下载本地运行调试。

vue-cli3 中使用 iframe 路径不起作用

weixin_42084225的博客

11-19

2132

iframe 会存在能耗、安全问题，有时还是会用到问题在cli3中使用 iframe ，总显示#app页面内容，src中设置的路径不起作用解决方法将要引用的页面移动到 public 文件夹中且路径不是用 ../../public/web.html, 而是直接用 /web.html ，问题就解决了 <iframe ref="iframe" :src="'web.html" w...

vue 项目中关于iframe页面缓存问题

weixin_45514326的博客

05-20

5827

1.简介关于ifarem标签一般用于项目内外嵌页面。比如vue中经常会遇到外嵌页面的问题，但是有需求这样的要求外嵌页面的内容保持缓存项目中一不小心点他其它页面再次切换回来防止页面外嵌页面再次刷新。 2关于使用keep-alive缓存不了iframe界面原因很多人第一想法就是会使用 keep-alive 去实现组件缓存，但是对iframe标签是行不通的，keepalive作为缓存组件这里不过多介绍，大多用于项目中标签的嵌套实现出口视图页面的缓存。项目中可以发现keepalive包裹

vue 打开一个iframe_vue项目中使用iframe

weixin_39722692的博客

12-19

1434

需求：将react项目内嵌到一个vue项目中，并且react项目中的请求需要携带vue项目中的cookie实现：使用iframe，用vue项目中在iframe的loaded事件中用postMessage传cookie，react项目中监听message事件此处在实践中发现：在react项目的app.js中，在componentDidMount钩子中监听message事件，获取到的都只是来自reac...

vue中iframe的应用以及问题

heerey525

02-22

1650

<template> <div> <iframe @load="loadMethod" :src="url"></iframe> <br> <button @click="changeSrc">改变iframe的src为网址，会触发load事件</button> <br> <button @click="changeSrcDown">改变iframe的src

关于Vue中使用iframe并进行数据通信

Litt_White的博客

08-28

2398

记录一下关于在vue中嵌套多个iframe时，如何进行vue文件和iframe的数据通信，并通过src实现动态切换不同的iframe。包括iframe使用的一些坑，例如iframe.onload不生效，iframe出现2次监听事件等问题的解决...

解决Vue中使用keepAlive不缓存问题

10-15

总结一下，解决Vue中`keepAlive` 不缓存的问题主要包括以下几个步骤： 1. 确保在`app.vue` 的`<router-view>` 上方使用`<keep-alive>` 包裹，并通过`$route.meta.keepAlive` 控制。 2. 在路由配置中为需要缓存的组件...

Vue中对iframe实现keep alive无刷新的方法

01-19

最近一个需求，需要在 Vue 项目中加入含有iframe 的页面，同时在路由切换的过程中，要求iframe的内容不会被刷新。一开始使用了Vue自带的keep- alive发现没有用，于是自己研究了一下解决方案。。。。。。 Vue的...

Thinkphp/Laravel基于vue的少数民族民歌网络图书馆管理系统

abo2022的博客

09-30

1106

ThinkPHP是一个快速、简单的基于MVC和面向对象的轻量级PHP开发框架，遵循Apache2开源协议发布，从诞生以来一直秉承简洁实用的设计原则，在保持出色的性能和至简的代码的同时，尤其注重开发体验和易用性，并且拥有众多的原创功能和特性，为WEB应用开发提供了强有力的支持Laravel非常的简洁并且是开源的，Laravel 是一个具有表现力、优雅语法的 Web 应用程序框架. Laravel 是构建现代全栈 Web 应用程序的最佳选择.

Vue实战教程：如何用JS封装一个可复用的Loading组件

Jiaberrr的博客

09-28

490

通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。

Vue3.0面试题汇总

qq_25741071的博客

09-29

911

实现 DOM 的方式进行 WebGL 编程。

初学Vue

2302_80244686的博客

09-29

763

一套用于构建用户界面的渐进式JavaScript框架Vue可以自底向上逐层的应用。

结合vueuse实现图片懒加载

最新发布

clmm_的博客

10-02

760

在 Vue.js 中，是用于注册自定义指令的 API。自定义指令允许你在组件的模板中实现特定的功能或行为，这些功能或行为通常是 DOM 操作。自定义指令是一种可以在模板中使用的功能，通常以v-开头。例如，v-model和v-bind是内置指令。通过创建自定义指令，你可以扩展 Vue 的功能。: 用于注册自定义指令。自定义指令: 可以在模板中添加特定的功能，增强组件的交互性。钩子函数: 提供不同生命周期阶段的操作机会。简单来说，这段代码的目的是确保只有当用户滚动到

vue单点登录异步执行请求https://xxx.com获取并处理数据

m0_65360496的博客

09-27

369

vue单点登录异步执行请求https://xxx.com获取并处理数据

vue中使用iframe

03-31

Vue中使用iframe可以通过以下步骤实现： 1. 在Vue组件的template中添加一个iframe标签，如下所示： ```html <template> <div> <iframe src="https://www.baidu.com"></iframe> </div> </template> ``` 2. 可以通过Vue的数据绑定来动态设置iframe的src属性，如下所示： ```html <template> <div> <iframe :src="url"></iframe> </div> </template> <script> export default { data() { return { url: 'https://www.baidu.com' } } } </script> ``` 3. 如果需要在iframe加载完成后执行某些操作，可以通过监听iframe的load事件来实现，如下所示： ```html <template> <div> <iframe :src="url" @load="onLoad"></iframe> </div> </template> <script> export default { data() { return { url: 'https://www.baidu.com' } }, methods: { onLoad() { console.log('iframe loaded') } } } </script> ``` 需要注意的是，在使用iframe时需要注意安全问题，特别是在嵌入第三方网站的情况下，可能会存在XSS攻击等安全问题。建议仅在必要情况下使用iframe，并且尽可能限制iframe的访问范围。