A pop-up loading method, electronic device and storage medium

Abstract

The application discloses a pop-up window loading method, an electronic device and a storage medium. The method comprises the following steps: entering a host page; requesting pop-up window component data from a server according to operation position configuration information of the host page and a host project corresponding to the host page; wherein the pop-up window component data comprises pop-up window running data and pop-up window material data, and the pop-up window running data comprises Vue framework configuration information; obtaining target pop-up window component data corresponding to a target operation position from the pop-up window component data returned by the server; creating an embedded page in the host page, and rendering a target pop-up window of the target operation position based on the target pop-up window component data through the embedded page. Through the above method, the pop-up window loading can be completely decoupled from the host page.

Description

Technical Field

[0001] This application relates to the field of page loading technology, and in particular to a pop-up loading method, electronic device, and storage medium. Background Technology

[0002] In application operation scenarios, user reach and conversion are typically achieved by loading pop-ups (retention pop-ups, questionnaire pop-ups, and guidance pop-ups) on the host page. In existing pop-up loading implementations, the triggering, loading, and rendering logic of the pop-up is usually embedded in the host page's business logic. Adding or removing the number of pop-ups, adding new pop-up types, or modifying pop-up content on the host page all require direct modification of the host page's business logic and redeployment of the entire host project. This deep coupling between the pop-up loading implementation and the host page's business logic leads to low efficiency in iterative development of pop-ups, insufficient reusability, and high maintenance costs. Summary of the Invention

[0003] The main technical problem addressed by this application is to provide a pop-up loading method, electronic device, and storage medium that can completely decouple pop-up loading from the host page.

[0004] To address the aforementioned technical issues, the first aspect of this application provides a pop-up loading method, which includes: entering a host page; requesting pop-up component data from a server based on the operation position configuration information of the host page and the host project corresponding to the host page; wherein the pop-up component data includes pop-up running data and pop-up material data, and the pop-up running data includes Vue framework configuration information; obtaining target pop-up component data corresponding to the target operation position from the pop-up component data returned by the server; creating an embedded page on the host page, and rendering the target pop-up of the target operation position based on the target pop-up component data through the embedded page.

[0005] The process of rendering a target pop-up window for the target operation position based on the target pop-up component data within the embedded page includes: loading pop-up component package resources containing the Vue framework based on the target pop-up window operation data in the target pop-up component data; obtaining the pop-up component identifier and pop-up component attribute object for the target operation position based on the target pop-up material data in the target pop-up component data; obtaining the target Vue component information corresponding to the pop-up component identifier based on the pop-up component package resources; and generating a target Vue component instance within the embedded page using the target Vue component information and the pop-up component attribute object to obtain the target pop-up window.

[0006] Specifically, based on the target pop-up material data in the target pop-up component data, the pop-up component identifier and pop-up component attribute object of the target operation position are obtained, including: obtaining the pop-up material identifier and the original pop-up material field from the target pop-up material data; obtaining the pop-up component identifier corresponding to the target operation position based on the pop-up material identifier; and calling the material loader corresponding to the pop-up component identifier to map the original pop-up material field to the pop-up component attribute object through the material loader.

[0007] Before creating the embedded page on the host page, the process includes: determining whether the pop-up loading conditions for the target operation position are met; in response to meeting the pop-up loading conditions, executing the creation of the embedded page on the host page and subsequent steps; and in response to not meeting the pop-up loading conditions, not executing the creation of the embedded page on the host page and subsequent steps.

[0008] Before determining whether the target operating position meets the pop-up loading conditions, the process also includes: registering pop-up event listeners for each operating position based on the pop-up component data.

[0009] The process of determining whether the target operation position meets the pop-up loading conditions includes: the target listening results of the pop-up event listener based on the target operation position, the pop-up historical display records of the target operation position, and the pop-up display strategy in the target pop-up component data, to determine whether the pop-up loading conditions are met.

[0010] Specifically, based on the target listening result of the pop-up event listener for the target operating position, the pop-up historical display record of the target operating position, and the pop-up display strategy in the target pop-up component data, it is determined whether the pop-up loading condition is met. This includes: in response to the target listening result not detecting a trigger event, determining whether the number of times the pop-up has been displayed in the pop-up historical display record is less than the limit number of times the pop-up has been displayed in the pop-up display strategy; in response to the number of times the pop-up has been displayed being not less than the limit number of times the pop-up has been displayed, determining that the pop-up loading condition is not met; and in response to the number of times the pop-up has been displayed being less than the limit number of times the pop-up has been displayed, determining that the pop-up loading condition is met.

[0011] The process of creating an embedded page on the host page, rendering the target pop-up window for the target operation position based on the target pop-up window component data through the embedded page, also includes: responding to the user's interaction with the target pop-up window, obtaining the command string corresponding to the interaction; and executing the host callback function corresponding to the command string to complete the business logic corresponding to the host callback function.

[0012] To address the aforementioned technical issues, a second aspect of this application provides a pop-up loading method. This method includes: acquiring pop-up component data; wherein the pop-up component data includes pop-up running data and pop-up material data, and the pop-up running data includes Vue framework configuration information; sending the pop-up component data to the client, so that the client can obtain target pop-up component data corresponding to the target operation position from the pop-up component data returned by the server; and creating an embedded page on the host page, rendering the target pop-up for the target operation position based on the target pop-up component data through the embedded page.

[0013] The process of obtaining pop-up component data includes: responding to a data request from the client and obtaining pop-up material data corresponding to the input parameters in the data request; reading the configuration in the configuration center to obtain the pop-up operation data of all pop-ups included in the host project corresponding to the host page; wherein the input parameters in the data request include the operation position identifier; the pop-up operation data includes the download address of the pop-up component package, and the pop-up component package is a file that can be executed independently; and using the pop-up material data and the pop-up operation data as pop-up component data.

[0014] Before obtaining the pop-up component data, the process includes: obtaining the user identifier of the currently logged-in client user; if the user identifier belongs to the pop-up loading group and the obtained pop-up material data is not empty, the client executes the pop-up component data returned from the server to obtain the target pop-up component data corresponding to the target operation position and subsequent steps; if the user identifier does not belong to the pop-up loading group and the obtained pop-up material data is empty, the client does not execute the pop-up component data returned from the server to obtain the target pop-up component data corresponding to the target operation position and subsequent steps.

