CN112463121B - 基于vue多页签应用系统中持久化外部页面状态的方法 - Google Patents
基于vue多页签应用系统中持久化外部页面状态的方法 Download PDFInfo
- Publication number
- CN112463121B CN112463121B CN202011317871.8A CN202011317871A CN112463121B CN 112463121 B CN112463121 B CN 112463121B CN 202011317871 A CN202011317871 A CN 202011317871A CN 112463121 B CN112463121 B CN 112463121B
- Authority
- CN
- China
- Prior art keywords
- tab
- iframe
- component
- dom
- memory
- 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.)
- Active
Links
- 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 title claims abstract description 13
- 238000000034 method Methods 0.000 title claims abstract description 13
- 230000002085 persistent effect Effects 0.000 title claims abstract description 9
- 230000000694 effects Effects 0.000 claims abstract description 5
- 230000003213 activating effect Effects 0.000 claims abstract description 4
- 230000005059 dormancy Effects 0.000 claims abstract description 4
- 230000006870 function Effects 0.000 claims description 34
- 230000004913 activation Effects 0.000 claims description 3
- 238000012217 deletion Methods 0.000 claims description 3
- 230000037430 deletion Effects 0.000 claims description 3
- 238000004088 simulation Methods 0.000 claims 1
- 230000007547 defect Effects 0.000 abstract description 2
- 238000010586 diagram Methods 0.000 description 3
- 230000005284 excitation Effects 0.000 description 1
- 230000007958 sleep Effects 0.000 description 1
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 (1)
1.基于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)的多种操作方式。
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 CN112463121A (zh) | 2021-03-09 |
CN112463121B true 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) |
Families Citing this family (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN113438167A (zh) * | 2021-06-25 | 2021-09-24 | 杭州遥望网络科技有限公司 | 一种单页面路由引擎方法、装置、电子设备和存储介质 |
CN113961298A (zh) * | 2021-11-17 | 2022-01-21 | 中国建设银行股份有限公司 | 一种页面切换方法、装置、设备及介质 |
CN113900628B (zh) * | 2021-12-09 | 2022-02-18 | 中邮消费金融有限公司 | 一种基于vue的多页签实例缓存方法 |
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 (1)
Title |
---|
Vue+Webpack框架在银行App前端开发的应用;江庆 等;金融科技时代;20161110(第11期);第17-21页 * |
Also Published As
Publication number | Publication date |
---|---|
CN112463121A (zh) | 2021-03-09 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN112463121B (zh) | 基于vue多页签应用系统中持久化外部页面状态的方法 | |
CN103164254B (zh) | 用于维持镜像虚拟环境中存储装置的一致性的方法和系统 | |
US7634507B2 (en) | Ensuring data persistence and consistency in enterprise storage backup systems | |
CN103853417B (zh) | 网络动态图片的滚动分页显示方法和装置 | |
CN102792276B (zh) | 闪速复制级联中的缓冲磁盘 | |
KR102637757B1 (ko) | 전자 장치 및 전자 장치의 파일 데이터 저널링 방법 | |
US11042469B2 (en) | Logging trace data for program code execution at an instruction level | |
CN104808952B (zh) | 数据缓存方法及装置 | |
CN109902255B (zh) | 页面混合浏览记录生成方法、装置、设备和存储介质 | |
CN109710185A (zh) | 数据处理方法及装置 | |
TW201145019A (en) | Semiconductor storage device and personal computer | |
CN107209683A (zh) | 备份映像恢复 | |
KR20170042593A (ko) | 파일 시스템에서의 플러싱 기법 | |
CN110168508B (zh) | 监测断点出现的存储器位置的方法、计算机系统和介质 | |
CN108563929A (zh) | 一种仅在涉密区域生成水印的方法、系统、装置及介质 | |
CN104462612A (zh) | 一种监控数据库信息的方法和设备 | |
WO2023151352A1 (zh) | 一种内存快照管理方法、装置、设备及介质 | |
WO2015062292A1 (zh) | 页面排版方法及系统 | |
CN104424115B (zh) | 恢复电子设备的预设状态的方法、存储装置和电子设备 | |
JP2015114750A (ja) | 調査用プログラム,情報処理装置及び情報処理方法 | |
JP2014010741A (ja) | 情報処理装置、情報処理方法及びプログラム | |
CN104952029B (zh) | AutoCAD悬浮物理水印的插件化实现系统及方法 | |
CN108733584A (zh) | 用于优化数据缓存的方法和设备 | |
WO2018082119A1 (zh) | 恢复浏览器中页面的方法及其装置 | |
WO2023070462A1 (zh) | 一种文件去重方法、装置和设备 |
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 |