Three-party page management method and device, electronic equipment and storage medium

Abstract

The invention provides a three-party page management method and device, electronic equipment and a storage medium, and the method comprises the steps: responding to a first input of a first page link in a main application page, generating a first iframe element, and loading the first iframe element to a designated area of the main application page; filling the associated iframe instance into a specified area, and loading a third-party page linked with the first page; when the third-party page linked with the first page starts a keepalive cache mechanism, in response to the first page switching operation, hiding the third-party page linked with the first page, and displaying the third-party page linked with the second page in a specified area; and in response to the second page switching operation, filling a first iframe element which is cached in advance and is used for filling the iframe instance into the specified area, and recovering and displaying the third-party page of the first page link. According to the method and the device, different three-party pages can be smoothly switched, and flexible version management and independent upgrading of the three-party pages can be realized.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular, to a three-party page management method, apparatus, electronic device, and storage medium. Background Art

[0002] In the prior art, when traditional front-end frameworks perform page cache management, they usually adopt the SPA (Single Page Application) architecture, and all page contents are managed and rendered in the cache. Although this method can provide a better user experience and reduce the page loading time, the performance may be affected when facing complex applications. In addition, due to the high coupling degree between page contents and components, it is impossible to flexibly perform version management or independent upgrade, resulting in increased difficulty in maintenance and extension. Summary of the Invention

[0003] In view of the above problems, embodiments of the present application provide a three-party page management method, apparatus, electronic device, and storage medium that overcome the above problems or at least partially solve the above problems.

[0004] In a first aspect, an embodiment of the present application provides a three-party page management method, which is applied to a main application of a micro-frontend architecture. The method includes:

[0005] In response to receiving a first input for a first page link in the main application page, generating a first iframe element corresponding to the first page link, and loading the first iframe element in a specified area of the main application page;

[0006] Filling an iframe instance associated with a third-party page corresponding to the first page link into the specified area to load the third-party page corresponding to the first page link in the specified area;

[0007] When a keepalive cache mechanism is enabled for the third-party page corresponding to the first page link, in response to a first page switching operation in the main application page, hiding the third-party page corresponding to the first page link, and displaying the third-party page corresponding to a second page link in the specified area;

[0008] In response to a second page switching operation in the main application page, filling the first iframe element that pre-caches the filled iframe instance into the specified area to resume displaying the third-party page corresponding to the first page link in the specified area.

[0009] In a second aspect, an embodiment of the present application provides a three-party page management apparatus, which is applied to a main application of a micro-frontend architecture. The apparatus includes:

[0010] A generation and loading module, configured to generate a first iframe element corresponding to the first page link in response to receiving a first input to the first page link within the main application page, and load the first iframe element in a specified area of the main application page;

[0011] A filling module, configured to fill an iframe instance associated with a third-party page corresponding to the first page link into the specified area, so as to load the third-party page corresponding to the first page link in the specified area;

[0012] A first processing module, configured to, when a keepalive cache mechanism is enabled for the third-party page corresponding to the first page link, in response to a first page switching operation within the main application page, hide the third-party page corresponding to the first page link, and display the third-party page corresponding to the second page link in the specified area;

[0013] A second processing module, configured to, in response to a second page switching operation within the main application page, fill the first iframe element that pre-caches and fills the iframe instance into the specified area, so as to resume displaying the third-party page corresponding to the first page link in the specified area.

[0014] In a third aspect, an embodiment of the present application provides an electronic device, including a processor, a memory, and a computer program stored on the memory and executable on the processor. When the computer program is executed by the processor, the steps of the three-party page management method described in the first aspect above are implemented.

[0015] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the steps of the three-party page management method described in the first aspect above are implemented.

[0016] In the technical solution of the embodiment of the present application, based on the first input to the first page link in the main application page, a first iframe element is generated and loaded into the specified area, and the associated iframe instance is filled into the specified area and merged with the first iframe element. The third-party page corresponding to the first page link is loaded in the specified area. In response to the third-party page corresponding to the first page link enabling the keepalive caching mechanism, the third-party page corresponding to the first page link is hidden based on the first page switching operation, and the third-party page corresponding to the second page link is displayed in the specified area. When the second page switching operation is received, the third-party page corresponding to the first page link is restored and displayed in the specified area, so as to ensure that the user can smoothly switch different third-party pages by introducing the caching mechanism, ensure the persistence of the page state and the efficient page switching experience, achieve effective resource management, and improve the user experience and system performance effect.