[0015] The pop-up loading method also includes: responding to a configuration change command, updating the configuration in the configuration center to obtain the updated pop-up running data, and returning the pop-up material data and the updated pop-up running data to the client so that the client can render the target pop-up using the updated pop-up running data and pop-up material data in the embedded page created by the host page.

[0016] To address the aforementioned technical problems, a third aspect of this application provides an electronic device comprising a memory and a processor. The memory stores program instructions, and the processor executes the program instructions to implement the methods provided in the first or second aspect.

[0017] To address the aforementioned technical problems, a fourth aspect of this application provides a computer-readable storage medium storing program instructions that can be executed by a processor to implement the methods provided in the first or second aspect.

[0018] The beneficial effects of this application are as follows: Unlike existing technologies, the pop-up runtime data returned by the server in this application includes Vue framework configuration information, enabling the pop-up component to have an independent runtime environment. The target pop-up component data corresponding to the target operational position is obtained from the pop-up runtime data. An embedded page is created on the host page, and the target pop-up for the target operational position is rendered through the embedded page based on the target pop-up component data. Rendering the pop-up on the embedded page completely decouples the loading and rendering of the pop-up from the host business code, allowing operations personnel to modify the pop-up without the involvement of development personnel, facilitating rapid updates of the pop-up content. Attached Figure Description

[0019] To more clearly illustrate the technical solutions in this application, the accompanying drawings required in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort. Among them: Figure 1 This is a flowchart illustrating one implementation of the pop-up loading method provided in this application; Figure 2 This is a flowchart illustrating another implementation of the pop-up loading method provided in this application; Figure 3 This is a flowchart illustrating another implementation of the pop-up loading method provided in this application; Figure 4 This is a schematic diagram of the framework structure of one embodiment of the electronic device provided in this application; Figure 5 This is a schematic diagram of the framework structure of an embodiment of the computer-readable storage medium provided in this application. Detailed Implementation

[0020] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those of ordinary skill in the art without creative effort are within the scope of protection of this application.

[0021] It should be noted that the embodiments of this application contain descriptions involving "first," "second," etc., which are for descriptive purposes only and should not be construed as indicating or implying their relative importance or implicitly specifying the number of technical features indicated. Therefore, a feature defined with "first" or "second" may explicitly or implicitly include at least one of that feature.

[0022] In the description of this application, "multiple" means at least two, such as two, three, etc., unless otherwise explicitly specified. All directional indications (such as up, down, left, right, front, back, etc.) in the embodiments of this application are only used to explain the relative positional relationships and movement of the components in a specific posture (as shown in the figures). If the specific posture changes, the directional indication will also change accordingly. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion. For example, a process, method, system, product, or device 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 these processes, methods, products, or devices.

[0023] In this document, the term "embodiment" means that a particular feature, structure, or characteristic described in connection with an embodiment may be included in at least one embodiment of the invention. The appearance of this phrase in various places throughout the specification does not necessarily refer to the same embodiment, nor is it a separate or alternative embodiment mutually exclusive with other embodiments. It will be explicitly and implicitly understood by those skilled in the art that the embodiments described herein can be combined with other embodiments.

[0024] In this document, the term "and / or" is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A existing alone, A and B existing simultaneously, and B existing alone. Additionally, the character " / " generally indicates that the preceding and following related objects have an "or" relationship. Furthermore, "many" in this document means two or more. Moreover, the term "at least one" in this document means any combination of at least two of any one or more of a plurality of objects. For example, including at least one of A, B, and C can mean including any one or more elements selected from the set consisting of A, B, and C.

[0025] This application provides the following embodiments, and each embodiment is described in detail below.

[0026] Please see Figure 1 , Figure 1 This is a flowchart illustrating one embodiment of the pop-up loading method provided in this application. The method includes: S11: Enter the host page.

[0027] This embodiment is executed by the client, where users can perform operations (such as clicking). In response to these operations, the client navigates to the host page. The host page is used for displaying pop-up windows.

[0028] S12: Request pop-up component data from the server based on the operational configuration information of the host page and the host project corresponding to the host page.

[0029] In one implementation, the operational slot configuration information includes an array of operational slot identifiers, which contains multiple operational slot identifiers (i.e., operational slot IDs). Each operational slot identifier uniquely corresponds to a predefined logical slot on the host page used for displaying pop-up content. The operational slot configuration information of the host page is pre-created by the operational configuration system.

[0030] The host project corresponding to the host page is, for example, the business web project that runs the host page. For instance, the account opening page corresponds to the account opening project, and the deposit page corresponds to the deposit project. Different host projects can independently manage their own component versions.

[0031] The pop-up component data includes pop-up runtime data and pop-up asset data. Specifically, the pop-up runtime data includes Vue framework configuration information, specifically the pop-up display strategy and triggering strategy, as well as the pop-up component package required for rendering the pop-up component. This pop-up component package includes the Vue framework's runtime code, UI component library, and implementation code for different pop-up component types. For example, the pop-up component package can be an independently executable, self-contained file containing the necessary framework code, thus independent of the host page's technology stack or global variables; furthermore, the pop-up component package can be a standalone JS file.

[0032] In one embodiment, the pop-up component package can be sent from the server to the client as pop-up runtime data via the target CDN address. The client can remotely download and obtain the pop-up component package required for rendering the pop-up component through the target CDN address.

[0033] Pop-up material data comprises the specific content that constitutes the visual presentation and business logic of the pop-up. It includes the original pop-up material and the pop-up material identifier. The original pop-up material includes the pop-up content text, image URLs (Uniform Resource Locators), etc. The pop-up material identifier is used to identify the material type of the original pop-up material, which may include the pop-up material type number. The pop-up material type number is a numerical identifier defined by the Operations Configuration System (OPT), such as type=8 representing text and image materials, type=9 representing plain text materials, type=10 representing questionnaire materials, etc. This number is the business semantics on the operations side, not the name of the front-end component.

[0034] Specifically, the client can send a data request to the server based on the operational configuration information of the host page and the corresponding host project. After receiving the data request, the server can obtain the pop-up material data corresponding to the operational configuration information from the operational configuration system on the operational side, and obtain the pop-up operation data corresponding to the host project from the configuration center on the technical side. By decoupling the pop-up material data related to operations, the pop-up operation data related to the technical implementation of pop-up components, and the host page, when it is necessary to increase or decrease the number of pop-ups or modify the pop-up content, the pop-up material data on the operational side of the server can be directly modified, or when it is necessary to add pop-up component types, the pop-up operation data on the technical implementation side of the server can be directly modified, without modifying the business code of the host page, which greatly improves the efficiency and reusability of pop-up iterative development.

[0035] In one implementation, the pop-up component data returned by the server includes the pop-up component data of all pop-up components contained in the host project corresponding to the host page. For example, if the host project contains 10 pop-ups, the returned pop-up component data includes the material data of the 10 pop-ups and the pop-up operation data that the 10 pop-ups depend on. After receiving the pop-up component data returned by the server, the client can directly extract the target pop-up component data from the pop-up component data. The target pop-up component data may be a portion of the pop-up component data.

[0036] In another implementation, the pop-up component data returned by the server only includes the pop-up component data of the target operation position, which is a logical slot in the host page where a pop-up can be deployed. In this case, the pop-up component data returned by the server can be directly used as the target pop-up component data.

[0037] Understandably, in one implementation, the client can send a data request to the server based on the operational slot configuration information of the host page and the host project corresponding to the host page. The data request includes the IDs of each operational slot in the host page. The pop-up component data returned by the server includes the pop-up running data corresponding to the host project of the host page and the pop-up material data of each operational slot. The pop-up running data includes the target CDN address, which provides the remote download address for the pop-up component package. The pop-up component package can be downloaded through the target CDN address. This package contains the implementation code of different pop-up component types for the host project, the Vue framework runtime code, and the UI component library. One host project corresponds to one pop-up component package, containing implementation code for multiple pop-up component types.

[0038] S13: Obtain the target pop-up component data corresponding to the target operation position from the pop-up component data returned by the server.

[0039] The target operation position can refer to the operation position where the corresponding pop-up component has been triggered.

[0040] In one implementation, the pop-up component data returned by the server includes pop-up material data and pop-up operation data for each operational position. After obtaining the pop-up component data, the pop-up material data and pop-up operation data for each operational position can be stored using the operational position ID as an index. After receiving a trigger operation for the pop-up component corresponding to the target operational position through the host page, the operational position ID of the target operational position can be determined. Based on the target operational position ID, the target pop-up component data corresponding to the target operational position can be retrieved. The target pop-up component data includes target pop-up operation data and target pop-up material data. The target pop-up operation data includes Vue framework configuration information.

[0041] S14: Create an embedded page on the host page, and render the target pop-up window of the target operation position based on the target pop-up window component data through the embedded page.

[0042] Here, an embedded page refers to a subpage within the host page used for rendering and hosting the pop-up component. In one implementation, a... <iframe>insert the element into the target position of the DOM (Document Object Model) of the host page to implement the creation of the embedded page, and initialize the Vue framework based on the target pop-up component data in the <iframe> element and render the pop-up component of the target operation position to obtain the target pop-up, so as to indirectly display the pop-up content through the embedded page.

[0043] In one embodiment, the pop-up component package can be sent as pop-up operation data from the server to the client in the form of a target CDN address. Therefore, before creating the <iframe> element, a <script> tag can be dynamically created first, and the target CDN address of the pop-up component package in the pop-up operation data is written into the <script> tag, so that the client can load the pop-up component package resources through the target CDN address, and then create the <iframe> element and insert it into the target position of the DOM (Document Object Model), and initialize the Vue framework based on the pop-up component package resources in the <iframe> element and render the pop-up component, so as to implement the creation of the embedded page and render the pop-up component in the embedded page.

[0044] In one embodiment, the step of rendering the target pop-up at the target operation position through the embedded page based on the target pop-up component data comprises: first loading the pop-up component package resources including the Vue framework based on the target pop-up operation data in the target pop-up component data, then acquiring the pop-up component identifier and the pop-up component attribute object of the target operation position according to the target pop-up material data in the target pop-up component data; acquiring target Vue component information from the pop-up component package resources according to the pop-up component identifier of the target operation position; finally, in the embedded page, generating a target Vue component instance through the target Vue component information and the pop-up component attribute object to obtain the target pop-up.

[0045] Wherein, the pop-up component package resources may include the runtime code of the Vue framework, a UI component library, and pop-up component implementation codes for different pop-up component types.

[0046] The pop-up component identifier of the target operation position is used to identify the pop-up component type of the corresponding pop-up component corresponding to the operation position, which can be specifically determined according to the material type corresponding to the target pop-up material data; for example, if the target pop-up material data is plain text material, it can be determined that the pop-up component identifier is the pop-up component identifier of the plain text pop-up component type.

[0047] The target Vue component information includes the pop-up component implementation code that is parsed from the pop-up component package resources and corresponds to the pop-up component type indicated by the pop-up component identifier of the target operation position.

[0048] The pop-up component attribute object refers to the parameter data required by the pop-up component. Specifically, the target pop-up material data can be converted and mapped into a data object that conforms to the parameter data format structure used by the pop-up component implementation code, according to the data format structure of the parameters defined in the pop-up component implementation code.

[0049] After obtaining the target pop-up component data corresponding to the target operation position, the pop-up component identifier of the pop-up component corresponding to the target operation position can be determined from the target pop-up material data in the target pop-up component data. The corresponding target Vue component information can be obtained from the pop-up component package resources. When creating a target Vue component instance based on the target Vue component information, the pop-up component attribute object generated according to the target pop-up material data will be passed in to obtain the target pop-up.

[0050] In one embodiment, the pop-up component name and pop-up component attribute object of the target operation position are obtained according to the target pop-up material data in the target pop-up component data, including: obtaining the pop-up material identifier and the original pop-up material field from the target pop-up material data; obtaining the pop-up component identifier corresponding to the target operation position based on the pop-up material identifier; calling the material loader corresponding to the pop-up component identifier, and mapping the original pop-up material field to the pop-up component attribute object through the material loader.

[0051] The pop-up material data in the pop-up component data includes the pop-up material identifier and the original pop-up material field. Specifically, the pop-up material identifier can be converted into the technical identifier of the specific pop-up component within the pop-up component package resource through an extended mapping layer.

[0052] In one embodiment, the pop-up component identifier corresponding to the target operation position can be obtained based on the pop-up material identifier through a pre-registered component matching function.

