vue页面嵌套iframe缓存

最新推荐文章于 2025-03-15 09:00:00 发布

qq_33475629

最新推荐文章于 2025-03-15 09:00:00 发布

阅读量4.2k

点赞数 1

本文链接：https://blog.csdn.net/qq_33475629/article/details/124884534

版权

关键词由CSDN通过智能技术生成

router.js路由文件里面某一个页面内是iframe标签，并且想将该iframe页面进行缓存，使用v-show进行单独处理。

解决方法

1、router.js该路由添加唯一标识

2、入口文件判断

原有路由文件不变，加入isIframe判断，iframe文件引入后使用v-show进行渲染

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_33475629

关注关注

1
点赞
踩
5

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue对iframe页面进行缓存，只有一个iframe，不同的src怎么做缓存

weixin_43558117的博客

04-28

3367

vue对iframe进行缓存，多个iframe共用一个实例如何解决

vue页面和 iframe多页面无刷新方案和并行存在解决方案

weixin_40461134的博客

06-13

950

面临问题 : back的后台以嵌套iframe为主, 所以在前端框架要把iframe无刷新嵌套和vue页面进行并行使用,vue的keep-alive只能对虚拟dom树 vtree 进行缓存无法缓存iframe,所以要对iframe进行处理。解决方案 1. 采用iframe和keeplive分开的方案,用v-show进行判断。

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

VUE项目中iframe缓存

wdzl5的博客

05-11

1847

以上为查阅资料后,自己实现的,因为走了点弯路,所以自己总结一下记录出来,以记录.

深入解析前端iframe应用：数据通信与Vue缓存实践指南

最新发布

Yue

03-15

758

深入解析前端iframe应用：数据通信与Vue缓存实践指南

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

weixin_45514326的博客

05-20

6948

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

vue iframe实现缓存

liuchuangqiang的博客

07-06

3085

实现iframe缓存原理很简单，就是通过。实现的，但是iframe并不生效。vue原来的缓存是通过。

Vue3 对于内嵌Iframe组件进行缓存

qq_43225508的博客

07-06

2709

对于系统内所有内嵌iframe 的页面均通过同一个路由'/iframe', 在router.query内传入不同src 参数，在同一组件内显示iframe 内嵌页面，对这些页面分别进行缓存。3.4 在template 部分增加组件通过v-show 控制ifram 路由缓存的组件是否渲染。// 保存相同iframe 组件修改之后的组件名称同iframe套壳组件的映射关系。3.3 对同一iframe 路由传入不同参数的组件套壳修改name 进行缓存。-- iframe 组件缓存 -->

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

01-19

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

vue下iframe标签页,切换标签页,iframe不重载

12-05

vue项目中一个模板组件，不同iframe的src地址，对应不同的路由，不同标签页，且切换标签页不重载。这种客户的要求是特例在网上没有，所以纯自行手码。由于项目在vuex保存了标签页，所以初次进入该组件时，调用了一次...

vue对针对IFrame内嵌web页面的缓存

weixin_45323139的博客

08-02

1401

把需要缓存的页面的DOM节点变成VNode存到内存中，下次使用时再将VNode读取到DOM节点中实现了缓存，之所以我的web页面没办法使用是因为内嵌web页面使用了IFrame标签，它没办法做到这一步。查了下资料，在路由的配置页面使用keepAlive是可以做到缓存的结果，但是不符合我的需求，既然提到了，就说一下怎么使用吧。注意：这里的IFrame 是封装的组件，不然直接使用可能会出现src冲突，导致多个url共用一个框架，这样肯定是不行的。在特定位置使用keepAlive，结合路由地址的配置，例如。

实现小诺框架(vue2)的iframe缓存。

qq_44560147的博客

02-25

1652

在src\router\generator-routers.js添加。使用iframe导入其他页面的时候。会出现无法缓存的问题。在src\layouts\PageView.vue替换内容。在src\store\modules\app.js 在。小诺框架是iframe直接加载的，导致无法缓存。TODO: 是提示要添加的内容在这里！需要缓存的iframe 不进行删除处理。使用的小诺框架 vue2 版本。在vuex 中添加一个状态记录。

关于vue里页面的缓存详解

12-13

keep-alive是vue内置的一个组件，可以使被它包含的组件处于保留状态，或避免被重新渲染。用法：运行结果描述： input输入框内，路由切换输入框内部的内容不会发生改变。在keep-alive标签内部添加 include：字符串或正则表达式。只有匹配的组件会被缓存 exclude：字符串或正则表达式。任何匹配的组件都不会被缓存。结合router缓存部分页面：比较实用的例子：思路：通过beforeRouterLeave这个钩子来对路由里面的keepAlive进行赋值。从而动态的确定A页面是否需要被缓存。结合router缓存部分页面：比较实用的例子：思路：通过b