[0017] Moreover, in the embodiment of the present application, the third-party page corresponding to the page link is independent of the main application, and the third-party page can be flexibly managed in terms of version and independently upgraded, making the difficulty of page maintenance and expansion small. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] Figure 1 A schematic diagram showing the third-party page management method provided by the embodiment of the present application;

[0019] Figure 2 A flowchart showing the implementation of the third-party page management method provided by the embodiment of the present application;

[0020] Figure 3 A schematic diagram showing the third-party page management device provided by the embodiment of the present application;

[0021] Figure 4 A schematic diagram showing the structure of the electronic device provided by the embodiment of the present application. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0022] The technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present application. Obviously, the described embodiments are some, but not all, of the embodiments of the present application. All other embodiments obtained by those of ordinary skill in the art based on the embodiments of the present application without creative efforts shall fall within the protection scope of the present application.

[0023] It should be understood that the "one embodiment" or "an embodiment" mentioned throughout the specification means that the specific features, structures or characteristics related to the embodiment are included in at least one embodiment of the present application. Therefore, the appearances of "in one embodiment" or "in an embodiment" throughout the specification do not necessarily refer to the same embodiment. In addition, these specific features, structures or characteristics can be combined in one or more embodiments in any suitable manner. Multiple embodiments in the embodiments of the present application can include two or more.

[0024] In various embodiments of the present application, it should be understood that the magnitudes of the serial numbers of the following processes do not mean the order of execution. The order of execution of each process should be determined by its function and internal logic, and should not constitute any limitation to the implementation process of the embodiments of the present application.

[0025] As an architectural pattern, micro frontends allow multiple independent micro-applications to be integrated into a main application to achieve flexible modular development and deployment. In the micro frontend architecture, the main application is responsible for configuring and managing different micro-applications, and at the same time allows access to third-party pages through the main application. Among them, a micro-application refers to a sub-application that uses the same technology stack as the main application, and a third-party page refers to a page that can be accessed independently.

[0026] The embodiments of the present application provide a method for managing third-party pages of a main application applied to a micro frontend architecture, as Figure 1 shown. The method includes the following steps:

[0027] Step 101, in response to receiving a first input to a first page link in the main application page, generate a first iframe element corresponding to the first page link, and load the first iframe element in a specified area of the main application page.

[0028] One or more page links corresponding to third-party pages are displayed on the main application page. When the user uses the main application, the page is jumped by clicking on a certain page link. At this time, the main application needs to create an iframe element through JavaScript DOM (Document Object Model) operations and combine it with the corresponding third-party page.

[0029] When the main application receives a first input from the user for a first page link within the main application page, such as a click on the first page link, in response to the first input, a first iframe element corresponding to the first page link is created based on JavaScript DOM operations, and the first iframe element is loaded in a specified area of the main application page. An iframe, as an HTML (Hyper Text Markup Language) element, is used to embed external web page content in the main application and supports dynamic loading and interaction.

[0030] The first page link is any page link selected by the user from the page links displayed on the main application page. The first iframe element created by the main application is an empty element, and the specified area of the main application page is a pre-set content area. By placing the first iframe element in the specified area of the main application page, the content area can be occupied by the third-party page corresponding to the first page link, facilitating the subsequent display of the third-party page in this area.

[0031] Step 102: Fill the specified area with an iframe instance associated with the third-party page corresponding to the first page link to load the third-party page corresponding to the first page link in the specified area.

[0032] When the first iframe element corresponding to the first page link is inserted into the specified area of the main application page and occupies the specified area of the main application page, fill the specified area with an iframe instance associated with the third-party page corresponding to the first page link to fuse the iframe instance with the matching first iframe element, and then load the third-party page corresponding to the first page link in the occupied specified area.

[0033] Step 103: When the keepalive cache mechanism is enabled for the third-party page corresponding to the first page link, in response to a first page switching operation within the main application page, hide the third-party page corresponding to the first page link and display the third-party page corresponding to the second page link in the specified area.

[0034] When loading the third-party page corresponding to the first page link, the main application needs to query whether the keepalive cache mechanism is enabled for this third-party page. Among them, the keepalive cache is used to maintain the state of the loaded page to ensure that the user can quickly restore the previous page when switching pages.

[0035] If the third-party page corresponding to the first page link enables the keepalive caching mechanism, the main application needs to cache the content associated with the current third-party page based on this mechanism. When receiving a first page switching operation indicating page switching within the main application page, in response to the first page switching operation, hide the third-party page corresponding to the first page link and display the third-party page corresponding to the second page link in the specified area, so as to achieve page switching in the specified area. When hiding the page, use CSS (Cascading Style Sheets) styles to hide the page.

[0036] The first page switching operation of the user within the main application page is, for example, an operation of selecting the second page link. Based on this operation, control the specified area of the main application page to switch from displaying the third-party page corresponding to the first page link to displaying the third-party page corresponding to the second page link.

[0037] Since the third-party page corresponding to the first page link enables the keepalive caching mechanism, when switching pages, the main application hides the third-party page corresponding to the first page link and triggers the display of the third-party page corresponding to the second page link. When triggering the display of the third-party page corresponding to the second page link, generate a second iframe element corresponding to the second page link, load the second iframe element in the specified area of the main application page, and fill the iframe instance associated with the third-party page corresponding to the second page link into the specified area to fuse the iframe instance with the second iframe element, and then display the third-party page corresponding to the second page link in the specified area.

[0038] Step 104: In response to a second page switching operation within the main application page, fill the first iframe element filled with the iframe instance cached in advance into the specified area to restore the display of the third-party page corresponding to the first page link in the specified area.

[0039] After controlling the display of the third-party page corresponding to the second page link in the specified area based on the first page switching operation, when receiving a second page switching operation indicating page switching within the main application page, in response to the second page switching operation, fill the first iframe element filled with the iframe instance cached in advance into the specified area to fill the iframe element associated with the third-party page corresponding to the first page link in the specified area, so as to restore the display of the third-party page corresponding to the first page link in the specified area.

[0040] The second page switching operation of the user within the main application page is an operation to indicate the restoration of the third-party page corresponding to the first page link. Based on this operation, the specified area of the main application page is controlled to switch back to display the third-party page corresponding to the first page link. And since the third-party page corresponding to the first page link enables the keepalive caching mechanism, by filling the first iframe element of the cached populated iframe instance into the specified area, the third-party page corresponding to the second page link is switched back to the third-party page corresponding to the first page link in the specified area, so that the user does not need to reload the accessed third-party page when performing page jumps. This design ensures that the user can quickly restore the previous page state when switching pages multiple times, thereby significantly enhancing the fluency and satisfaction of user operations.

[0041] In the above solution of the embodiment of the present application, based on the first input of the first page link within the main application page, a first iframe element is generated and loaded into the specified area, and the associated iframe instance is filled into the specified area to merge with the first iframe element, and the third-party page corresponding to the first page link is loaded in the specified area. In response to the third-party page corresponding to the first page link enabling the keepalive caching mechanism, the third-party page corresponding to the first page link is hidden based on the first page switching operation, and the third-party page corresponding to the second page link is displayed in the specified area. When the second page switching operation is received, the third-party page corresponding to the first page link is restored and displayed in the specified area, so as to ensure that the user can smoothly switch different third-party pages by introducing the caching mechanism, ensure the persistence of the page state and the efficient page switching experience, realize effective resource management, and improve the user experience and system performance effect.

[0042] Moreover, in the embodiment of the present application, the third-party page corresponding to the page link is independent of the main application, and the third-party page can be flexibly managed in terms of version and independently upgraded, making the page maintenance and expansion less difficult.

[0043] The following introduces the solution for page caching and page switching based on the keepalive caching mechanism. In an optional embodiment of the present application, the method further includes:

[0044] After loading the third-party page corresponding to the first page link in the specified area, trigger the load success event;

[0045] Identify whether the third-party page corresponding to the first page link enables the keepalive caching mechanism;

[0046] If the third-party page corresponding to the first page link is in the keepalive cache enabled state, the first iframe element that populates the iframe instance is cached in the current third-party page, and the first page link and the first element identifier corresponding to the first iframe element are cached based on the Map data structure.

[0047] After the third-party page corresponding to the first page link is loaded in the specified area of the main application page, the main application triggers a load success event and then starts to execute the page caching logic. When executing the page caching logic, it is identified whether the third-party page corresponding to the first page link enables the keepalive caching mechanism. If this page enables the keepalive caching mechanism, the first iframe element that fuses the iframe instance is cached in the current third-party page, and the first page link and the first element identifier corresponding to the first iframe element are cached based on the Map data structure.

[0048] As an efficient data storage form, the Map data structure stores data in key-value pairs and is suitable for managing the dynamic creation and status recording of iframe instances. In this embodiment, when storing based on the Map data structure, the key is the first page link and the value is the first element identifier corresponding to the first iframe element. The application of the Map data structure in this embodiment can not only avoid repeated instantiation of iframes but also easily manage the loaded or unloaded status through its structure. When the user switches from the original page to other pages, if it is detected that the element identifier matching the original page iframe instance already exists in the Map data structure, only this instance needs to be hidden. When the user switches back from other pages to the original page, there is no need to reload, enabling fast page switching and a smoother user experience.

[0049] In this embodiment, the developer needs to write corresponding logic for the creation and management of the Map data structure, including addition, retrieval, and deletion operations, for cache judgment during subsequent user access. This mechanism greatly facilitates the switching between different third-party pages and ensures that the previous page state can be quickly restored after page switching.

[0050] When a page switch occurs from the third-party page corresponding to the first page link to the third-party page corresponding to the second page link, the third-party page caching the first iframe element is hidden, and the second iframe element corresponding to the second page link is inserted into the specified area of the main application page. The iframe instance associated with the third-party page corresponding to the second page link is populated into the specified area to fuse the iframe instance with the matching second iframe element, and then the third-party page corresponding to the second page link is loaded in the specified area occupied by the second iframe element.

[0051] Among them, when responding to a second page switching operation within the main application page and filling the specified area with the first iframe element that pre-caches the populated iframe instance to resume displaying the third-party page corresponding to the first page link in the specified area, it includes:

[0052] Responding to the second page switching operation, obtaining the cached first iframe element according to the first element identifier; filling the first iframe element into the specified area and setting it to the display state, triggering the re-display of the third-party page corresponding to the first page link in the specified area.

[0053] In the case of caching the first iframe element of the fusion iframe instance, caching the first page link, and the first element identifier corresponding to the first iframe element, based on the second page switching operation of the user indicating to switch back to the original third-party page (the third-party page corresponding to the first page link) within the main application page, and based on the first element identifier cached in the Map data structure, obtaining the first iframe element of the fusion iframe instance cached in the original third-party page, filling the first iframe element into the specified area and setting it to the display state, so as to trigger the re-display of the third-party page corresponding to the first page link in the specified area.

[0054] For the third-party page corresponding to the second page link, if its keepalive caching mechanism is not enabled, the main application will execute the destruction logic, delete the second iframe element of the fusion iframe instance and release resources. This operation requires DOM operations and corresponding resource cleaning to ensure the effective utilization of application resources. At the same time, developers also need to provide detailed logs for subsequent performance optimization and debugging. If its keepalive caching mechanism is enabled, the main application will hide the third-party page corresponding to the second page link instead of destroying it. In this case, the second iframe element of the fusion iframe instance is cached in the third-party page corresponding to the second page link, and the second page link and the second element identifier corresponding to the second iframe element are cached based on the Map data structure; and by hiding the third-party page corresponding to the second page link, the overhead can be saved. When the user returns to this page, there is no need to reload, and the page display is directly triggered based on the second iframe element of the fusion iframe instance.

[0055] In the above implementation process of this application, when the keepalive cache mechanism is enabled on the page, the iframe element integrating the iframe instance is cached on the current page, and the page link and element identifier are cached based on the Map data structure to manage the iframe instance through the Map data structure, which not only avoids the overhead of repeated instantiation but also can efficiently manage the states of loaded and unloaded third-party pages. When the user returns to the original page, there is no need to reload, and this optimization not only reduces the consumption of memory resources but also improves the performance of the entire application.

[0056] The following introduces the solution for closing the page. Optionally, after caching the first iframe element, the first element identifier, and the first page link, the method further includes:

[0057] In response to a close operation indicating to close the third-party page corresponding to the first page link, a page close event is triggered; the cached first iframe element is found and deleted based on the first element identifier stored in the Map data structure, and the first page link and the first element identifier stored in the Map data structure are deleted;

[0058] In response to the deletion of the first iframe element, the first page link, and the first element identifier, the third-party page corresponding to the first page link is closed and a page close prompt message is output.

[0059] When the user browses the third-party page, they will eventually face the decision to close the page. When the user closes the third-party page corresponding to the first page link through the close button or other means, a page close event will be triggered. Then, based on the first element identifier stored in the Map data structure, the first iframe element integrating the iframe instance cached on the page is found and deleted, and the first page link and the first element identifier stored in the Map data structure need to be deleted. By deleting the first iframe element, the first page link, and the first element identifier, the third-party page corresponding to the first page link is closed, which can avoid potential memory leaks and resource waste while clearing the cache.

[0060] For developers, it is necessary to ensure that the deletion operation of the Map data structure can be correctly executed and the changes can be synchronized to the page state to avoid data inconsistency caused by user misoperations. At the same time, after closing the page, the main application can provide feedback prompts to the user, such as displaying "The page has been closed" or returning to the previous page. The design of this process will further improve the user's operation experience and overall usability.

[0061] In an optional embodiment of the present application, the generating a first iframe element corresponding to the first page link in response to receiving a first input to the first page link in the main application page and loading the first iframe element in a specified area of the main application page includes:

[0062] In response to the first input, generate a first iframe element, set the src attribute of the first iframe element to the first page link, and set the style attribute of the first iframe element to the main application style;

[0063] Insert the first iframe element into the specified area of the main application page.

[0064] The main application listens for the user's operations in the main application page. When it detects the first input to the first page link in the main application page, it generates a first iframe element according to the first page link and sets the necessary attributes for the first iframe element. Specifically, it sets the src attribute of the first iframe element to the first page link and sets the style attribute of the first iframe element to the main application style to ensure that it is consistent with the style of the main application.

[0065] After generating the first iframe element and setting the necessary attributes, insert the first iframe element into the specified area of the main application page, occupying the specified area of the main application page to ensure that the third-party page corresponding to the first page link is displayed in the specified area of the main application page.

[0066] In the embodiment of the present application, the main application needs to centrally manage the third-party page links and their corresponding caching policies. First, in the configuration phase, the developer defines the accessible third-party page links in the configuration file of the main application and specifies whether to enable the keepalive caching mechanism for each page link. Once the user accesses these third-party pages through the main application, the main application will decide how to handle the unloaded pages according to the developer's settings.

[0067] That is, the configuration file of the main application includes multiple page links accessible in the main application page and the keepalive caching configuration information corresponding to each page link. The keepalive caching configuration information is used to indicate whether to enable the keepalive caching mechanism; when the user accesses the third-party page corresponding to the page link through the main application, the main application determines the handling method of the third-party page corresponding to the page link according to the corresponding keepalive caching configuration information.

[0068] When configuring the caching mechanism, introduce a configuration item "enableKeepalive". After the configuration is completed, the main application will be able to adjust whether to use page caching according to different situations. When it is set to "true", the main application will start the keepalive caching mechanism to ensure that the state of the third-party page can be maintained. The design of this mechanism not only improves the user experience but also optimizes the performance, avoiding the performance consumption caused by frequent page re-rendering.

[0069] The following describes the three-party page management solution of the embodiments of the present application through an overall process, as Figure 2 shown, including:

[0070] Step 201, configure the page link and the page caching policy.

[0071] Step 202, based on the first input of the first page link in the main application page by the user, the main application creates a first iframe element and inserts it into the specified area of the main application page, and fills the iframe instance associated with the third-party page corresponding to the first page link into the specified area to load the third-party page corresponding to the first page link in the specified area.

[0072] Step 203, if the third-party page corresponding to the first page link is in the keepalive caching enabled state, the main application caches the first iframe element that fills the iframe instance in the current third-party page, and caches the first element identifier corresponding to the first page link and the first iframe element based on the Map data structure.

[0073] Step 204, in response to the first page switching operation in the main application page, the main application hides the third-party page corresponding to the first page link and displays the third-party page corresponding to the second page link in the specified area.

[0074] Step 205, in response to the second page switching operation, the main application obtains the cached first iframe element according to the first element identifier, fills the first iframe element into the specified area and sets it to the display state, and triggers the re-display of the third-party page corresponding to the first page link in the specified area.

[0075] Step 206, in response to the close operation indicating to close the third-party page corresponding to the first page link, the main application triggers a page close event, deletes the first iframe element, the first page link, and the first element identifier, and closes the third-party page corresponding to the first page link.

[0076] In the above implementation process, under the micro-frontend architecture, the main application is first responsible for centrally managing different third-party links. By means of a configuration file, it defines the accessible page links and sets a keepalive caching mechanism for them. Developers can control the handling method of unloaded pages. After the user clicks on a page link, an iframe element is dynamically created via JavaScript, and its style is ensured to be consistent with that of the main application.

[0077] When loading a third-party page, the main application will query the keepalive cache status and use a Map data structure to cache iframe instances, thus achieving a fast switching function. If the user jumps to other pages, it can be decided whether to hide or destroy the iframe according to the keepalive cache status, minimizing performance consumption. When the user closes the page, the cache is cleared and memory leakage is ensured not to occur.

[0078] Through the application of the above technical solutions, the three-party page caching mechanism of the micro-frontend architecture ensures that users can smoothly switch between different third-party pages, while ensuring state persistence and an efficient page switching experience, achieving effective resource management and enhancing system performance and user satisfaction.

[0079] An embodiment of this application provides a three-party page management device, which is applied to the main application of the micro-frontend architecture, as Figure 3 shown. The method includes:

[0080] A generation module 301 is generated, which is used to generate a first iframe element corresponding to the first page link in response to receiving a first input to the first page link within the main application page, and load the first iframe element in a specified area of the main application page;

[0081] A filling module 302 is used to fill an iframe instance associated with the third-party page corresponding to the first page link into the specified area, so as to load the third-party page corresponding to the first page link in the specified area;

[0082] A first processing module 303 is used to, when the keepalive caching mechanism is enabled for the third-party page corresponding to the first page link, in response to a first page switching operation within the main application page, hide the third-party page corresponding to the first page link and display the third-party page corresponding to the second page link in the specified area;

[0083] A second processing module 304 is used to, in response to a second page switching operation within the main application page, fill the first iframe element that pre-caches and fills the iframe instance into the specified area, so as to resume displaying the third-party page corresponding to the first page link in the specified area.

[0084] Optionally, the device further includes:

[0085] A first trigger module, configured to trigger a loading success event after the third-party page corresponding to the first page link is loaded in the specified area;

[0086] An identification module, configured to identify whether the third-party page corresponding to the first page link enables the keepalive cache mechanism;

[0087] A third processing module, configured to, if the third-party page corresponding to the first page link is in the keepalive cache enabled state, cache the first iframe element that populates the iframe instance in the current third-party page, and cache the first page link and the first element identifier corresponding to the first iframe element based on the Map data structure.

[0088] Optionally, the second processing module includes:

[0089] An acquisition sub-module, configured to, in response to the second page switching operation, acquire the cached first iframe element according to the first element identifier;

[0090] A processing sub-module, configured to populate the first iframe element into the specified area and set it to the display state, and trigger the re-display of the third-party page corresponding to the first page link in the specified area.

[0091] Optionally, the device further includes:

[0092] A second trigger module, configured to, after caching the first iframe element, the first element identifier, and the first page link, trigger a page closing event in response to a closing operation indicating the closing of the third-party page corresponding to the first page link;

[0093] A search and deletion module, configured to search for and delete the cached first iframe element based on the first element identifier stored in the Map data structure, and delete the first page link and the first element identifier stored in the Map data structure;

[0094] A closing module, configured to, in response to the deletion of the first iframe element, the first page link, and the first element identifier, close the third-party page corresponding to the first page link and output a page closing prompt message.

[0095] Optionally, the generation and loading module is further configured to:

[0096] In response to the first input, generate the first iframe element, set the src attribute of the first iframe element to the first page link, and set the style attribute of the first iframe element to the main application style;

[0097] Insert the first iframe element into a specified area of the main application page.

[0098] Optionally, the configuration file of the main application includes multiple page links accessible on the main application page and keepalive cache configuration information corresponding to each page link, and the keepalive cache configuration information is used to indicate whether to enable the keepalive cache mechanism;

[0099] When the user accesses a third-party page corresponding to a page link through the main application, the main application determines the processing method of the third-party page corresponding to the page link according to the keepalive cache configuration information.

[0100] For the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple. For related parts, refer to the partial description of the method embodiment.

[0101] The embodiment of the present application further provides an electronic device, including: a processor, a memory, and a computer program stored on the memory and executable on the processor. When the computer program is executed by the processor, it implements each process of the above-mentioned third-party page management method embodiment and can achieve the same technical effect. To avoid repetition, it will not be elaborated here.