[0053] Specifically, the pop-up material identifier is obtained from the target pop-up material data returned by the server; the component identifier associated with the component matching function that matches the pop-up material identifier is obtained, and the target component identifier is obtained. The target component identifier is the pop-up component identifier corresponding to the target operation position.

[0054] After determining the pop-up component identifier corresponding to the target operation position, the material loader corresponding to the pop-up component identifier (i.e. the target component identifier) ​​can be used to map the original pop-up material field in the target pop-up material data to the target format to obtain the pop-up component attribute object.

[0055] In one embodiment, the material loader can be implemented using a format conversion function, that is, the original pop-up material field can be mapped to the pop-up component attribute object through a pre-registered format conversion function.

[0056] Specifically, after obtaining the pop-up component identifier corresponding to the target operation position, the client can locate the format conversion function bound to the pop-up component identifier, execute the format conversion function to rename the original pop-up material field, restructure or convert the type, thereby generating pop-up material data that conforms to the specifications of the pop-up component implementation code.

[0057] Subsequently, the target Vue component information corresponding to the pop-up component identifier can be obtained from the pop-up component package resource according to the pop-up component identifier (i.e., the target component identifier).

[0058] It is understood that the pop-up material identifier is specifically the business semantic number of the pop-up content of different material types displayed in the pop-up component by the server-side operation side, and the pop-up component identifier is specifically the technical identifier of the pop-up component of different component types by the server-side technical implementation side. By mapping the business semantic number (i.e., the pop-up material identifier) ​​of the operation side to match the technical identifier (i.e., the pop-up component identifier) ​​of the specific pop-up component inside the front-end component package, it is possible to render and generate the target pop-up based on the target Vue component information of the target pop-up material data and the type matching in the pop-up running data. It is also possible to decouple the target pop-up material data from the target pop-up running data. When it is necessary to increase or decrease the number of pop-ups or modify the pop-up content, the pop-up material data of the server-side operation side can be directly modified without re-developing and programming the implementation code of the pop-up component, thereby improving the reusability of the pop-up component.

[0059] In one specific embodiment, the component matching function includes, but is not limited to, the finders function, and the format conversion function includes, but is not limited to, the loaders function. Based on the pop-up material identifier, the client sequentially traverses each finders function, passing the pop-up material identifier to the finders function. Each finders function checks whether the pop-up material identifier matches the component it is responsible for. For example, after finders function A obtains the pop-up material identifier type, if it determines that type=8, it can return the pop-up component identifier PicDialog. Similarly, after finders function B obtains the pop-up material identifier type, if it determines that type=9, it can return the pop-up component identifier TextDialog.

[0060] After determining the pop-up component identifier, the client can determine the execution of the corresponding loader function based on the pop-up component identifier, and map the original pop-up material fields in the target pop-up material data to the props format. For example, the original pop-up material fields such as image_url, title, and button_text in the target pop-up material data are assembled into the props object of the pop-up component PicDialog to obtain the pop-up component attribute object.

[0061] Both the component matching function and the format conversion function adopt a registration mechanism. When adding a new pop-up component type, only the new component matching function and format conversion function need to be registered. There is no need to modify the core logic of the client or the corresponding host page, which decouples the configuration format of the pop-up component content material (i.e., pop-up material data) from the pop-up component implementation code (i.e., pop-up running data). By setting a pop-up material identifier, operators only need to maintain the business semantic number without worrying about the specific component technical name, which helps to reduce the complexity of operation configuration. When it is necessary to increase or decrease the number of pop-ups or modify the pop-up content, the pop-up material data on the server-side operation side can be directly modified without re-developing and programming the implementation code of the pop-up component, thereby improving the reusability of the pop-up component.

[0062] It is understood that in other embodiments, functions may not be used. For example, the target component identifier can be determined by pre-setting the correspondence between the pop-up material identifier and the component identifier.

[0063] After obtaining the pop-up component attribute object, the pop-up component attribute object can be passed to the embedded page so that a target Vue component instance can be generated in the embedded page using the target Vue component information and the pop-up component attribute object. Specifically, the pop-up component attribute object and the host callback command registry can be sent to the component in the iframe via postMessage, and the target Vue component instance can be generated in the iframe using the target Vue component information and the pop-up component attribute object to obtain the target pop-up. Furthermore, the pop-up component attribute object can also be sent to the component in the iframe via broadcast.

[0064] The host callback command registry is used to indicate the correspondence between the instructions issued in the embedded page and the business logic executed by the host page. That is, the host page is automatically triggered to execute the corresponding business logic based on the instructions issued by operating the pop-up component in the embedded page.

[0065] In the foregoing embodiment, the pop-up operation data returned by the server includes Vue framework configuration information, so that the pop-up component has an independent operating environment. The target pop-up component data corresponding to the target operation position is obtained from the pop-up operation data, an embedded page is created on the host page, and the target pop-up at the target operation position is rendered based on the target pop-up component data through the embedded page. Rendering the pop-up on the embedded page completely decouples the loading and rendering of the pop-up from the host service code, so that operations personnel do not need research and development participation when modifying the pop-up, which facilitates rapid update of pop-up content.

[0066] Please refer to Figure 2. Figure 2 is a schematic flowchart of another embodiment of the pop-up loading method provided by the present application. The method includes: S21: Enter the host page.

[0067] S22: Request pop-up component data from the server according to the operation position configuration information of the host page and the host project corresponding to the host page.

[0068] S23: Obtain target pop-up component data corresponding to the target operation position from the pop-up component data returned by the server.

[0069] S24: Determine whether the pop-up loading condition of the target operation position is satisfied.

[0070] Specifically, within the host page, the trigger operation for the pop-up component corresponding to the target operation position performed by the user within the host page can be monitored through the pop-up event listener of the target operation position. If the trigger operation is monitored, it can be determined that the pop-up loading condition is satisfied, so as to trigger the subsequent steps of creating an embedded page on the host page, and rendering the target pop-up at the target operation position based on the target pop-up component data through the embedded page. Wherein, the pop-up event listener can be registered based on the pop-up triggering strategy in the pop-up operation data of the pop-up component data after the pop-up component data is received.

[0071] Furthermore, the pop-up operation data may include the pop-up display strategy of the pop-up component. In one embodiment, it can be determined whether the target operation position meets the pop-up loading conditions based on the target listening result of the pop-up event listener of the target operation position, the pop-up historical display record of the target operation position, and the pop-up display strategy in the target pop-up component data.

[0072] The pop-up event listener for the target operating position is selected from the pop-up event listeners of each operating position based on the target operating position ID. The pop-up event listeners for each operating position can be registered based on the pop-up component data before step S24. Specifically, the event listeners can be registered based on the pop-up triggering strategy in the pop-up running data.

[0073] Pop-up triggering strategies include, but are not limited to, back, back-once, back-for-stay, and close. back means that when the back button is clicked, the basic "return to the previous page" logic is executed. If the homepage is already on or it is impossible to return, it may trigger an exit or other fallback behavior. back-once usually means "intercept only once", that is, when the back button is clicked for the first time, a specific action (such as displaying a pop-up) is executed. When it is clicked again, the default return behavior is restored or the user is truly exited. back-for-stay means that when the back button is clicked, the page is not closed, but a "browse some more" prompt is displayed or a silent background loading is triggered, so that the user stays on the current page. close means that the current WebView or pop-up container is closed directly, which may be accompanied by the logic of closing the current activity page and returning to the host App.

[0074] Pop-up display strategies include, but are not limited to, once and always. once means to display once, that is, to limit the number of times to display to 1; always means to display continuously, that is, to limit the number of times to display to an unlimited number.

[0075] In one specific embodiment, it can be first determined whether the target listening result is that a trigger event has been detected. If the target listening result is that a trigger event has been detected, it is determined whether the number of times the pop-up has been displayed in the pop-up history display record is less than the limit number of times it can be displayed in the pop-up display strategy. If the number of times it has been displayed is not less than the limit number of times it can be determined that the pop-up loading condition is not met. If the number of times it has been displayed is less than the limit number of times it can be determined that the pop-up loading condition is met. If the target listening result is that no trigger event has been detected, it is determined that the pop-up loading condition is not met.

[0076] In other embodiments, the step of determining whether the number of times the pop-up has been displayed in the pop-up history display record is less than the number of times the pop-up display strategy is limited can also occur before the step of determining whether the target listening result is a triggered event. Only when a triggered event is listened to and the number of times the pop-up has been displayed is less than the number of times the pop-up has been displayed is it determined that the pop-up loading condition is met.

[0077] In one specific embodiment, the business code calls fly.pick("pos-id-1").autoTrigger(), and the SDK reads the pop-up trigger strategy field (trigger field) in the target pop-up component data of the target operating position, and registers the corresponding system-level trigger event listener accordingly (e.g., registering Android back button / browser popstate event listener when trigger=back, registering page close event listener when trigger=close). After the trigger condition is met, the SDK queries the browser's local storage (localStorage) for the historical display records of the pop-up of the target operating position based on the target operating position ID. The historical display records display the timestamp of the historical display of the pop-up. Combined with the pop-up display strategy field in the target pop-up component data, frequency control is checked. If the pop-up display strategy is once and has been displayed, it is skipped and not loaded; if the pop-up display strategy is always or has never been displayed, the loading process continues.

[0078] S25: In response to the pop-up loading condition being met, an embedded page is created on the host page, and the target pop-up of the target operation position is rendered through the embedded page based on the target pop-up component data.

[0079] For the specific implementation of steps S21-S23 and S25, please refer to the foregoing description, which will not be repeated here.

[0080] In this embodiment, by determining whether the pop-up loading conditions are met, the system can load resources and create pages only when specific triggering scenarios are met and frequency limits are satisfied, thereby avoiding unnecessary network requests and DOM operations and reducing the performance overhead of the host page. By not executing subsequent steps when the conditions are not met, the pop-up display logic becomes more intelligent and controllable, which is beneficial to improving user experience and preventing pop-ups from excessively disturbing users. By combining pop-up triggering strategies and pop-up display strategies for comprehensive judgment, the timing and frequency of pop-up display can be flexibly configured, thereby meeting the refined delivery needs under different operational scenarios.

[0081] In one embodiment, requesting pop-up component data from the server based on the operation position configuration information of the host page and the host item corresponding to the host page specifically includes: in response to the trigger operation of entering the host page, during the loading process of the host page, a preset initialization function can be called to obtain the operation position configuration information of the host page and the host item corresponding to the host page through the initialization function, and send a data request to the server; wherein, the input parameter of the initialization function is the operation position configuration information obtained from the operation configuration system, the operation position configuration information includes an operation position identifier array, and the initialized client initiates an interface request to the server to obtain the pop-up component data returned by the server.

[0082] The above initialization process is a key step in pop-up loading, aiming to establish a communication bridge and data mapping relationship between the host page and the backend service. Specifically, when the user triggers the opening command of the host page, the page loading process automatically executes the preset initialization function createEasyFly({ positions: ["pos-id-1", ...]}), where the positions parameter is an array of operation position identifiers pre-created in the operation configuration system. The core function of this function is to pass the array of operation position identifiers defined in the operation configuration system as a parameter. Each operation position identifier in the operation position identifier array, such as pos-id-1, logically corresponds uniquely to a pre-defined logical slot in the host page. This slot is used for a specific area or trigger scenario for placing the pop-up component, such as the retention position on the account opening completion page or the questionnaire position on the deposit guidance page.

[0083] This method clarifies which page locations need to listen for pop-up trigger conditions. After the initialization function is executed, the client completes the construction of its internal state, including establishing an index structure with the operation identifier as the key, so that the configuration related to the pop-up component can be quickly retrieved based on the identifier later.

[0084] Subsequently, the client, having completed initialization, proactively initiates a data request to the server. The purpose of this data request is to obtain the aggregated pop-up component data from the server. Upon receiving the data request, the server will perform configuration aggregation operations in parallel, including obtaining pop-up material data from the operation configuration system, and reading the target CDN address, pop-up triggering strategy, and pop-up display strategy of the corresponding host project's pop-up component package resources from the configuration center, and merging these data into a unified data structure (i.e., pop-up component data) and returning it.

[0085] After receiving the response, the client completes the entire process from initialization to obtaining the relevant configuration of the pop-up component.For example, the client can configure its initialization function to receive an array containing multiple string identifiers, such as ["pos-id-1", "pos-id-2"], where each identifier corresponds to a different operational business node in the host page. Upon receiving this array, the client iterates through each identifier and establishes a mapping between that identifier and the server-side configuration data in memory. When the server returns data, the client distributes the configuration data to the corresponding operational business node based on this mapping, waiting for the appropriate trigger event (such as page closing or user click). This design allows the host page to automatically complete all initialization work, from operational position discovery to the configuration cache of the corresponding pop-up component, as well as subsequent embedded page construction and pop-up rendering operations, simply by providing the operational position identifier corresponding to the operational business node. No specific pop-up loading logic needs to be involved in the host page's business code.

[0086] In one embodiment, after creating an embedded page on the host page and rendering the target pop-up window of the target operation position based on the target pop-up window component data through the embedded page, the pop-up window loading method further includes: responding to the user's interactive operation on the target pop-up window, obtaining the command string corresponding to the interactive operation, executing the host callback function corresponding to the command string to complete the business logic corresponding to the host callback function, and destroying the embedded page, updating the number of times the pop-up window of the target operation position has been displayed, and unlocking the return behavior lock, etc. The business logic includes, but is not limited to, route redirection, data tracking reporting, data submission, and closing the pop-up window, etc.

[0087] Specifically, when a user interacts with a pop-up window within an embedded page (such as clicking a close button, confirming, or canceling an operation), the pop-up component captures the operation event of this interaction and encapsulates it into a standard command string, such as an object containing a specific instruction identifier, and sends it to the window environment where the host page resides via the postMessage mechanism. The host page pre-registers a host callback command registry, which associates specific command strings with host callback functions defined in the host environment. Upon receiving a command string, its content is parsed, and the corresponding host callback function is searched in the host callback command registry. Once found, the host callback function is executed, thereby completing business logic such as data tracking and route redirection. This solves the technical problem that functions cannot be directly serialized and transmitted in cross-iframe communication, and achieves decoupling between the host page and the pop-up component.

[0088] By responding to the command string generated by the interactive operation and executing the corresponding host callback function, the host page can respond to the pop-up interactive event in a decoupled manner, realizing the separation of business logic and pop-up component, which is conducive to flexibly expanding the host business behavior without modifying the pop-up component code.

[0089] Subsequently, the client may perform a resource cleanup operation, which specifically includes removing the embedded page (i.e., the iframe element) from the DOM tree of the host page, releasing the memory resources and network connections occupied thereby, so as to prevent memory leakage.

[0090] Finally, the client updates the pop-up display record of the target operation position in the local storage medium, and the specific operation is to increase the number of displayed times or update the last display timestamp, so as to determine whether to display the pop-up again according to the display strategy in subsequent trigger detection.

[0091] For example, the command string may be defined as a JSON format string, which includes a cmd field to identify the operation type, and the host callback function may be a function that sends buried point data to a statistics server.

[0092] Wherein, the local storage medium may be localStorage of the browser. In other implementation modes, the pop-up display record of the target operation position may also be uniformly managed by IndexedDB (a large-capacity local database of the browser) or Service Worker (a resident background script of the browser).

[0093] By destroying the embedded page, the client system can timely release the memory and network resources occupied by the embedded page, which is beneficial to reducing the memory occupation of the host page, and improving the fluency and stability of application operation. By updating the number of displayed times of the pop-up at the target operation position, the system can accurately record the display state of the pop-up, which is beneficial to realizing accurate display control in cooperation with the pop-up display strategy, avoiding interference to users caused by repeated display, and improving user experience.

[0094] Please refer toFigure 3, Figure 3 is a schematic flow chart of another embodiment of the pop-up loading method provided by the present application, the method comprises: S31: acquiring pop-up component data.

[0095] Wherein, the pop-up component data comprises pop-up operation data and pop-up material data, and the pop-up operation data comprises Vue framework configuration information.

[0096] S32: Send the pop-up component data to the client so that the client can obtain the target pop-up component data corresponding to the target operation position from the pop-up component data returned by the server; and create an embedded page on the host page, and render the target pop-up of the target operation position based on the target pop-up component data through the embedded page.

[0097] This implementation is executed by the server. The server responds to the client's data request, obtains pop-up running data and pop-up material data including Vue framework configuration information, and integrates the two and sends them to the client. This makes the pop-up component self-contained, without requiring the host project to install specific component dependencies or rebuild and release, thus achieving complete decoupling between business code and pop-up implementation.

[0098] Specifically, in response to a data request from the client, pop-up material data corresponding to the input parameters in the data request is obtained; and the configuration in the configuration center is read to obtain the pop-up operation data of all pop-up components included in the host project corresponding to the host page; wherein, the input parameters in the data request include an operation position identifier; the pop-up operation data includes the download address of the pop-up component package, and the pop-up component package is a file that can be executed independently. In addition to including the download address of the pop-up component package of all pop-ups, the pop-up operation data of all pop-ups also includes the pop-up triggering strategy and the pop-up display strategy of the pop-up corresponding to the operation position identifier in the input parameters. The pop-up corresponding to the operation position identifier in the input parameters can be a part of all pop-ups included in the host project. The pop-up material data and the pop-up operation data are used as pop-up component data.

[0099] In one embodiment, the pop-up material data includes the pop-up content text, image URL, and pop-up material type number, etc. The configuration center stores the Fly configuration configured in TOML format or a similar hierarchical structure, which includes the pop-up operation data of all pop-ups associated with the host project corresponding to the host page. The pop-up operation data specifically includes the download address of the pop-up component package, the pop-up trigger strategy, and the pop-up display strategy. The pop-up component package is a self-contained file that can be executed independently. It not only contains the implementation code of the pop-up component, but also the runtime code of the Vue framework and UI component library dependencies, so no global dependencies need to be provided by the host. The pop-up trigger strategy specifies the triggering method of the pop-up, such as back button trigger, page close trigger, etc.; the pop-up display strategy controls the display frequency of the pop-up, such as displaying it only once or always displaying it. Understandably, in other embodiments, the configuration center may also use JSON format to store the data.

[0100] In one embodiment, before obtaining the pop-up component data, the server further includes: obtaining the user identifier of the currently logged-in client user; in response to the user identifier belonging to the pop-up loading group and the obtained pop-up material data not being empty, the client executes the pop-up component data returned from the server to obtain the target pop-up component data corresponding to the target operation position and subsequent steps; in response to the user identifier not belonging to the pop-up loading group and the obtained pop-up material data being empty, the client does not execute the pop-up component data returned from the server to obtain the target pop-up component data corresponding to the target operation position and subsequent steps.

