Page switching state maintaining method, device, apparatus and readable storage medium
Patent Information
- Application Number
- CN202611146643.6
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2026-07-30
- Publication Date
- 2026-08-28
AI Technical Summary
[0005]本申请提供一种页面切换的状态保持方法、装置、设备及可读存储介质，可以解决现有技术中存在的多iframe导致内存消耗增加的技术问题
通过接收页面切换指令，并基于所述页面切换指令确定待切换的目标子页面的路由标识；基于所述路由标识确定所述目标子页面对应的文档对象模型DOM节点，其中，所述DOM节点中包括所述目标子页面的页面状态信息；将当前显示的DOM节点从内嵌框架iframe中移除并存入缓存，将所述目标子页面对应的DOM节点添加至所述iframe中，完成页面切换；本申请实施例中，仅采用单一iframe即可实现多页面切换与状态缓存，无需为每个子页面单独创建iframe标签，减少浏览器上下文与进程开销，降低内存占用，避免因多内嵌框架导致的资源消耗过大、页面卡顿甚至崩溃的问题，提升系统稳定性与运行效率。
Smart Images
Figure CN122653743A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of information technology, and specifically to a method, apparatus, device, and readable storage medium for maintaining the state during page switching. Background Technology
[0002] With the continuous development of web application technologies, users often need to switch frequently between different subpages while using the system, and expect that when switching back to the previous page, the page's state information (such as form input content, scroll position, counter values, etc.) can be retained to obtain a smooth user experience. Therefore, how to optimize system resource consumption while ensuring the preservation of page state has become an urgent technical problem to be solved in the field of front-end integration.
[0003] In related technologies, to maintain state between subpages, a common approach is to create an independent embedded iframe for each subpage. When a user switches pages, the main system displays or hides the corresponding iframe tag to achieve the page transition.
[0004] However, the aforementioned existing technology has a significant drawback: each iframe tag occupies an independent browser context process. As the number of subpages increases, memory consumption increases significantly, which may exceed the resource limits of the browser process and cause the page to crash. Summary of the Invention
[0005] This application provides a method, apparatus, device, and readable storage medium for maintaining the state during page switching, which can solve the technical problem of increased memory consumption caused by multiple iframes in the prior art.
[0006] In a first aspect, embodiments of this application provide a method for maintaining the state during page switching, the method comprising: Receive a page switching instruction and determine the route identifier of the target subpage to be switched to based on the page switching instruction; The document object model (DOM) node corresponding to the target subpage is determined based on the route identifier, wherein the DOM node includes the page state information of the target subpage; Remove the currently displayed DOM node from the embedded iframe and store it in the cache, then add the DOM node corresponding to the target subpage to the iframe to complete the page switching.
[0007] In conjunction with the first aspect, in one implementation, receiving a page switching instruction and determining the routing identifier of the target subpage to be switched based on the page switching instruction includes: If a hash update event of its own address is detected, the hash update event is used as the page switching instruction, and the route identifier of the target subpage is parsed from the hash update event; Alternatively, if a message communication event is detected and the message data of the message communication event is page switching data, the message data is used as the page switching instruction, and the routing identifier of the target subpage is parsed from the message data.
[0008] In conjunction with the first aspect, in one implementation, determining the Document Object Model (DOM) node corresponding to the target subpage based on the route identifier includes: Based on the route identifier, determine whether the DOM node corresponding to the target subpage exists in the cache; If the DOM node does not exist in the cache, the resource path of the target subpage is determined according to the route identifier and the preset route mapping rules; The target subpage resource is loaded and parsed according to the resource path to obtain a document object; Based on the document object, create DOM nodes corresponding to the target subpage with style isolation and script scope isolation, and store the DOM nodes in the cache.
[0009] In conjunction with the first aspect, in one implementation, creating the DOM node corresponding to the target subpage with style isolation and script scope isolation based on the document object includes: Extract the page structure, style content, and script content of the target subpage from the document object; Construct the initial DOM nodes based on the page structure; The style content is encapsulated inside the initial DOM node, and an independent scope proxy environment is configured for the script content to obtain the DOM node corresponding to the target subpage that has achieved style isolation and script scope isolation.
[0010] In conjunction with the first aspect, in one implementation, determining the Document Object Model (DOM) node corresponding to the target subpage based on the route identifier further includes: If the DOM node corresponding to the route identifier exists in the cache, then the DOM node is determined to be the DOM node corresponding to the target subpage.
[0011] In conjunction with the first aspect, in one implementation, adding the DOM node corresponding to the target subpage to the iframe includes: Retrieve the DOM node corresponding to the target subpage from the cache; Mount the DOM node to the page container inside the iframe; Enable the styles and script execution environment corresponding to the DOM node to keep the page state information of the target subpage unchanged.
[0012] In conjunction with the first aspect, in one implementation, the method for maintaining the state of page switching further includes: If a page close command is detected, identify the route identifier corresponding to the subpage to be closed; Based on the route identifier of the subpage to be closed, determine the DOM node corresponding to the subpage to be closed in the cache; Remove and destroy the DOM node corresponding to the subpage to be closed from the cache to release page resources.
[0013] Secondly, embodiments of this application provide a page switching state maintenance device, the page switching state maintenance device comprising: A receiving module is used to receive page switching instructions and determine the routing identifier of the target subpage to be switched based on the page switching instructions; The determination module is used to determine the Document Object Model (DOM) node corresponding to the target subpage based on the route identifier, wherein the DOM node includes the page state information of the target subpage; The switching module is used to remove the currently displayed DOM node from the embedded iframe and store it in the cache, and add the DOM node corresponding to the target subpage to the iframe to complete the page switching.
[0014] Thirdly, embodiments of this application provide a page switching state retention device, the page switching state retention device including a processor, a memory, and a page switching state retention program stored in the memory and executable by the processor, wherein when the page switching state retention program is executed by the processor, it implements the steps of the page switching state retention method as described in the first aspect.
[0015] Fourthly, embodiments of this application provide a computer-readable storage medium storing a page switching state maintenance program, wherein when the page switching state maintenance program is executed by a processor, it implements the steps of the page switching state maintenance method as described in the first aspect.
[0016] The beneficial effects of the technical solutions provided in this application include: By receiving a page switching instruction and determining the route identifier of the target subpage to be switched based on the instruction; determining the Document Object Model (DOM) node corresponding to the target subpage based on the route identifier, wherein the DOM node includes the page state information of the target subpage; removing the currently displayed DOM node from the embedded iframe and storing it in the cache, and adding the DOM node corresponding to the target subpage to the iframe to complete the page switching; in this embodiment, multiple page switching and state caching can be achieved using only a single iframe, without the need to create a separate iframe tag for each subpage, reducing browser context and process overhead, reducing memory usage, avoiding excessive resource consumption, page lag, or even crashes caused by multiple embedded frames, and improving system stability and operating efficiency. Attached Figure Description
[0017] Figure 1 This is a flowchart illustrating an embodiment of the page switching state maintenance method of this application; Figure 2 For this application Figure 1 A detailed flowchart of step S20; Figure 3 A schematic diagram of functional modules of an embodiment of the page switching state retention device of this application; Figure 4 This is a schematic diagram of the hardware structure of the page switching state maintenance device involved in the embodiments of this application. Detailed Implementation
[0018] To enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present application, and not all embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative effort are within the scope of protection of the present application.
[0019] To make the objectives, technical solutions, and advantages of this application clearer, the embodiments of this application will be described in further detail below with reference to the accompanying drawings.
[0020] In a first aspect, embodiments of this application provide a method for maintaining the state during page switching.
[0021] In one embodiment, reference is made to Figure 1 , Figure 1 This is a flowchart illustrating an embodiment of the page switching state maintenance method of this application. Figure 1 As shown, the methods for maintaining the state during page transitions include: Step S10: Receive a page switching instruction and determine the routing identifier of the target subpage to be switched based on the page switching instruction; In this embodiment, page switching trigger events are monitored in real time to receive page switching instructions; based on the information carried by the page switching instructions (such as hash update data and message communication data), the routing identifier corresponding to the target subpage to be switched is parsed and determined, which serves as the sole basis for subsequent page loading and switching.
[0022] Step S20: Determine the Document Object Model (DOM) node corresponding to the target subpage based on the route identifier, wherein the DOM node includes the page state information of the target subpage; In this embodiment, the route identifier is used as an index to query whether a matching DOM node exists in the cache; if it exists, the DOM node is directly reused; if it does not exist, the target subpage resource is loaded and the corresponding DOM node is constructed, so that the DOM node carries and retains the page state information of the target subpage.
[0023] Step S30: Remove the currently displayed DOM node from the embedded iframe and store it in the cache, add the DOM node corresponding to the target subpage to the iframe, and complete the page switching.
[0024] In this embodiment, the DOM node currently in the display state is first removed from the iframe and saved to the cache to retain its page state information; then the DOM node corresponding to the target subpage is loaded and added to the iframe for display, thereby completing the switching of the subpage and realizing the caching and retention of the page state.
[0025] In this embodiment, a page switching instruction is received, and the route identifier of the target subpage to be switched is determined based on the page switching instruction; the Document Object Model (DOM) node corresponding to the target subpage is determined based on the route identifier, wherein the DOM node includes the page state information of the target subpage; the currently displayed DOM node is removed from the embedded frame (iframe) and stored in the cache, and the DOM node corresponding to the target subpage is added to the iframe to complete the page switching; in this embodiment, multiple page switching and state caching can be achieved using only a single iframe, without the need to create a separate iframe tag for each subpage, reducing browser context and process overhead, reducing memory usage, avoiding excessive resource consumption, page lag, or even crashes caused by multiple embedded frames, and improving system stability and operating efficiency.
[0026] Preferably, the main system of this application may include an embedded iframe, which loads a shell page provided by the subsystem, without directly loading business subpages. The shell page is an independent HTML file, including programs for loading, caching, switching, style isolation, and script scope isolation of subpages, without requiring modification of the original subsystem business code. The main system and the subsystem shell adopt a bidirectional communication mechanism: the main system notifies the subpage switching by modifying the hash value of the iframe; when the main system closes a tab, it sends a message of type CLEAR_CACHE to the subsystem shell through the postMessage message interface to trigger the clearing of the corresponding subpage cache and the release of resources. The subsystem shell internally maintains a cache with a Map structure, using the route identifier as the key and the subpage root container and the corresponding proxy document object as the value, to achieve caching and fast reuse of subpage resources.
[0027] Further, in one embodiment, receiving a page switching instruction and determining the routing identifier of the target subpage to be switched to based on the page switching instruction includes: If a hash update event of its own address is detected, the hash update event is used as the page switching instruction, and the route identifier of the target subpage is parsed from the hash update event; Alternatively, if a message communication event is detected and the message data of the message communication event is page switching data, the message data is used as the page switching instruction, and the routing identifier of the target subpage is parsed from the message data.
[0028] In this embodiment, the main page container listens for interactive events triggered by the page in real time, supporting two different channels for triggering page switching processes: First, it listens for hash update events in the current page's own address bar. Once a change in the hash value is detected, the hash update event is directly identified as a page switching instruction, and the unique routing identifier corresponding to the target subpage to be jumped to is extracted from the hash change information. Second, it listens for message communication events between windows and components in real time. When the message data carried by the message communication event is identified as page switching data in a preset format, the message data corresponding to the message communication event is used as a page switching instruction, and the routing identifier of the target subpage is also extracted from the message data. Through the dual event listening compatibility mode, it can adapt to the subpage switching needs in various business scenarios such as address bar route changes and cross-component communication triggers, achieving reliable reception of page switching instructions across the entire domain and accurate parsing of routing identifiers.
[0029] Further, in one embodiment, determining the Document Object Model (DOM) node corresponding to the target subpage based on the route identifier includes: Step S201: Determine whether the DOM node corresponding to the target subpage exists in the cache based on the route identifier; Step S202: If the DOM node does not exist in the cache, the resource path of the target subpage is determined according to the route identifier and the preset route mapping rules. Step S203: Load and parse the target subpage resource according to the resource path to obtain the document object; Step S204: Create a DOM node corresponding to the target subpage with style isolation and script scope isolation based on the document object, and store the DOM node in the cache.
[0030] In this embodiment, refer to Figure 2 , Figure 2 For this application Figure 1 The detailed flowchart of step S20 shows that after obtaining the route identifier of the target subpage, the local page resource cache pool is traversed first, using the route identifier as an index, to check whether the DOM node entity matching the target subpage is already pre-stored in the cache. When the cache is not hit and there is no corresponding DOM node, the system's preset route and resource path mapping rules are called, and the static resource request path corresponding to the target subpage is located by matching and searching through the current route identifier. The HTML string is obtained by fetching through the resource acquisition interface according to the resource path. The HTML string is parsed into a document object using the Document Object Model Parser. Then, the node is reconstructed based on the document object to create a dedicated DOM node with independent style isolation and script scope isolation. At the same time, the newly created DOM node is associated with the corresponding route identifier and stored in the global cache for direct reuse when switching between repeated pages, reducing the overhead of repeated resource loading and node creation.
[0031] Furthermore, in one embodiment, creating the DOM node corresponding to the target subpage with style isolation and script scope isolation based on the document object includes: Extract the page structure, style content, and script content of the target subpage from the document object; Construct the initial DOM nodes based on the page structure; The style content is encapsulated inside the initial DOM node, and an independent scope proxy environment is configured for the script content to obtain the DOM node corresponding to the target subpage that has achieved style isolation and script scope isolation.
[0032] In this embodiment, layered content extraction is performed based on the parsed document object, extracting the page structure, global and local style code, and business logic script code of the target subpage. Based on the extracted page skeleton structure, an initial DOM node framework is built in the main page's virtual DOM tree. Then, all style content of the subpage is locally encapsulated, limiting the style's scope to only the current initial DOM node, avoiding global style pollution and cross-subpage style interference. Simultaneously, an independent sandbox-style scope proxy environment is configured for the extracted script content, isolating the script execution context and preventing conflicts between script variables and global scope pollution across different subpages. Finally, a complete target subpage DOM node with both style isolation and script scope isolation capabilities is generated. During DOM node migration, only nodes in the document body (document.body) of the subpage document object, excluding script tags, are cloned and moved into the root container. Script tags are not directly migrated but their code is extracted separately for isolated execution. Script loading supports both inline scripts and external src scripts. For external scripts, the script source code is obtained via fetch before scope isolation and encapsulation for execution.
[0033] Furthermore, in one embodiment, determining the Document Object Model (DOM) node corresponding to the target subpage based on the route identifier further includes: If the DOM node corresponding to the route identifier exists in the cache, then the DOM node is determined to be the DOM node corresponding to the target subpage.
[0034] In this embodiment, when using the route identifier as the unique retrieval key for cache matching, if a DOM node entity that corresponds one-to-one with the route identifier of the current target subpage is already stored in the global cache, there is no need to re-request resources, parse documents, and create nodes. The DOM node that already exists in the cache is directly reused and determined as the DOM node corresponding to the target subpage to be switched. The cache reuse mechanism greatly shortens the page switching rendering time and improves the page switching response speed and overall interaction smoothness.
[0035] Furthermore, in one embodiment, adding the DOM node corresponding to the target subpage to the iframe includes: Retrieve the DOM node corresponding to the target subpage from the cache; Mount the DOM node to the page container inside the iframe; Enable the styles and script execution environment corresponding to the DOM node to keep the page state information of the target subpage unchanged.
[0036] In this embodiment, after the target subpage DOM node is matched and determined, the created and stored target subpage DOM node is retrieved from the global cache. This DOM node is then mounted and embedded into a dedicated page container node within the iframe nested within the main page, enabling the subpage to be embedded and displayed within the iframe container. Simultaneously, the pre-configured isolated style environment and independent script scope execution environment of this DOM node are activated, preserving all page state information such as the page scroll position, form input values, and interaction state before the subpage switch, ensuring that the context state is not lost and the business logic is seamlessly preserved after the subpage switch. When switching subpages, the currently active subpage root container is first removed from `document.body` (retained in the cache, not destroyed), and then the target subpage root container is mounted back into `document.body`. Only one subpage container is displayed at any given time, achieving state preservation and low memory usage.
[0037] Furthermore, in one embodiment, the method for maintaining the state during page switching further includes: If a page close command is detected, identify the route identifier corresponding to the subpage to be closed; Based on the route identifier of the subpage to be closed, determine the DOM node corresponding to the subpage to be closed in the cache; Remove and destroy the DOM node corresponding to the subpage to be closed from the cache to release page resources.
[0038] In this embodiment, the system monitors page close trigger commands in real time. When a subpage close command is detected, the system first identifies and parses the route identifier specific to the subpage to be closed. Using this route identifier as an index, the system retrieves the global cache and accurately locates the DOM node bound to the subpage in the cache. The system then removes the DOM node corresponding to the subpage to be closed from the cache pool and performs operations such as node destruction, style environment recycling, and script scope release. This promptly releases the occupied memory resources and page rendering resources, avoids memory leaks caused by the accumulation of invalid cache, and ensures reasonable scheduling of system resources in scenarios with frequent switching of multiple subpages.
[0039] Furthermore, in another preferred embodiment, style isolation is achieved by moving all style tags of the subpage into the root container, thus limiting the style scope to the current subpage container. When the root container is removed, the corresponding style is simultaneously removed from the DOM tree, and the style automatically becomes invalid, avoiding cross-page style conflicts without modifying the CSS selectors. The proxy document intercepts global document operations: for query methods such as getElementById (which retrieves elements by identifier) and querySelector (which queries elements by selector), the query scope is limited to the current subpage root container; for attributes such as the body node, head node, and documentElement node, the subpage root container is directly returned, preventing subpage scripts from accessing the global DOM, thus achieving DOM query isolation and basic scope isolation.
[0040] Secondly, embodiments of this application also provide a page switching state holding device, the page switching state holding device comprising: In one embodiment, reference is made to Figure 3 , Figure 3 This is a schematic diagram of the functional modules of an embodiment of the page switching state retention device of this application. Figure 3 As shown, the page switching state retention device includes: A receiving module is used to receive page switching instructions and determine the routing identifier of the target subpage to be switched based on the page switching instructions; The determination module is used to determine the Document Object Model (DOM) node corresponding to the target subpage based on the route identifier, wherein the DOM node includes the page state information of the target subpage; The switching module is used to remove the currently displayed DOM node from the embedded iframe and store it in the cache, and add the DOM node corresponding to the target subpage to the iframe to complete the page switching.
[0041] Furthermore, in one embodiment, the receiving module is used to: If a hash update event of its own address is detected, the hash update event is used as the page switching instruction, and the route identifier of the target subpage is parsed from the hash update event; Alternatively, if a message communication event is detected and the message data of the message communication event is page switching data, the message data is used as the page switching instruction, and the routing identifier of the target subpage is parsed from the message data.
[0042] Furthermore, in one embodiment, the determining module is used to: Based on the route identifier, determine whether the DOM node corresponding to the target subpage exists in the cache; If the DOM node does not exist in the cache, the resource path of the target subpage is determined according to the route identifier and the preset route mapping rules; The target subpage resource is loaded and parsed according to the resource path to obtain a document object; Based on the document object, create DOM nodes corresponding to the target subpage with style isolation and script scope isolation, and store the DOM nodes in the cache.
[0043] Furthermore, in one embodiment, the determining module is also used to: Extract the page structure, style content, and script content of the target subpage from the document object; Construct the initial DOM nodes based on the page structure; The style content is encapsulated inside the initial DOM node, and an independent scope proxy environment is configured for the script content to obtain the DOM node corresponding to the target subpage that has achieved style isolation and script scope isolation.
[0044] Furthermore, in one embodiment, the determining module is also used to: If the DOM node corresponding to the route identifier exists in the cache, then the DOM node is determined to be the DOM node corresponding to the target subpage.
[0045] Furthermore, in one embodiment, the switching module is used to: Retrieve the DOM node corresponding to the target subpage from the cache; Mount the DOM node to the page container inside the iframe; Enable the styles and script execution environment corresponding to the DOM node to keep the page state information of the target subpage unchanged.
[0046] Furthermore, in one embodiment, the page switching state maintenance device further includes a listening module, used for: If a page close command is detected, identify the route identifier corresponding to the subpage to be closed; Based on the route identifier of the subpage to be closed, determine the DOM node corresponding to the subpage to be closed in the cache; Remove and destroy the DOM node corresponding to the subpage to be closed from the cache to release page resources.
[0047] The functions of each module in the above-mentioned page switching state maintenance device correspond to the steps in the above-mentioned page switching state maintenance method embodiment, and their functions and implementation processes will not be described in detail here.
[0048] Thirdly, embodiments of this application provide a page switching state retention device, which can be a personal computer (PC), laptop computer, server, or other device with data processing capabilities.
[0049] Reference Figure 4 , Figure 4 This is a schematic diagram of the hardware structure of the page switching state maintenance device involved in the embodiments of this application. In the embodiments of this application, the page switching state maintenance device may include a processor, a memory, a communication interface, and a communication bus.
[0050] The communication bus can be of any type and is used to interconnect the processor, memory, and communication interface.
[0051] The communication interface includes input / output (I / O) interfaces, physical interfaces, and logical interfaces used for interconnecting internal components of the state-keeping device to enable page switching, as well as interfaces used for interconnecting the state-keeping device with other devices (such as other computing devices or user equipment). Physical interfaces can be Ethernet interfaces, fiber optic interfaces, ATM interfaces, etc.; user equipment can be displays, keyboards, etc.
[0052] Memory can be various types of storage media, such as random access memory (RAM), read-only memory (ROM), non-volatile RAM (NVRAM), flash memory, optical storage, hard disk, programmable ROM (PROM), erasable PROM (EPROM), electrically erasable PROM (EEPROM), etc.
[0053] The processor can be a general-purpose processor, which can call a page switching state preservation program stored in memory and execute the page switching state preservation method provided in the embodiments of this application. For example, the general-purpose processor can be a central processing unit (CPU). The method executed when the page switching state preservation program is called can be referred to in various embodiments of the page switching state preservation method of this application, and will not be repeated here.
[0054] Those skilled in the art will understand that Figure 4The hardware structure shown does not constitute a limitation of this application and may include more or fewer components than shown, or combine certain components, or have different component arrangements.
[0055] Fourthly, embodiments of this application also provide a computer-readable storage medium.
[0056] The present application provides a page switching state maintenance program stored on a computer-readable storage medium, wherein when the page switching state maintenance program is executed by a processor, it implements the steps of the page switching state maintenance method as described above.
[0057] The method implemented when the page switching state maintenance procedure is executed can be referred to in various embodiments of the page switching state maintenance method of this application, and will not be repeated here.
[0058] It should be noted that the sequence numbers of the embodiments in this application are for descriptive purposes only and do not represent the superiority or inferiority of the embodiments.
[0059] The terms "comprising" and "having," and any variations thereof, in the specification, claims, and accompanying drawings of this application are intended to cover non-exclusive inclusion. For example, a process, method, system, product, or apparatus that includes a series of steps or units is not limited to the listed steps or units, but may optionally include steps or units not listed, or may optionally include other steps or units inherent to such process, method, product, or apparatus. The terms "first," "second," and "third," etc., are used to distinguish different objects, etc., and do not indicate a sequence, nor do they limit "first," "second," and "third" to different types.
[0060] In the description of the embodiments of this application, terms such as "exemplary," "for example," or "for instance" are used to indicate examples, illustrations, or explanations. Any embodiment or design described as "exemplary," "for example," or "for instance" in the embodiments of this application should not be construed as being more preferred or advantageous than other embodiments or designs. Specifically, the use of terms such as "exemplary," "for example," or "for instance" is intended to present the relevant concepts in a concrete manner.
[0061] In the description of the embodiments of this application, unless otherwise stated, " / " means "or". For example, A / B can mean A or B. The "and / or" in the text is merely a description of the relationship between related objects, indicating that there can be three relationships. For example, A and / or B can mean: A exists alone, A and B exist simultaneously, and B exists alone. In addition, in the description of the embodiments of this application, "multiple" means two or more.
[0062] In some processes described in the embodiments of this application, multiple operations or steps are included in a specific order. However, it should be understood that these operations or steps may not be executed in the order they appear in the embodiments of this application, or they may be executed in parallel. The sequence number of the operation is only used to distinguish different operations, and the sequence number itself does not represent any execution order. In addition, these processes may include more or fewer operations, and these operations or steps may be executed sequentially or in parallel, and these operations or steps may be combined.
[0063] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods of the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk) as described above, and includes several instructions to cause a terminal device to execute the methods described in the various embodiments of this application.
[0064] The above are merely preferred embodiments of this application and do not limit the patent scope of this application. Any equivalent structural or procedural transformations made using the content of this application's specification and drawings, or direct or indirect applications in other related technical fields, are similarly included within the patent protection scope of this application.
Claims
1. A method for maintaining the state during page transitions, characterized in that, The method for maintaining the state during page switching includes: Receive a page switching instruction and determine the route identifier of the target subpage to be switched to based on the page switching instruction; The document object model (DOM) node corresponding to the target subpage is determined based on the route identifier, wherein the DOM node includes the page state information of the target subpage; Remove the currently displayed DOM node from the embedded iframe and store it in the cache, then add the DOM node corresponding to the target subpage to the iframe to complete the page switching.
2. The page switching state maintenance method as described in claim 1, characterized in that, The process of receiving a page switching instruction and determining the route identifier of the target subpage to be switched to based on the page switching instruction includes: If a hash update event of its own address is detected, the hash update event is used as the page switching instruction, and the route identifier of the target subpage is parsed from the hash update event; Alternatively, if a message communication event is detected and the message data of the message communication event is page switching data, the message data is used as the page switching instruction, and the routing identifier of the target subpage is parsed from the message data.
3. The page switching state maintenance method as described in claim 1, characterized in that, The step of determining the Document Object Model (DOM) node corresponding to the target subpage based on the route identifier includes: Based on the route identifier, determine whether the DOM node corresponding to the target subpage exists in the cache; If the DOM node does not exist in the cache, the resource path of the target subpage is determined according to the route identifier and the preset route mapping rules; The target subpage resource is loaded and parsed according to the resource path to obtain a document object; Based on the document object, create DOM nodes corresponding to the target subpage with style isolation and script scope isolation, and store the DOM nodes in the cache.
4. The page switching state maintenance method as described in claim 3, characterized in that, The process of creating the DOM node corresponding to the target subpage with style isolation and script scope isolation based on the document object includes: Extract the page structure, style content, and script content of the target subpage from the document object; Construct the initial DOM nodes based on the page structure; The style content is encapsulated inside the initial DOM node, and an independent scope proxy environment is configured for the script content to obtain the DOM node corresponding to the target subpage that has achieved style isolation and script scope isolation.
5. The page switching state maintenance method as described in claim 3, characterized in that, The step of determining the Document Object Model (DOM) node corresponding to the target subpage based on the route identifier also includes: If the DOM node corresponding to the route identifier exists in the cache, then the DOM node is determined to be the DOM node corresponding to the target subpage.
6. The page switching state maintenance method as described in claim 1, characterized in that, Adding the DOM node corresponding to the target subpage to the iframe includes: Retrieve the DOM node corresponding to the target subpage from the cache; Mount the DOM node to the page container inside the iframe; Enable the styles and script execution environment corresponding to the DOM node to keep the page state information of the target subpage unchanged.
7. The page switching state maintenance method as described in claim 1, characterized in that, The method for maintaining the state during page switching also includes: If a page close command is detected, identify the route identifier corresponding to the subpage to be closed; Based on the route identifier of the subpage to be closed, determine the DOM node corresponding to the subpage to be closed in the cache; Remove and destroy the DOM node corresponding to the subpage to be closed from the cache to release page resources.
8. A page switching state maintenance device, characterized in that, The page switching state retention device includes: A receiving module is used to receive page switching instructions and determine the routing identifier of the target subpage to be switched based on the page switching instructions; The determination module is used to determine the Document Object Model (DOM) node corresponding to the target subpage based on the route identifier, wherein the DOM node includes the page state information of the target subpage; The switching module is used to remove the currently displayed DOM node from the embedded iframe and store it in the cache, and add the DOM node corresponding to the target subpage to the iframe to complete the page switching.
9. A page switching state retention device, characterized in that, The page switching state retention device includes a processor, a memory, and a page switching state retention program stored in the memory and executable by the processor, wherein when the page switching state retention program is executed by the processor, it implements the steps of the page switching state retention method as described in any one of claims 1 to 7.
10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a page switching state maintenance program, wherein when the page switching state maintenance program is executed by a processor, it implements the steps of the page switching state maintenance method as described in any one of claims 1 to 7.