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多页签应用系统中持久化外部页面状态的方法 | |
| CN106354582B (zh) | 一种连续数据保护方法 | |
| US7634507B2 (en) | Ensuring data persistence and consistency in enterprise storage backup systems | |
| CN102792276B (zh) | 闪速复制级联中的缓冲磁盘 | |
| WO2018129774A1 (zh) | 页面处理方法及装置 | |
| KR102637757B1 (ko) | 전자 장치 및 전자 장치의 파일 데이터 저널링 방법 | |
| CN104077380B (zh) | 一种重复数据删除方法、装置及系统 | |
| CN104808952B (zh) | 数据缓存方法及装置 | |
| CN109710185A (zh) | 数据处理方法及装置 | |
| TW201145019A (en) | Semiconductor storage device and personal computer | |
| CN107209683A (zh) | 备份映像恢复 | |
| US20200026639A1 (en) | Logging trace data for program code execution at an instruction level | |
| CN110168508B (zh) | 监测断点出现的存储器位置的方法、计算机系统和介质 | |
| JP2017527887A (ja) | ファイルシステムにおけるフラッシング | |
| CN102722307A (zh) | 一种缩略图导航方法及装置 | |
| CN104462612A (zh) | 一种监控数据库信息的方法和设备 | |
| CN106528026B (zh) | 文本显示方法及装置 | |
| CN114153567B (zh) | 一种内存快照管理方法、装置、设备及介质 | |
| CN104216802B (zh) | 一种内存数据库恢复方法和设备 | |
| CN103353860A (zh) | 内存管理方法及装置 | |
| WO2015062292A1 (zh) | 页面排版方法及系统 | |
| CN109101323A (zh) | 虚拟机运行状态下基于qcow2格式的快照实现方法 | |
| JP2015095219A (ja) | 情報処理装置、情報処理方法および記憶媒体 | |
| CN104424115B (zh) | 恢复电子设备的预设状态的方法、存储装置和电子设备 | |
| JP2015114750A (ja) | 調査用プログラム，情報処理装置及び情報処理方法 |
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 |