浅谈Vue页面级缓存解决方案feb-alive (下)

12-11

feb-alive github地址体验链接 Vue页面级缓存解决方案feb-alive (上) 在剖析feb-alive实现之前，希望大家对以下基本知识有一定的了解。 keep-alive实现原理 history api vue渲染原理 vue虚拟dom原理 feb-alive与keep-alive差异性 1. 针对activated钩子差异性 keep-alive配合vue-router在动态路由切换的情况下不会触发activated钩子，因为切换的时候组件没有变化，所以只能通过beforeRouteUpdate钩子或者监听$route来实现数据更新，而feb-

浅析用iframe来调用页面会不会缓存页面

12-14

最近手里有个项目需要用iframe来调用每天都会变化的页面，后来想到iframe会不会缓存页面呢，于是写了个demo论证了下，结果如下： iframe的src如果是静态页面，就有可能会缓存，因为静态页面有200和304状态 iframe的src如果是动态页面就不会缓存，因为动态页面的都是200状态 iframe的src为伪静态页面的话，需要分析伪静态页面会不会有304状态，有的话也会缓存希望对遇到同样问题的童鞋有帮助。

vue中keep-alive对引入iframe的页面无效，实现iframe页面缓存问题

ll7425的博客

11-16

6368

vue中keep-alive对引入iframe的页面无效，实现iframe页面缓存问题

如何在vue中实现iframe内容缓存？

王铁柱666的博客

11-30

809

但是，请注意，这种方法只能缓存你可以控制的数据，而不能直接缓存整个iframe的DOM结构。由于浏览器的安全限制和跨域政策，对于不可控的跨域iframe内容，通常无法实现直接的DOM缓存。总的来说，实现iframe内容缓存的具体方法取决于你对iframe内容的控制程度以及你的具体需求。请注意，这种方法要求你对iframe加载的内容有控制权，并且能够修改其内容以发送必要的数据。组件来缓存整个组件的状态，包括其内部的iframe。另外，如果你只是想缓存同源的iframe页面，你可以考虑使用Vue的。

Vue中使用keep alive做缓存，组件中含多个iframe每次加载如何做到缓存问题

qq_35876316的博客

08-31

6306

问题场景： 1.一个公共组件包含多个iframe嵌套页面，希望是每次激活的iframe页面能做到缓存内容； 2.这个公共组件注册共享一个路由；原先解决思路：使用keep-alive标签做缓存，结果公共组件是缓存了，但每次切换加载iframe页面都被刷新了。最后借鉴了位仁兄的解决思路（https://blog.csdn.net/saowen163/article/details/106318374?utm_medium=distribute.pc_aggpage_search_result.non

vue的keep-alive如何缓存iframe?

badbaby52906的博客

04-21

1758

vue-中的keep-alive能否缓存iframe

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

QQ2856639881的专栏

05-16

465

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

ruoy-vue实现iframe页面缓存

08-30

"ruoy-vue"是一个基于Vue.js的开源框架，用于简化前端开发。如果你想要在使用ruoy-vue时实现iframe页面的缓存，可以考虑以下几个步骤： 1. 使用`vue-router`的HTML5 History模式（H5 History API）：Vue Router允许你在浏览器的历史记录中导航，这对于处理iframe内部的路由非常有用。配置Vue Router时，设置mode为history。 ```javascript import VueRouter from 'vue-router' const router = new VueRouter({ mode: 'history', routes: [...] }) ``` 2. 如果iframe内容是动态加载的，你可以利用`beforeRouteUpdate`钩子来判断是否需要更新iframe。如果内容未改变，则从缓存中返回。 ```javascript router.beforeEach((to, from, next) => { // 检查iframe内容是否已缓存，如未变则直接返回 const cachedIframeContent = cache.get(to.fullPath) if (cachedIframeContent) { iframe.srcdoc = cachedIframeContent } else { // 否则从服务器获取并更新缓存 fetchIframeContent().then(content => { cache.set(to.fullPath, content) iframe.srcdoc = content }) } next() }) ``` 3. 缓存管理：你可以使用localStorage、sessionStorage或第三方库（如axios-cache-adapter）来保存iframe内容。在每次请求成功后将结果存储起来，并在下次请求时检查是否有缓存。 ```javascript const cache = new Cache('myCacheKey', { maxAge: 60 * 60 * 1000 }) // 一小时缓存 function fetchIframeContent() { return axios.get('/api/iframe-content').then(response => response.data) } ```