[0101] In this embodiment, the server can also verify the user's identity. The user identifier can be the user's unique ID, device fingerprint, or a token generated by combining other features. It is determined whether the user identifier belongs to a preset pop-up loading group. The pop-up loading group is a user group predefined by the server or configuration center to control which users have the right to view or load pop-up content. This can be understood as the pop-up loading group corresponding to the experimental group in an A / B experiment or a whitelist user group. If the user identifier belongs to the pop-up loading group, the pop-up material data returned by the server should be non-empty (i.e., it contains specific pop-up content, image URLs, text, and other valid data), and the client continues to obtain the target pop-up component data and render it. If the user identifier does not belong to the pop-up loading group, the returned pop-up material data is empty, and the client skips the loading step directly, without executing the steps of obtaining the target pop-up component data and its subsequent rendering. It can be understood that the judgment logic for the pop-up loading group can also be combined with user tags, regional information, or multi-dimensional profiles for comprehensive judgment.

[0102] By obtaining user identifiers and determining whether they belong to the pop-up loading group, the system can achieve refined user diversion control, which is conducive to displaying pop-up content in a differentiated manner for different user groups and supports A / B experiments or gray release scenarios.

[0103] In one embodiment, the pop-up window can also be updated, that is, the pop-up window loading method can also include: in response to the configuration change instruction, updating the configuration in the configuration center to obtain the updated pop-up window running data, and returning the pop-up window material data and the updated pop-up window running data to the client so that the client can render the target pop-up window in the embedded page created by the host page using the updated pop-up window running data and the pop-up window material data.

[0104] The above steps involve a dynamic hot update mechanism for the pop-up component version and running parameters. The configuration change instruction is used to instruct the update of the configuration stored in the configuration center, which includes running data such as the download address of the pop-up component package corresponding to the host project, the pop-up triggering strategy, and the pop-up display strategy.The updated pop-up runtime data refers to the data set after the configuration center receives the configuration change instruction, replacing the old component package download address with the new component package download address, or adjusting other runtime parameters.

[0105] Understandably, configuration change commands can be manually triggered by operations and maintenance personnel in the configuration center backend, or automatically triggered by automated scripts according to the version release process. The configuration center uses a hierarchical merging strategy based on key paths to store configurations, ensuring that component version updates for a specific host project do not affect the configurations of other projects. After receiving the updated pop-up component data, the client loads the new component package using the updated pop-up runtime data within the embedded page created on the host page, i.e., within the iframe container, and renders it in conjunction with the pop-up material data.

[0106] Alternatively, the embedded page can also be implemented through Web Component or other isolation container technologies, as long as the isolation of styles and scripts can be achieved.

[0107] By updating the configuration in the configuration center to obtain the updated pop-up running data, the system can dynamically adjust the version and running parameters of the pop-up component without rebuilding and republishing the host project code, thus realizing rapid iteration and hot update of the pop-up content.

[0108] In one specific embodiment, the pop-up loading method includes: after the client enters the host page, it requests pop-up component data from the server based on the operation position configuration information of the host page and the host project corresponding to the host page. Specifically, when the user opens the host page, the initialization function is automatically called during the page loading stage of the host page to initialize the client SDK and automatically initiate an interface request, which includes the operation position ID.

[0109] In response to the interface request, the server obtains the pop-up material data corresponding to each operation position ID from the operation configuration system, reads the download address of the pop-up component package of all pop-ups contained in the host project corresponding to the host page, the pop-up triggering strategy corresponding to each operation position ID, and the pop-up display strategy corresponding to each operation position ID from the configuration center, and returns the obtained pop-up material data, pop-up component package download address, pop-up triggering strategy and pop-up display strategy as pop-up component data in the same interface response.

[0110] For the target operation position in the host page, the client acquires target pop-up component data of the target operation position from pop-up component data, reads a pop-up triggering strategy in the target pop-up component data, and registers a corresponding pop-up event listener; in response to the pop-up event listener corresponding to the target operation position listening to a triggering event, the client determines whether the number of displayed times in the pop-up historical display record is less than the limited number of display times of the pop-up display strategy in the target pop-up component data, if not less than, the loading process is ended; if less, a pop-up material identifier is acquired from target pop-up material data in the target pop-up component data; a pop-up component identifier corresponding to the target operation position is acquired based on the pop-up material identifier; a material loader corresponding to the pop-up component identifier is called, the target pop-up material data is mapped into a pop-up component attribute object through the material loader, target Vue component information corresponding to the pop-up component identifier is acquired from pop-up component package resources, an embedded page is created, a target Vue component instance is generated through the target Vue component information and the pop-up component attribute object in the embedded page, and the target pop-up is obtained.

[0111] After a user performs an interactive operation based on the target pop-up, in response to the interactive operation, the target Vue component instance sends a command string corresponding to the interactive operation to the client, and the client executes a host callback function corresponding to the command string to complete the service logic corresponding to the host callback function.

[0112] It can be understood that, in the specific implementation of the above method, the writing order of each step does not mean a strict execution order that imposes any limitation on the implementation process, and the specific execution order of each step should be determined according to its functions and possible internal logic.

[0113] Please refer toFigure 4, Figure 4 is a schematic diagram of the framework structure of an implementation of the electronic device provided by the present application.

[0114] The electronic device 40 comprises a memory 41 and a processor 42, the memory 41 and the processor 42 are coupled to each other, program instructions are stored in the memory 41, and the processor 42 is configured to execute the program instructions stored in the memory 41, so as to implement the steps of any one of the above method embodiments.In a specific implementation scenario, the electronic device 40 may include, but is not limited to: a microcomputer and a server. In addition, the electronic device 40 may also include mobile devices such as a notebook computer and a tablet computer, which is not limited herein.

[0115] Specifically, the processor 42 is configured to control itself and the memory 41 to implement the steps in any of the foregoing method embodiments. The processor 42 may also be referred to as CPU (Central Processing Unit). The processor 42 may be an integrated circuit chip having a signal processing capability. The processor 42 may also be a general-purpose processor, a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field-Programmable Gate Array (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, and discrete hardware components. The general-purpose processor may be a microprocessor, or the processor may also be any conventional processor or the like. In addition, the processor 42 may be implemented collectively by integrated circuit chips.

[0116] Please refer toFigure 5, Figure 5 is a schematic diagram of the frame structure of an embodiment of the computer-readable storage medium provided by the present application.

[0117] The computer-readable storage medium 50 stores program instructions 501 that can be executed by a processor, and the program instructions 501 are used to implement the steps in any of the foregoing method embodiments.

[0118] The storage medium described herein includes: various media capable of storing program codes, such as a USB flash drive, a mobile hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk, or an optical disk.

[0119] The embodiments of the present application also provide a computer program product, which includes a computer program, and when the computer program is executed by a processor, can implement the steps described in any of the foregoing method embodiments.Specifically, the computer program product can be a software or program product containing a computer program that can run on a computing device or be stored on any available medium.

[0120] The above description is only an embodiment of this application and does not limit the patent scope of this application. Any equivalent structural or procedural transformations made using the contents of this application specification and drawings, or direct or indirect applications in other related technical fields, are similarly included within the patent protection scope of this application.< / iframe>

Claims

1. A pop-up window loading method, characterized in that, include: Enter the host page; Based on the operational configuration information of the host page and the host project corresponding to the host page, request pop-up component data from the server; wherein, the pop-up component data includes pop-up running data and pop-up material data, and the pop-up running data includes Vue framework configuration information; Obtain the target pop-up component data corresponding to the target operation position from the pop-up component data returned by the server; An embedded page is created on the host page, and the target pop-up window of the target operation position is rendered through the embedded page based on the target pop-up window component data.

2. The method according to claim 1, characterized in that, The step of rendering the target pop-up window for the target operational position based on the target pop-up window component data through the embedded page includes: Based on the target pop-up running data in the target pop-up component data, load the pop-up component package resources containing the Vue framework; Based on the target pop-up material data in the target pop-up component data, obtain the pop-up component identifier and pop-up component attribute object of the target operation position; Based on the pop-up component package resources, obtain the target Vue component information corresponding to the pop-up component identifier; Within the embedded page, a target Vue component instance is generated using the target Vue component information and the pop-up component attribute object, thus obtaining the target pop-up.

3. The method according to claim 2, characterized in that, The step of obtaining the pop-up component identifier and pop-up component attribute object of the target operation position based on the target pop-up material data in the target pop-up component data includes: Obtain the pop-up material identifier and the original pop-up material field from the target pop-up material data; Based on the pop-up material identifier, obtain the pop-up component identifier corresponding to the target operation position; Call the material loader corresponding to the pop-up component identifier, and map the original pop-up material field to the pop-up component attribute object through the material loader.

4. The method according to claim 1, characterized in that, Before creating the embedded page on the host page, the process also includes: Determine whether the pop-up loading conditions for the target operating position are met; In response to the pop-up loading condition being met, the steps of creating an embedded page on the host page and subsequent steps are executed. In response to the failure to meet the pop-up loading conditions, the steps of creating an embedded page on the host page and subsequent steps are not executed.

5. The method according to claim 4, characterized in that, Before determining whether the target operating position meets the pop-up loading conditions, the method further includes: Register pop-up event listeners for each operating unit based on the pop-up component data; The determination of whether the target operating position meets the pop-up loading conditions includes: Based on the target listening results of the pop-up event listener of the target operating position, the pop-up history display records of the target operating position, and the pop-up display strategy in the target pop-up component data, it is determined whether the pop-up loading conditions are met.

6. The method according to claim 5, characterized in that, The target listening result of the pop-up event listener based on the target operating position, the pop-up history display record of the target operating position, and the pop-up display strategy in the target pop-up component data are used to determine whether the pop-up loading conditions are met, including: In response to the target listening result being that a trigger event has been detected, it is determined whether the number of times the pop-up window has been displayed in the pop-up window history display record is less than the limit number of times the pop-up window display strategy has been displayed. If the number of times the pop-up has been displayed is not less than the limit number of times it has been displayed, then it is determined that the pop-up loading condition is not met. If the number of times the pop-up has been displayed is less than the limit number of times it has been displayed, then the pop-up loading condition is determined to be met.

7. The method according to claim 1, characterized in that, After creating an embedded page on the host page and rendering the target pop-up window of the target operation position based on the target pop-up component data through the embedded page, the method further includes: In response to the user's interaction with the target pop-up, obtain the command string corresponding to the interaction; Execute the host callback function corresponding to the command string to complete the business logic corresponding to the host callback function.

8. A pop-up window loading method, characterized in that, include: Obtain pop-up component data; wherein, the pop-up component data includes pop-up running data and pop-up material data, and the pop-up running data includes Vue framework configuration information; The pop-up component data is sent to the client so that the client can obtain the target pop-up component data corresponding to the target operation position from the pop-up component data returned by the server; and an embedded page is created on the host page, and the target pop-up of the target operation position is rendered through the embedded page based on the target pop-up component data.

9. The method according to claim 8, characterized in that, The process of obtaining pop-up component data includes: In response to a data request from the client, obtain pop-up material data corresponding to the input parameters in the data request; Read the configuration in the configuration center to obtain the pop-up operation data of all pop-ups contained in the host project corresponding to the host page; wherein, the input parameters in the data request include the operation position identifier; the pop-up operation data includes the download address of the pop-up component package, and the pop-up component package is a file that can be executed independently; The pop-up material data and the pop-up operation data are used as pop-up component data.

10. The method according to claim 9, characterized in that, Before obtaining the pop-up component data, the following is also included: Get the user ID of the currently logged-in client user; In response to the user identifier belonging to the pop-up loading group and the obtained pop-up material data not being empty, the client executes the pop-up component data returned from the server to obtain the target pop-up component data corresponding to the target operation position and subsequent steps. In response to the user identifier not belonging to the pop-up loading group, the obtained pop-up material data is empty, and the client does not execute the pop-up component data returned from the server to obtain the target pop-up component data corresponding to the target operation position and its subsequent steps.

11. The method according to claim 9, characterized in that, The method further includes: In response to the configuration change command, the configuration in the configuration center is updated to obtain the updated pop-up running data. The pop-up material data and the updated pop-up running data are returned to the client so that the client can render the target pop-up in the embedded page created by the host page using the updated pop-up running data and the pop-up material data.

12. An electronic device, characterized in that, The method includes a memory and a processor, wherein the memory stores program instructions and the processor executes the program instructions to implement the method according to any one of claims 1 to 11.

13. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores program instructions that can be executed by a processor to implement the method of any one of claims 1 to 11.

Images