[0102] For example, Figure 4 shows a schematic diagram of the physical structure of an electronic device. As Figure 4 shown, the electronic device may include: a processor 410, a communication interface 420, a memory 430, and a communication bus 440. Among them, the processor 410, the communication interface 420, and the memory 430 complete mutual communication through the communication bus 440. The processor 410 can call the logical instructions in the memory 430, and the processor 410 is used to execute each process of the third-party page management method in the embodiment of the present application, which will not be elaborated one by one here.

[0103] In addition, when the logical instructions in the above-mentioned memory 430 are implemented in the form of software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on such an understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or a part of this technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods described in various embodiments of this application.

[0104] The embodiments of this application also provide a computer-readable storage medium. A computer program is stored on the computer-readable storage medium. When the computer program is executed by a processor, it implements each process of the above-mentioned embodiments of the three-party page management method and can achieve the same technical effects. To avoid repetition, it will not be elaborated here. Among them, the computer-readable storage medium, such as a read-only memory (ROM for short), a random access memory (RAM for short), a magnetic disk, or an optical disc, etc.

[0105] It should be noted that in this article, the term "including", "comprising", or any other variant thereof is intended to cover non-exclusive inclusion, so that a process, method, article, or device including a series of elements not only includes those elements, but also includes other elements not explicitly listed, or further includes elements inherent to such a process, method, article, or device. Without more limitations, an element defined by the statement "including one..." does not exclude the existence of another identical element in the process, method, article, or device including that element.

[0106] Through the description of the above embodiments, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform. Of course, they can also be implemented by hardware, but in many cases, the former is a better implementation method. Based on such an 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 disc) and includes several instructions for causing a terminal (which may be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.) to execute the methods described in various embodiments of this application.

[0107] The embodiments of the present application have been described above in conjunction with the accompanying drawings. However, the present application is not limited to the above specific embodiments. The above specific embodiments are merely illustrative and not restrictive. Under the inspiration of the present application, those of ordinary skill in the art can also make many forms without departing from the purpose of the present application and the scope protected by the claims, and all of them belong to the protection scope of the present application.

[0108] Those of ordinary skill in the art can realize that the units and algorithm steps of each example described in combination with the embodiments disclosed in the embodiments of the present application can be implemented by electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are executed in a hardware or software manner depends on the specific application and design constraints of the technical solution. Professional technicians can use different methods to implement the described functions for each specific application, but such implementation should not be considered to exceed the scope of the present application.

[0109] Those skilled in the art can clearly understand that for the convenience and simplicity of description, the specific working processes of the systems, devices, and units described above can refer to the corresponding processes in the foregoing method embodiments and will not be repeated here.

[0110] In the embodiments provided in the present application, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the device embodiments described above are merely illustrative. For example, the division of the units is only a logical function division, and there may be other division methods in actual implementation. For example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the displayed or discussed couplings or direct couplings or communication connections to each other can be through some interfaces. The indirect couplings or communication connections of devices or units can be electrical, mechanical, or other forms.

[0111] The units described as separate components may or may not be physically separated. The components displayed as units may or may not be physical units, that is, they can be located in one place, or distributed to multiple network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0112] In addition, the functional units in each embodiment of the present application can be integrated into one processing unit, or each unit can exist physically alone, or two or more units can be integrated into one unit.

[0113] When the above-mentioned functions are implemented in the form of software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or a part of this technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods described in various embodiments of this application. The aforementioned storage medium includes: various media such as USB flash drives, mobile hard disks, ROM, RAM, magnetic disks, or optical discs that can store program codes.

[0114] As described above, the above is only the specific implementation manner of this application, but the protection scope of this application is not limited thereto. Any person skilled in the art within the technical scope disclosed by this application can easily think of changes or substitutions, which should all be covered by the protection scope of this application. Therefore, the protection scope of this application should be subject to the protection scope of the claims.

Claims

1. A three-party page management method, applied to the main application of the micro-frontend architecture, characterized in that: The method comprises: In response to receiving a first input to a first page link in a main application page, generating a first iframe element corresponding to the first page link, and loading the first iframe element in a designated area of ​​the main application page; Filling the designated area with an iframe instance associated with the third-party page corresponding to the first page link, so as to load the third-party page corresponding to the first page link in the designated area; In a case where a keepalive cache mechanism is enabled for the third-party page corresponding to the first page link, in response to a first page switching operation in the main application page, hiding the third-party page corresponding to the first page link, and displaying the third-party page corresponding to the second page link in the designated area; In response to a second page switching operation within the main application page, the first iframe element of the pre-cached filled iframe instance is filled into the designated area to restore display of the third-party page corresponding to the first page link in the designated area.

2. The method according to claim 1, characterized in that The method further comprises: After the third-party page corresponding to the first page link is loaded in the designated area, a loading success event is triggered; Identify whether a keepalive cache mechanism is enabled on a third-party page corresponding to the first page link; If the third-party page corresponding to the first page link is in keepalive cache enabled state, the first iframe element filled with the iframe instance is cached in the current third-party page, and the first element identifier corresponding to the first page link and the first iframe element is cached based on the Map data structure.

3. The method according to claim 2, characterized in that In response to the second page switching operation in the main application page, filling the first iframe element of the pre-cached filled iframe instance into the designated area to restore the display of the third-party page corresponding to the first page link in the designated area, including: In response to the second page switching operation, acquiring the cached first iframe element according to the first element identifier; Fill the first iframe element into the designated area and set it to a display state, triggering the third-party page corresponding to the first page link to be re-displayed in the designated area.

4. The method according to claim 2, characterized in that: After caching the first iframe element, the first element identifier, and the first page link, the method further includes: In response to a closing operation indicating closing of the third-party page corresponding to the first page link, triggering a page closing event; Based on the first element identifier stored in the Map data structure, searching for and deleting the cached first iframe element, and deleting the first page link and the first element identifier stored in the Map data structure; In response to the first iframe element, the first page link and the first element identifier being deleted, the third-party page corresponding to the first page link is closed and page closing prompt information is output.

5. The method according to claim 1, characterized in that In response to receiving a first input to a first page link in a main application page, generating a first iframe element corresponding to the first page link, and loading the first iframe element in a designated area of ​​the main application page, comprises: In response to the first input, generate the first iframe element, set the src attribute of the first iframe element to the first page link, and set the style attribute of the first iframe element to the main application style; Insert the first iframe element into a designated area of ​​the main application page.

6. The method according to any one of claims 1 to 5, characterized in that: The configuration file of the main application includes a plurality of page links accessible on the main application page and keepalive cache configuration information corresponding to each page link, wherein the keepalive cache configuration information is used to indicate whether to enable the keepalive cache mechanism; When a user accesses a third-party page corresponding to a page link through the main application, the main application determines a processing method for the third-party page corresponding to the page link according to the keepalive cache configuration information.

7. A third-party page management device, applied to the main application of the micro-frontend architecture, characterized in that: The device comprises: Generate a loading module, for generating a first iframe element corresponding to a first page link in a main application page in response to receiving a first input to the first page link in the main application page, and load the first iframe element in a designated area of ​​the main application page; A filling module, used to fill the iframe instance associated with the third-party page corresponding to the first page link into the designated area, so as to load the third-party page corresponding to the first page link in the designated area; a first processing module, configured to, in response to a first page switching operation in the main application page, hide the third-party page corresponding to the first page link and display the third-party page corresponding to the second page link in the designated area when a keepalive cache mechanism is enabled for the third-party page corresponding to the first page link; The second processing module is used to fill the first iframe element of the pre-cached filled iframe instance into the designated area in response to a second page switching operation in the main application page, so as to restore the display of the third-party page corresponding to the first page link in the designated area.

8. The device according to claim 7, characterized in that The device also includes: A first trigger module, configured to trigger a loading success event after a third-party page corresponding to the first page link is loaded in the designated area; An identification module, used to identify whether a keepalive cache mechanism is enabled on a third-party page corresponding to the first page link; The third processing module is used to cache the first iframe element that fills the iframe instance in the current third-party page if the third-party page corresponding to the first page link is in the keepalive cache enabled state, and cache the first element identifier corresponding to the first page link and the first iframe element based on the Map data structure.

9. An electronic device, characterized in that: The method comprises a processor, a memory and a computer program stored in the memory and executable on the processor, wherein the computer program, when executed by the processor, implements the steps of the three-party page management method as claimed in any one of claims 1 to 6.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps of the three-party page management method according to any one of claims 1 to 6 are implemented.

Images