CN112463121A - 基于vue多页签应用系统中持久化外部页面状态的方法 - Google Patents
基于vue多页签应用系统中持久化外部页面状态的方法 Download PDFInfo
- Publication number
- CN112463121A CN112463121A CN202011317871.8A CN202011317871A CN112463121A CN 112463121 A CN112463121 A CN 112463121A CN 202011317871 A CN202011317871 A CN 202011317871A CN 112463121 A CN112463121 A CN 112463121A
- Authority
- CN
- China
- Prior art keywords
- tab
- component
- iframe
- vue
- page
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 24
- 230000002085 persistent effect Effects 0.000 title claims abstract description 14
- 230000003213 activating effect Effects 0.000 claims abstract description 5
- 230000000694 effects Effects 0.000 claims abstract description 5
- 230000006870 function Effects 0.000 claims description 35
- YWXYYJSYQOXTPL-SLPGGIOYSA-N isosorbide mononitrate Chemical compound [O-][N+](=O)O[C@@H]1CO[C@@H]2[C@@H](O)CO[C@@H]21 YWXYYJSYQOXTPL-SLPGGIOYSA-N 0.000 claims description 5
- 230000004913 activation Effects 0.000 claims description 4
- 238000012217 deletion Methods 0.000 claims description 3
- 230000037430 deletion Effects 0.000 claims description 3
- 230000006266 hibernation Effects 0.000 claims 1
- 238000011161 development Methods 0.000 abstract description 3
- 230000007547 defect Effects 0.000 abstract description 2
- 230000008569 process Effects 0.000 description 5
- 238000010586 diagram Methods 0.000 description 4
- 238000004088 simulation Methods 0.000 description 4
- 230000008859 change Effects 0.000 description 1
- 238000012544 monitoring process Methods 0.000 description 1
- 238000011160 research Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Storage Device Security (AREA)
Abstract
基于vue多页签应用系统中持久化外部页面状态的方法,其特征在于,具体步骤如下:步骤一:在路由系统中增加捕获函数,当用户操作页签之后,触发路由切换,路由系统在发现路由切换后通知捕获函数捕获当前加载的页签;步骤二:捕获函数首先判断页签中是否有iframe组件;如果没有,则不会干涉页签的加载;如果有,首先会截获页签,然后对页签有以下几种不同操作方式,即通过隐藏和显示iframe组件来模拟页签的添加、关闭、激活、休眠的效果;在使用vue技术开发多页签应用系统的时候,通过本发明可以解决其无法缓存外部页面的缺陷,提高用户体验和开发效率。
Description
技术领域
本发明属于计算机web开发技术领域,具体涉及一种基于vue多页签应用系统中持久化外部页面状态的方法。
背景技术
使用vue技术构建多页签的应用系统时,需要通过vue的页面缓存功能来模拟多页签的效果。对于一个标准的多页签应用系统,使用iframe嵌入外部页面是必不可少的功能。由于vue本身提供的缓存功能是不支持缓存iframe中的内嵌页面的,所以需要扩展vue的缓存功能。
发明内容
为解决vue技术构建多页签的应用系统中无法缓存iframe内嵌页的状态,本发明的目的在于提供一种基于vue多页签应用系统中持久化外部页面状态的方法,将所有的iframe内嵌页提取出来,并使用隐藏的dom节点来存储这些内嵌页面,当页签激活时,显示页签下所有的iframe内嵌页面,隐藏非激活的页签下所有的iframe内嵌页面,以达到缓存iframe内嵌页面状态的目的。
为了实现上述目的,本发明采用的方案是:
基于vue多页签应用系统中持久化外部页面状态的方法,具体步骤如下:
步骤一:在路由系统1中增加捕获函数2,当用户操作页签3之后,触发路由切换,路由系统1在发现路由切换后通知捕获函数2捕获当前加载的页签3;
步骤二:捕获函数2首先判断页签3中是否有iframe组件4;如果没有则不会干涉页签3的加载;如果有,首先截获页签3,然后对页签3有以下几种不同操作方式,即通过隐藏和显示iframe组件4来模拟页签3的添加、关闭、激活、休眠的效果。
所述的模拟页签3的添加,具体为:
当添加页签3时,由于dom组件存储器5是常驻于界面顶部的隐藏层,捕获函数2向dom组件存储器5发出复制命令;与此同时,dom组件存储器5判断需要复制的iframe组件4是否存在;如果存在,则显示在dom组件存储器5中的iframe组件4,并隐藏其它的组件;如果不存在,则先将iframe组件4复制到dom组件存储器5中,然后显示这个iframe组件4,并隐藏其它组件;
所述的模拟页签3的关闭,具体为:
当关闭页签3时,捕获函数2通知dom组件存储器5删除页签3中的iframe组件4,dom组件存储器5在接收到删除命令后,首先隐藏iframe组件4,然后从dom组件存储器5中删除iframe组件4;
所述的模拟页签3的激活,具体为:
当激活页签3时,捕获函数2通知dom组件存储器5隐藏所有的iframe组件4,然后显示页签3中的iframe组件4。
所述的模拟页签3的休眠,具体为:
当休眠页签3时,捕获函数2通知dom组件存储器5隐藏页签3中的iframe组件4。
所述的捕获函数2是在vue的前置路由守卫中嵌入的一个功能模块,能够通过截获路由来获取页签3中的iframe组件4,并后续处理页签3的多种操作方式。
本发明的优点:本方法通过截获页签中的iframe组件,将iframe组件添加到一个隐藏层中,并且通过隐藏和显示iframe组件来模拟页签打开、关闭、激活、休眠的效果,在使用vue技术开发多页签应用系统的时候,通过本发明可以解决其无法缓存外部页面的缺陷,提高用户体验和开发效率。
附图说明
图1是添加页签流程示意图。
图2是关闭页签流程示意图。
图3是激活页签流程示意图。
图4是休眠页签流程示意图。
具体实施方式
下面结合附图对本发明做详细叙述。
经过研究发现,vue在缓存iframe组件时,只缓存iframe外部的属性,不会缓存iframe内部嵌入的页面。当iframe组件关闭然后再打开的时候,它就会重新去加载内部嵌入的页面。如果不关闭iframe组件的话,就可以实现对iframe内嵌页面的缓存。通过显示和隐藏来模拟iframe组件的关闭和打开。
在vue的路由系统中,可以通过钩子函数的方式监听路由发生变化的所有生命周期。即当页签发生添加、关闭、激活、休眠的状态变化时,都可以捕获到状态发生变化的页签,进而得到页签中的iframe组件。
在整个应用系统的最上层添加一个用于存储iframe组件的存储层,里面用于存储这些iframe组件。当需要显示的时候,显示这些iframe组件。
基于以上观点,本发明提出一种基于vue多页签应用系统中持久化外部页面状态的方法,具体思路以及流程说明如下。
基于vue多页签应用系统中持久化外部页面状态的方法,具体步骤如下:
步骤一:在路由系统1中增加捕获函数2,当用户操作页签3之后,触发路由切换,路由系统1在发现路由切换后通知捕获函数2捕获当前加载的页签3,
步骤二:捕获函数2首先判断页签3中是否有iframe组件4;如果没有,则不会干涉页签3的加载;如果有,首先会截获页签3,然后对页签3有以下几种不同操作方式:
(1)添加页签3:
当添加页签3时,由于dom组件存储器5是常驻于界面顶部的隐藏层,捕获函数2向dom组件存储器5发出复制命令;与此同时,dom组件存储器5判断需要复制的iframe组件4是否存在;如果存在,则显示在dom组件存储器5中的iframe组件4,并隐藏其它的组件;如果不存在,则先将iframe组件4复制到dom组件存储器5中,然后显示这个iframe组件4,并隐藏其它组件;
参加图1,添加页签3的时候,通过监听路由系统可以获取正在添加的页签3,当页签3中的iframe组件已经加载完毕、有了在页面中的位置和大小后,将这个iframe组件复制到iframe组件的存储层中,并且给它设置相应的位置和大小。然后隐藏页签3中的iframe组件,显示存储层中的iframe组件,具体流程参见图1。虽然这是独立于页签3之外的iframe组件,但是由于使用了和页签3中iframe组件一样的位置和大小,可以保证它与页签3感官上的一致性。
(2)关闭页签3:
当关闭页签3时,捕获函数2会通知dom组件存储器5删除页签3中的iframe组件4,dom组件存储器5在接收到删除命令后,首先隐藏iframe组件4,然后从dom组件存储器5中删除iframe组件4;
参见图2,关闭页签的时候,通过监听路由系统可以获得正在关闭的页签3中的iframe组件,通过该iframe组件中的唯一id可以在iframe存储层中找到之前复制过来的iframe组件。删除该iframe组件就移除了该组件内嵌页面的缓存。
(3)激活页签3:
当激活页签3时,捕获函数2会通知dom组件存储器5隐藏所有的iframe组件4,然后显示页签3中的iframe组件4。
参见图3,激活页签的时候,通过监听路由系统可以获得正在激活页签中的iframe组件。同样可以通过id在存储层中找到相应的iframe组件。首先,隐藏存储层中所有的iframe组件,因为其它页签现在不可见;然后再显示需要显示的iframe组件。
(4)休眠页签3:
当休眠页签3时,捕获函数2通知dom组件存储器5隐藏页签3中的iframe组件4。
参见图4,休眠页签的时候,通过监听路由系统获得正在休眠页签中的iframe组件。通过id在存储层中找到相应的iframe组件,然后隐藏这个iframe组件。
所述的捕获函数2是在vue的前置路由守卫中嵌入的一个功能模块,能够通过截获路由来获取页签3中的iframe组件4,并后续处理页签3的多种操作方式;具体地,当路由发生变化时,捕获函数2通过截获路由,获取页签3以及页签3的操作方式,与此同时,捕获函数2遍历页签3中的所有子组件,当没有发现iframe组件4时,捕获函数2放行路由,让页签3进行下一步操作;当发现iframe组件4时,如果页签3的操作方式为添加或者激活,捕获函数2向dom组件存储器5发出复制命令,并且删除页签3中iframe组件4;当dom组件存储器5复制iframe组件4之后,捕获函数2才放行路由,让页签3加载。
Claims (6)
1.基于vue多页签应用系统中持久化外部页面状态的方法,其特征在于,具体步骤如下:
步骤一:在路由系统(1)中增加捕获函数(2),当用户操作页签(3)之后,触发路由切换,路由系统(1)在发现路由切换后通知捕获函数(2)捕获当前加载的页签(3);
步骤二:捕获函数(2)首先判断页签(3)中是否有iframe组件(4);如果没有,则不会干涉页签(3)的加载;如果有,首先截获页签(3),然后对页签(3)有以下几种不同操作方式,即通过隐藏和显示iframe组件(4)来模拟页签(3)的添加、关闭、激活、休眠的效果。
2.根据权利要求1所述的基于vue多页签应用系统中持久化外部页面状态的方法,其特征在于,所述的模拟页签(3)的添加,具体为:
当添加页签(3)时,由于dom组件存储器(5)是常驻于界面顶部的隐藏层,捕获函数(2)向dom组件存储器(5)发出复制命令;与此同时,dom组件存储器(5)判断需要复制的iframe组件(4)是否存在;如果存在,则显示在dom组件存储器(5)中的iframe组件(4),并隐藏其它的组件;如果不存在,则先将iframe组件(4)复制到dom组件存储器(5)中,然后显示这个iframe组件(4),并隐藏其它组件。
3.根据权利要求1所述的基于vue多页签应用系统中持久化外部页面状态的方法,其特征在于,所述的模拟页签(3)的关闭,具体为:
当关闭页签(3)时,捕获函数(2)通知dom组件存储器(5)删除页签(3)中的iframe组件(4),dom组件存储器(5)在接收到删除命令后,首先隐藏iframe组件(4),然后从dom组件存储器(5)中删除iframe组件(4)。
4.根据权利要求1所述的基于vue多页签应用系统中持久化外部页面状态的方法,其特征在于,所述的模拟页签(3)的激活,具体为:
当激活页签(3)时,捕获函数(2)通知dom组件存储器5隐藏所有的iframe组件(4),然后显示页签3中的iframe组件(4)。
5.根据权利要求1所述的基于vue多页签应用系统中持久化外部页面状态的方法,其特征在于,所述的模拟页签(3)的休眠,具体为:
当休眠页签(3)时,捕获函数(2)通知dom组件存储器(5)隐藏页签(3)中的iframe组件(4)。
6.根据权利要求1所述的基于vue多页签应用系统中持久化外部页面状态的方法,其特征在于,所述的捕获函数(2)是在vue的前置路由守卫中嵌入的一个功能模块,能够通过截获路由来获取页签(3)中的iframe组件(4),并后续处理页签(3)的多种操作方式。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011317871.8A CN112463121B (zh) | 2020-11-23 | 2020-11-23 | 基于vue多页签应用系统中持久化外部页面状态的方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011317871.8A CN112463121B (zh) | 2020-11-23 | 2020-11-23 | 基于vue多页签应用系统中持久化外部页面状态的方法 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN112463121A true CN112463121A (zh) | 2021-03-09 |
CN112463121B CN112463121B (zh) | 2024-03-19 |
Family
ID=74798749
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202011317871.8A Active CN112463121B (zh) | 2020-11-23 | 2020-11-23 | 基于vue多页签应用系统中持久化外部页面状态的方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN112463121B (zh) |
Cited By (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN113438167A (zh) * | 2021-06-25 | 2021-09-24 | 杭州遥望网络科技有限公司 | 一种单页面路由引擎方法、装置、电子设备和存储介质 |
CN113900628A (zh) * | 2021-12-09 | 2022-01-07 | 中邮消费金融有限公司 | 一种基于vue的多页签实例缓存方法 |
CN113961298A (zh) * | 2021-11-17 | 2022-01-21 | 中国建设银行股份有限公司 | 一种页面切换方法、装置、设备及介质 |
Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103914286A (zh) * | 2012-12-31 | 2014-07-09 | 北京新媒传信科技有限公司 | 用户界面中标签页的管理方法和管理器 |
CN109241469A (zh) * | 2018-09-13 | 2019-01-18 | 安徽智恒信科技有限公司 | 一种基于vue实现多页面切换的方法 |
CN109299331A (zh) * | 2018-11-23 | 2019-02-01 | 交通银行股份有限公司 | Air展现超文本标记语言HTML5页面的方法及装置 |
CN110032694A (zh) * | 2019-03-04 | 2019-07-19 | 北京立思辰安科技术有限公司 | 适用于流量审计的通用表格控件实现方法 |
CN111782999A (zh) * | 2020-06-29 | 2020-10-16 | 中国工商银行股份有限公司 | 一种页面展示方法、装置、设备及系统 |
-
2020
- 2020-11-23 CN CN202011317871.8A patent/CN112463121B/zh active Active
Patent Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103914286A (zh) * | 2012-12-31 | 2014-07-09 | 北京新媒传信科技有限公司 | 用户界面中标签页的管理方法和管理器 |
CN109241469A (zh) * | 2018-09-13 | 2019-01-18 | 安徽智恒信科技有限公司 | 一种基于vue实现多页面切换的方法 |
CN109299331A (zh) * | 2018-11-23 | 2019-02-01 | 交通银行股份有限公司 | Air展现超文本标记语言HTML5页面的方法及装置 |
CN110032694A (zh) * | 2019-03-04 | 2019-07-19 | 北京立思辰安科技术有限公司 | 适用于流量审计的通用表格控件实现方法 |
CN111782999A (zh) * | 2020-06-29 | 2020-10-16 | 中国工商银行股份有限公司 | 一种页面展示方法、装置、设备及系统 |
Non-Patent Citations (3)
Title |
---|
BESTER6转载: "VUE集成IFRAME页面", pages 1 - 37, Retrieved from the Internet <URL:https://www.cnblogs.com/bester-ace/articles/9292790.html> * |
江庆 等: "Vue+Webpack框架在银行App前端开发的应用", 金融科技时代, no. 11, 10 November 2016 (2016-11-10), pages 17 - 21 * |
龙马行空: "Vue 集成 Iframe 页面", pages 1 - 21, Retrieved from the Internet <URL:https://my.oschina.net/u/1416844/blog> * |
Cited By (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN113438167A (zh) * | 2021-06-25 | 2021-09-24 | 杭州遥望网络科技有限公司 | 一种单页面路由引擎方法、装置、电子设备和存储介质 |
CN113961298A (zh) * | 2021-11-17 | 2022-01-21 | 中国建设银行股份有限公司 | 一种页面切换方法、装置、设备及介质 |
CN113900628A (zh) * | 2021-12-09 | 2022-01-07 | 中邮消费金融有限公司 | 一种基于vue的多页签实例缓存方法 |
CN113900628B (zh) * | 2021-12-09 | 2022-02-18 | 中邮消费金融有限公司 | 一种基于vue的多页签实例缓存方法 |
Also Published As
Publication number | Publication date |
---|---|
CN112463121B (zh) | 2024-03-19 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN112463121A (zh) | 基于vue多页签应用系统中持久化外部页面状态的方法 | |
US8572337B1 (en) | Systems and methods for performing live backups | |
US8683127B2 (en) | Checkpointed tag prefetcher | |
KR102637757B1 (ko) | 전자 장치 및 전자 장치의 파일 데이터 저널링 방법 | |
US20150039837A1 (en) | System and method for tiered caching and storage allocation | |
JP6527577B2 (ja) | ファイルシステムにおけるフラッシング | |
US20060174067A1 (en) | Method of caching data | |
US9116698B2 (en) | Intelligent selection of operating state upon change of power state | |
WO2021218370A1 (zh) | 一种内存管理方法及终端设备 | |
CN110704184A (zh) | 一种应用内存优化方法、装置和移动终端 | |
CN108563929A (zh) | 一种仅在涉密区域生成水印的方法、系统、装置及介质 | |
US11997132B2 (en) | System and method for protecting network resources | |
CN104021028B (zh) | 虚拟机环境下的web缓存方法及装置 | |
CN105786997A (zh) | 基于iOS系统的图片缓存与压缩方法 | |
CN100580669C (zh) | 在Flash存储介质上的关于文件分配表的缓存实现方法 | |
CN104657358A (zh) | 实现网页程序离线缓存的方法和系统 | |
US8417903B2 (en) | Preselect list using hidden pages | |
JP2015114750A (ja) | 調査用プログラム,情報処理装置及び情報処理方法 | |
WO2004088461A3 (en) | Local emulation of data ram utilizing write-through cache hardware within a cpu module | |
CN110941595B (zh) | 一种文件系统访问方法及装置 | |
KR101595936B1 (ko) | 백신과 컴퓨터 최적화 기능을 구비한 컴퓨터 최적화 방법, 최적화 서버 및 컴퓨터 판독 가능한 기록매체 | |
US11194765B2 (en) | Accelerating and atomically moving files in an overlay optimizer | |
CN110058938B (zh) | 一种内存处理方法、装置、电子设备和可读介质 | |
CN108052415B (zh) | 一种恶意软件检测平台快速恢复方法及系统 | |
US8793663B2 (en) | Smart cache for a server test environment in an application development tool |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |