Popup display method, device, equipment, medium and program product

Abstract

The application discloses a pop-up box display method and device, equipment, medium and program product, and relates to the technical field of front-end development. The method comprises the following steps: when it is detected that a target page element corresponding to a pop-up box in a sub-application page is clicked, a main application obtains the target page element, at least one sub-element associated with the target page element and pop-up box display data corresponding to the target page element from a display layer rendering container instance, and obtains a pop-up box display function from the display layer rendering container instance through a bridging event associated with a click function of the target page element; the pop-up box display function is triggered to execute, the main application page is subjected to pop-up box rendering based on the target page element, the sub-element associated with the target page element and the pop-up box display data corresponding to the target page element, so that pop-up box display and pop-up box masking of the pop-up box in the main application page are realized. The technical scheme of the embodiment of the application realizes the masking display of the pop-up box in the main application page and the sub-application page, and improves the interactivity of software system integration.

Description

Technical Field

[0001] The present invention relates to the field of front-end development technology, and in particular to a pop-up window display method, device, equipment, medium and program product. Background Art

[0002] For ease of integration, large-scale software system integration often uses a presentation layer for integration. Micro-frontends are often used for integration in the presentation layer.

[0003] However, the actual integration results were less than satisfactory. Especially during the presentation layer, when a floating pop-up window appeared on the page, it would only display and mask the window within the sub-app page, but the main app page could not be masked, resulting in poor interactivity in the software system integration. Summary of the Invention

[0004] The present invention provides a pop-up window display method, device, equipment, medium and program product, which realize the mask display of the pop-up window on the main application page and the sub-application page, and improve the interactivity of software system integration.

[0005] According to one aspect of the present invention, a method for displaying a pop-up window is provided, the method comprising:

[0006] When detecting that a target page element corresponding to a pop-up box in a sub-application page is clicked, the main application obtains the target page element, at least one child element associated with the target page element, and the pop-up box display data corresponding to the target page element from the presentation layer rendering container instance, and obtains the pop-up box display function from the presentation layer rendering container instance through a bridge event associated with the click function of the target page element;

[0007] Trigger the execution of the pop-up display function, and based on the target page element, at least one sub-element associated with the target page element, and the pop-up display data corresponding to the target page element, render the pop-up on the main application page to achieve pop-up display and pop-up masking of the pop-up in the main application page.

[0008] According to another aspect of the present invention, a pop-up window display device is provided, the device comprising:

[0009] The main application data acquisition module is configured to detect that a target page element corresponding to a pop-up box in a sub-application page is clicked, and the main application obtains the target page element, at least one child element associated with the target page element, and the pop-up box display data corresponding to the target page element from the presentation layer rendering container instance, and obtains the pop-up box display function from the presentation layer rendering container instance through a bridge event associated with the click function of the target page element;

[0010] A pop-up display module is used to trigger the execution of the pop-up display function, and based on the target page element, at least one sub-element associated with the target page element and the pop-up display data corresponding to the target page element, render the pop-up on the main application page to realize the pop-up display and pop-up mask of the pop-up in the main application page.

[0011] According to another aspect of the present invention, an electronic device is provided, comprising:

[0012] at least one processor; and

[0013] a memory communicatively connected to the at least one processor; wherein,

[0014] The memory stores a computer program that can be executed by the at least one processor, and the computer program is executed by the at least one processor so that the at least one processor can execute the pop-up box display method described in any embodiment of the present invention.

[0015] According to another aspect of the present invention, a computer-readable storage medium is provided, wherein the computer-readable storage medium stores computer instructions, and the computer instructions are used to enable a processor to implement the pop-up box display method described in any embodiment of the present invention when executed.

[0016] According to another aspect of the present invention, a computer program product is provided. The computer program product includes a computer program. When the computer program is executed by a processor, the pop-up box display method according to any embodiment of the present invention is implemented.

[0017] The technical solution of the embodiment of the present invention is to pre-store the target page element, at least one sub-element associated with the target page element, the pop-up display data corresponding to the target page element and the pop-up display function in the display layer rendering container instance by pre-building a display layer rendering container instance, and to build a bridge event associated with the click function of the target page element. When it is detected that the target page element corresponding to the pop-up box in the sub-application page is clicked, the main application obtains the target page element, at least one sub-element associated with the target page element and the pop-up display data corresponding to the target page element from the display layer rendering container instance, and the main application displays the target page element through the target page. The bridge event associated with the click function of the element obtains the pop-up display function from the presentation layer rendering container instance, the main application triggers the execution of the pop-up display function, and based on the target page element, at least one sub-element associated with the target page element and the pop-up display data corresponding to the target page element, the pop-up rendering of the main application page is performed. While the pop-up is displayed and masked in the sub-application page, the pop-up display and masking of the pop-up are realized in the main application page, which can improve the interactivity of the software system integration. In addition, there is no need to add any page elements to the main application page, which can reduce the software development cost during software system integration.

[0018] It should be understood that the content described in this section is not intended to identify the key or important features of the embodiments of the present invention, nor is it intended to limit the scope of the present invention. Other features of the present invention will become readily understood through the following description. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the following briefly introduces the drawings required for use in the description of the embodiments. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.

[0020] Figure 1 This is a flowchart of a method for displaying a pop-up window according to the first embodiment of the present invention;

[0021] Figure 2 This is a flowchart of a method for displaying a pop-up window according to a second embodiment of the present invention;

[0022] Figure 3 This is a structural diagram of a pop-up display device provided according to a third embodiment of the present invention;

[0023] Figure 4 It is a structural diagram of an electronic device that implements the pop-up box display method according to an embodiment of the present invention. DETAILED DESCRIPTION

[0024] In order to enable those skilled in the art to better understand the solutions of the present invention, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the embodiments described are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative efforts should fall within the scope of protection of the present invention.

[0025] It should be noted that the terms "first", "second", etc. in the description and claims of the present invention and the above-mentioned drawings are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that the numbers used in this way can be interchanged where appropriate, so that the embodiments of the present invention described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions. For example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0026] Example 1

[0027] Figure 1 This is a flowchart of a pop-up window display method provided in Example 1 of the present invention. This embodiment of the present invention is applicable to situations where a pop-up window mask is displayed on a main application page. The method can be performed by a pop-up window display device, which can be implemented in hardware and / or software and can be configured in an electronic device that carries the pop-up window display function.

[0028] See also Figure 1 The pop-up box display method shown includes:

[0029] S110. When it is detected that the target page element corresponding to the pop-up box in the sub-application page is clicked, the main application obtains the target page element, at least one sub-element associated with the target page element, and the pop-up box display data corresponding to the target page element from the presentation layer rendering container instance, and obtains the pop-up box display function through the bridge event associated with the click function of the target page element.

[0030] Large-scale software systems require numerous functions. Using a micro-frontend approach for presentation layer integration, integrating sub-applications (sub-apps) with a main application (Main-App) allows for functional expansion of large-scale software systems. The main application page is the front-end page corresponding to the main application. The sub-application page is the front-end page corresponding to the sub-application. The main and sub-application pages can be independent pages. The main application page can contain page elements that redirect to the sub-application page. Thus, by integrating at least one sub-application page with the main application page, the functional integration of large-scale software systems can be achieved.

[0031] The pop-up window can be a floating pop-up window. For example, the pop-up window can be Modal boxes. In existing micro-frontend architectures, when a sub-app page is triggered to display a floating pop-up window, the pop-up window only takes effect within the local container in which it is integrated, that is, only within the display range of the sub-app page. In this case, the background mask of the pop-up window only covers the area of ​​the sub-app page, while the main app page area can still be interacted with, such as clicks and scrolling, without being blocked by the mask layer. As a result, the interactivity of large software systems is poor.

[0032] The target page element can be the page element corresponding to the pop-up window in the sub-application page. For example, the target page element can be a DOM (Document Object Model) element. A child element can be a lower-level element nested within the target page element. A hierarchical relationship between the child elements and the page elements can be formed to display the target page element.

[0033] Pop-up display data can be used to display a pop-up on the main application page. Exemplarily, the pop-up display data may include pop-up display content and a pop-up display style. The pop-up display content may be the content required to be displayed in the pop-up on the main application page. For example, the pop-up display content may be an HTML (Hypertext Markup Language) string. The pop-up display style may be the format required to display the pop-up on the main application page. For example, the pop-up display format may be a CSS (Cascading Style Sheets) style.

[0034] The click function can be used to trigger the display of a pop-up box on the target page element. The click function can click on the target page element corresponding to the pop-up box in the sub-application page. The pop-up box display function can be used to realize the display of a pop-up box in the main application page. The bridging event associated with the click function of the target page element can be used to obtain the pop-up box display function from the presentation layer rendering container instance when it is detected that the target page element corresponding to the pop-up box in the sub-application page is clicked, that is, when it is detected that the click function is executed on the target page element. Optionally, the target page element of the sub-application page, at least one sub-element associated with the target page element, the pop-up box display data corresponding to the target page element, and the pop-up box display function can be pre-acquired from the sub-application page and stored in the presentation layer rendering container instance.

[0035] The presentation layer rendering container instance can be used to store the target page element of the sub-application page, at least one child element associated with the target page element, the pop-up display data corresponding to the target page element, and the pop-up display function. Optionally, the presentation layer rendering container instance can also store all page functions corresponding to the target page element, including the pop-up display function.

[0036] Specifically, when the sub-application detects that the target page element corresponding to the pop-up box on the sub-application page has been clicked, it sends the status of the detection of the click on the target page element corresponding to the pop-up box on the sub-application page to the main application. When the main application receives the click on the target page element corresponding to the pop-up box on the sub-application page, it can obtain the target page element, at least one child element associated with the target page element, and the pop-up box display data corresponding to the target page element from the presentation layer rendering container instance. The pop-up box display function is obtained from the presentation layer rendering container instance through the bridge event associated with the click function of the target page element.

[0037] In an optional embodiment of the present invention, before detecting that the page element corresponding to the pop-up box in the sub-application page is clicked, it also includes: when detecting that the routing address associated with the main application page triggers an operation, performing a display detection operation on the routing address to obtain all page elements of the target page corresponding to the routing address; detecting whether there is a root element of the target type in each page element, and determining whether there is a display layer integration behavior on the target page; when the target page has a display layer integration behavior, constructing a display layer rendering container instance, and attaching all page elements of the target page to the display layer rendering container instance; detecting whether the element style of each page element is the target style; when the element style of the page element is the target style , obtain at least one child element associated with the page element, and detect whether each child element is bound to a click event; when the child element is bound to a click event, detect whether the processing logic of the click event is to control the child element to hide the associated page element; when the processing logic of the click event is to control the child element to hide the associated page element, determine that the page element is the page element corresponding to the pop-up box; obtain the pop-up box display data and pop-up box display function of the page element corresponding to the pop-up box, and pass at least one child element associated with the page element corresponding to the pop-up box, the pop-up box display data and the pop-up box display function of the page element corresponding to the pop-up box into the presentation layer rendering container instance, and at the same time, build a bridge event for the click function of the page element corresponding to the pop-up box.

[0038] The routing address associated with the main application page can be used to jump to the main application page or a sub-application page associated with the main application page. Optionally, when a user of the software system is detected accessing the software system, a routing listener can be added to the main application page to obtain all routing addresses of the main application page and add a listener for each routing address of the main application page. The total routing address can include the routing address corresponding to the main application page and the routing address corresponding to at least one sub-application page.

[0039] The routing address trigger operation can be used to trigger the page elements of the main application page and jump to the page corresponding to the routing address. The target page can be the page corresponding to the routing address. Optionally, the target page can be the main application page or the sub-application page. All page elements can be all page elements of the target page. The root element of the target type can be used to detect whether the target page has presentation layer integration behavior, that is, to detect whether the target page is a sub-application page. Exemplarily, the root element of the target type can include an IFrame (Inline Frame) element or an HTML (Hyper Text Markup Language) element.

[0040] The presence of presentation layer integration on the target page can be used to identify the target page as a sub-application page. A presentation layer rendering container instance can be used to store all page elements of the sub-application page, at least one associated sub-element, and the corresponding pop-up display data and pop-up display functions. There can be a one-to-one correspondence between presentation layer rendering container instances and sub-application pages.

[0041] The element style can be the display style of a page element on the page. The target style can be the display style of the corresponding pop-up box. For example, the target style can be a hidden state of the element style, a background color of the target color, and a transparency setting for the background color. The target color can be gray, black, or a color between gray and gray.

[0042] The child element binding click event can be understood as the presence of a child element triggered by the click operation among the child elements associated with the page element. Exemplary child elements can be "OK" button elements, "Cancel" button elements, or "Close" button elements.

[0043] The click event processing logic controls the child element to hide the associated page element. This means that when you click a child element, the click event is executed, which in turn controls the child element to hide the corresponding page element. In the example above, the child element can be a "Cancel" or "Close" button, and the page element can be the page element corresponding to the pop-up window.

[0044] Before building a bridge event for the click function of the page element corresponding to the pop-up box, when the page element corresponding to the pop-up box is clicked in the sub-application page, the pop-up box display and pop-up box mask are only implemented in the sub-application page. After building a bridge event for the click function of the page element corresponding to the pop-up box, the main application can sense that the page element corresponding to the pop-up box has been clicked, and when the page element corresponding to the pop-up box is clicked, it can obtain the pop-up box display function to implement the pop-up box display and pop-up box mask of the main application page. As a result, when the page element corresponding to the pop-up box is clicked, the pop-up box display and pop-up box mask are implemented on both the main application page and the sub-application page.

[0045] Specifically, based on the pre-added monitoring of each routing address of the main application page, the trigger operation of the routing address associated with the main application page can be detected. When the trigger operation of the routing address associated with the main application page is detected, the routing address can be displayed and detected based on the sandbox proxy to obtain all page elements of the target page corresponding to the routing address.

[0046] Specifically, it is possible to detect whether a root element of the target type exists in each page element. If a root element of the target type exists in the page element, it is determined that the target page has presentation layer integration behavior. If a root element of the target type does not exist in the page element, it is determined that the target page does not have presentation layer integration behavior. If the target page has presentation layer integration behavior, a presentation layer rendering container instance can be constructed and all page elements of the target page can be attached to the presentation layer rendering container instance.

[0047] Specifically, it is possible to detect whether the element style of each page element is the target style. When the element style of the page element is the target style, at least one child element associated with the page element can be obtained based on the sandbox agent, and the event listener can be used to detect whether each child element is bound to a click event according to the characteristic value of each child element. When the child element is bound to a click event, it is detected whether the processing logic of the click event is to control the child element to hide the associated page element. When the processing logic of the click event is to control the child element to hide the associated page element, it is determined that the page element is the page element corresponding to the pop-up box.

[0048] Exemplarily, detecting whether the element style of each page element is the target style may include: detecting whether the element style of each page element is in a hidden state; when the element style of the page element is in a hidden state, detecting whether the background color of the page element is the target color; when the background color of the page element is the target color, detecting whether there is a transparency setting for the background color of the page element; when the background color of the page element has a transparency setting, determining that the element style of the page element is the target style.

[0049] Specifically, based on the pre-added listener of the routing address where the target page is located, the pop-up box display data and pop-up box display function of the page element corresponding to the pop-up box can be obtained, and at least one child element associated with the page element corresponding to the pop-up box, the pop-up box display data and pop-up box display function corresponding to the page element corresponding to the pop-up box can be passed into the presentation layer rendering container instance. At the same time, a hierarchical bridging structure can be used to construct a bridge event for the click function of the page element corresponding to the pop-up box.

[0050] This solution performs display detection on the routing address when it detects that the routing address associated with the main application page triggers an operation, obtains all page elements of the target page corresponding to the routing address, and realizes preliminary detection of whether the target page has display layer integration behavior by detecting whether there is a root element of the target type in the page elements. When the target page has display layer integration behavior, it realizes pre-storage of all page elements of the sub-application page by constructing a display layer rendering container instance; it detects in turn whether the element style of the page element is the target style, whether the sub-elements associated with the page element are bound to the click event, and whether the processing logic of the click event is In order to control the hiding of associated page elements by sub-elements, the page elements corresponding to the pop-up box are filtered; by passing at least one sub-element associated with the page element corresponding to the pop-up box, the pop-up box display data corresponding to the page element corresponding to the pop-up box, and the pop-up box display function into the presentation layer rendering container instance, the pre-storage of the required data for the pop-up box display in the sub-application page is achieved. At the same time, by constructing a bridge event for the click function of the page element corresponding to the pop-up box, the pre-bridging of the click function of the page element corresponding to the pop-up box is achieved, which facilitates the main application's perception of the triggering of the page element corresponding to the pop-up box in the sub-application page, and provides a basis for the pop-up box display and pop-up box masking of the main application page.

[0051] In an optional embodiment of the present invention, while constructing a presentation layer rendering container instance, the further steps include: extracting feature values ​​from a routing address, and determining a container identifier of the presentation layer rendering container instance based on the feature values ​​of the routing address; storing the container identifier and the presentation layer rendering container instance in correspondence; accordingly, when detecting that a target page element corresponding to a pop-up box in a sub-application page is clicked, the main application obtains the target page element, at least one sub-element associated with the target page element, and pop-up display data corresponding to the target page element from the presentation layer rendering container instance, including: when detecting that a target page element corresponding to a pop-up box in a sub-application page is clicked, the main application obtains the container identifier of the presentation layer rendering container instance where the target page element is located; and the main application obtains the target page element, at least one sub-element associated with the target page element, and the pop-up display data corresponding to the target page element from the corresponding presentation layer rendering container instance based on the container identifier.

[0052] The routing address characteristic value can be used to uniquely identify the routing address, and therefore the page corresponding to the routing address. The container identifier can be used to uniquely identify the presentation layer rendering container instance. The container identifier can achieve a one-to-one correspondence between the routing address and the presentation layer rendering container instance.

[0053] Specifically, while constructing the presentation layer rendering container instance, the routing address can be parsed to extract the routing address feature value.

[0054] Optionally, the routing address feature value can be directly determined as the container identifier of the presentation layer rendering container instance. Optionally, the routing address feature value can be further processed, such as combined with other information to generate the container identifier of the presentation layer rendering container instance.

[0055] Specifically, the container identifier and the presentation layer rendering container instance may be stored in the presentation layer integration manager in correspondence, and / or the container identifier may be shared with the presentation layer rendering container instance.

[0056] Specifically, the pre-added listener on the sub-application page sends a notification to the main application when it detects a click on the target page element corresponding to the pop-up window in the sub-application page. The main application can obtain the container identifier of the presentation layer rendering container instance where the target page element resides from the presentation layer integration manager or presentation layer rendering container instance. Based on the container identifier, the main application retrieves the target page element, at least one child element associated with the target page element, and the pop-up window display data corresponding to the target page element from the corresponding presentation layer rendering container instance.

[0057] This solution extracts feature values ​​from the routing address, generates a container identifier for the presentation layer rendering container instance based on the routing address feature values, and stores the container identifier and the presentation layer rendering container instance in correspondence, thereby achieving a one-to-one correspondence between the routing address and the presentation layer rendering container instance. When detecting that the target page element corresponding to the pop-up box in the sub-application page is clicked, the main application obtains the container identifier of the presentation layer rendering container instance where the target page element is located. Based on the container identifier, the target page element, at least one child element associated with the target page element, and the pop-up box display data corresponding to the target page element are obtained from the corresponding presentation layer rendering container instance. The introduction of the container identifier enables rapid screening and confirmation of the presentation layer rendering container instance, thereby improving the efficiency of the pop-up box display.

[0058] S120. Trigger the execution of the pop-up display function, and based on the target page element, at least one sub-element associated with the target page element, and the pop-up display data corresponding to the target page element, render the pop-up on the main application page to achieve pop-up display and pop-up masking of the pop-up in the main application page.

[0059] Specifically, the main application can trigger the execution of the pop-up display function, use the pop-up display content and pop-up display style in the target page element, at least one sub-element associated with the target page element, and the pop-up display data corresponding to the target page element to render the pop-up on the main application page, and realize the pop-up display and pop-up mask of the pop-up in the main application page.

[0060] The technical solution of the embodiment of the present invention is to pre-store the target page element, at least one sub-element associated with the target page element, the pop-up display data corresponding to the target page element and the pop-up display function in the display layer rendering container instance by pre-building a display layer rendering container instance, and to build a bridge event associated with the click function of the target page element. When it is detected that the target page element corresponding to the pop-up box in the sub-application page is clicked, the main application obtains the target page element, at least one sub-element associated with the target page element and the pop-up display data corresponding to the target page element from the display layer rendering container instance, and the main application displays the target page element through the target page. The bridge event associated with the click function of the element obtains the pop-up display function from the presentation layer rendering container instance, the main application triggers the execution of the pop-up display function, and based on the target page element, at least one sub-element associated with the target page element and the pop-up display data corresponding to the target page element, the pop-up rendering of the main application page is performed. While the pop-up is displayed and masked in the sub-application page, the pop-up display and masking of the pop-up are realized in the main application page, which can improve the interactivity of the software system integration. In addition, there is no need to add any page elements to the main application page, which can reduce the software development cost during software system integration.

[0061] Example 2

[0062] Figure 2 A flowchart of a pop-up display method provided for the second embodiment of the present invention. Based on the above embodiment, after "rendering a pop-up on the main application page", the embodiment of the present invention further adds "when detecting that the target sub-element of the target page element corresponding to the pop-up is triggered, the main application obtains the key-value pairs of the triggered target page element and each sub-element associated with the target page element from the presentation layer rendering container instance, and obtains other page functions through the bridging event associated with the trigger function of the sub-element of the page element; calls the target sub-element of the triggered target page element in the presentation layer rendering container instance as the key object corresponding to the main application page; according to the key-value pair of the key object, triggers the execution of other page functions, assigns values ​​to the pop-up in the main application page, and completes the linkage of the pop-up in the main application page and the sub-application page", realizing the interactive linkage of the pop-up in the main application page and the sub-application page. It should be noted that for the parts not described in detail in the embodiment of the present invention, please refer to the description of other embodiments.

[0063] See also Figure 2 The pop-up box display method shown includes:

[0064] S210. When it is detected that the target page element corresponding to the pop-up box in the sub-application page is clicked, the main application obtains the target page element, at least one sub-element associated with the target page element, and the pop-up box display data corresponding to the target page element from the presentation layer rendering container instance, and obtains the pop-up box display function through the bridge event associated with the click function of the target page element.

[0065] S220. Trigger the execution of the pop-up display function, and based on the target page element, at least one sub-element associated with the target page element, and the pop-up display data corresponding to the target page element, render the pop-up on the main application page to achieve pop-up display and pop-up masking of the pop-up in the main application page.

[0066] S230. When it is detected that the target sub-element of the target page element corresponding to the pop-up window is triggered, the main application obtains the key-value pairs of the triggered target page element and each sub-element associated with the target page element from the presentation layer rendering container instance, and obtains other page functions through the bridge event associated with the trigger function of the target sub-element of the target page element.

[0067] The main application can execute the pop-up display function through the bridge event, thereby implementing pop-up rendering and pop-up masking on the main application page. However, the page element corresponding to the pop-up also has other page functions for implementing other pop-up interaction functions besides pop-up display. For example, after the pop-up is opened on the main application page and the sub-application page, the pop-up content on the main application page and the sub-application page may also change. Currently, this can only be implemented on the sub-application page, not on the main application page.

[0068] The target sub-element can be the triggered sub-element of the target page element corresponding to the pop-up. This can be understood as the sub-element that causes the pop-up interaction between the main app page and the sub-app page (e.g., a change in the pop-up content). The key-value pairs of the sub-elements associated with the target page element can be used to represent the target sub-element of the target page element that triggers the pop-up, as well as the interactive operation between the main app page and the sub-app page (e.g., obtaining the changed pop-up content) when the target sub-element is triggered.

[0069] The trigger function of the target sub-element of the target page element can be used to trigger the target sub-element to implement pop-up box interaction (for example, the pop-up box content changes). Optionally, the trigger function can execute the target sub-element of the target page element corresponding to the pop-up box in the trigger sub-application page. Other page functions can be used to implement pop-up box interaction in the main application page (for example, the pop-up box content changes). The bridge event associated with the trigger function of the target sub-element of the target page element can be used to obtain other page functions from the presentation layer rendering container instance when it is detected that the target sub-element of the target page element corresponding to the pop-up box in the sub-application page is triggered.

[0070] Specifically, when the sub-application detects that the target sub-element of the target page element corresponding to the pop-up window has been triggered, it sends the status of the target sub-element of the target page element corresponding to the pop-up window being triggered to the main application. When the main application receives the triggering of the target sub-element of the target page element corresponding to the pop-up window, it can obtain the key-value pairs of the triggered target page element and each sub-element associated with the target page element from the presentation layer rendering container instance. Through the bridge event associated with the trigger function of the target sub-element of the target page element, other page functions are obtained from the presentation layer rendering container instance.

[0071] In an optional embodiment of the present invention, while passing the pop-up display data and pop-up display function corresponding to the page element into the presentation layer rendering container instance, it also includes: obtaining all page functions of the page element corresponding to the pop-up; passing all page functions of the page element corresponding to the pop-up except the pop-up display function into the presentation layer rendering container instance; and constructing a bridge event for the trigger function of the sub-element of the page element corresponding to the pop-up.

[0072] All page functions can be all page functions that can be executed by the triggering page element. All page functions can be used to implement all functions corresponding to the pop-up box. Other page functions can be page functions other than the pop-up box display function. A bridge event is constructed for the triggering function of the sub-element of the page element. In this way, the main application can perceive that the sub-element of the page element is triggered, and when the sub-element of the page element is triggered, the main application can obtain other page functions to implement the pop-up box interaction of the main application page (for example, to realize the change of the pop-up box content).

[0073] Specifically, a listener can be pre-added based on the routing address of the target page to obtain all page functions of the page element corresponding to the pop-up window. Except for the pop-up display function, all other page functions of the page element corresponding to the pop-up window can be passed to the presentation layer rendering container instance. At the same time, a hierarchical bridging structure can be used to build a bridge event for the trigger function of the sub-elements of the page element corresponding to the pop-up window.

[0074] This solution pre-stores all page functions in the sub-application page by passing all page functions of the page element corresponding to the pop-up box except the pop-up box display function into the presentation layer rendering container instance. At the same time, by constructing a bridge event for the trigger function of the sub-element of the page element corresponding to the pop-up box, the pre-bridging of the trigger function of the sub-element of the page element corresponding to the pop-up box is achieved, which facilitates the main application's perception of the sub-application page's triggering of the sub-element of the page element corresponding to the pop-up box, and provides a basis for the pop-up box interaction of the main application page.

[0075] S240: Call the target sub-element of the triggered target page element in the presentation layer rendering container instance as the key object corresponding to the main application page.

[0076] The key object corresponding to the main application page can be used to uniquely identify the triggering object when a pop-up box interaction (for example, a change in the pop-up box content) occurs on the main application page. The key object corresponding to the main application page can be a target child element.

[0077] Specifically, the main application may call the target sub-element of the triggered target page element in the presentation layer rendering container instance as the key object corresponding to the main application page.

[0078] S250. Trigger the execution of other page functions, assign values ​​to the pop-up box in the main application page according to the key-value pair of the key object, and complete the linkage of the pop-up box in the main application page and the sub-application page.

[0079] The key-value pairs of a key object represent the triggered key object and the pop-up interaction (e.g., the changed pop-up content) performed on the main app page and sub-app page when the key object is triggered. Assigning a value to the pop-up on the main app page can be understood as implementing a pop-up interaction (e.g., a change in pop-up content) on the main app page.

[0080] Specifically, the main application triggers the execution of functions on other pages. The pop-up box in the main application page can be assigned a value based on the key-value pair of the key object, thereby completing the interactive linkage of the pop-up box between the main application page and the sub-application page.

[0081] The technical solution of an embodiment of the present invention is that when it is detected that the target sub-element of the target page element corresponding to the pop-up box is triggered, the main application obtains the key-value pairs of the triggered target page element and each sub-element associated with the target page element from the presentation layer rendering container instance, and obtains other page functions through the bridging event associated with the trigger function of the sub-element of the page element, calls the target sub-element of the triggered target page element in the presentation layer rendering container instance as the key object corresponding to the main application page, triggers the execution of other page functions according to the key-value pair of the key object, and assigns values ​​to the pop-up box in the main application page, thereby realizing the interactive linkage of the pop-up box between the main application page and the sub-application page.

[0082] In an optional embodiment of the present invention, while triggering the execution of other page functions, it also includes: detecting whether the other page functions are pop-up hiding functions; when the other page functions are pop-up hiding functions, the main application obtains the pop-up hiding function and pop-up display style of the main application page, and hides the pop-up of the main application page to achieve pop-up hiding of the pop-up on the main application page.

[0083] When executing other page functions of the target page element, the pop-up box interaction with the main application page (for example, the pop-up box content change) can be achieved through the key-value pairs of each sub-element associated with the target page element in the sub-application page that are pre-acquired. In comparison, other page functions except the pop-up box hiding function are triggered by the sub-application page, causing the pop-up box content of the sub-application page and the main application page to change. However, the pop-up box hiding function may be triggered by the main application page. Due to the association of the pop-up box hiding function, it can only cause the pop-up box of the sub-application page to be hidden, but cannot achieve the pop-up box hiding of the main application page. The pop-up box hiding function and pop-up box hiding style of the main application page can be used to hide the pop-up box of the main application page.

[0084] Specifically, the main application can detect whether the function on other pages is a pop-up box hiding function. If the function on other pages is a pop-up box hiding function, the main application can obtain the pop-up box hiding function and pop-up box display style of the main application page and hide the pop-up box on the main application page to achieve the pop-up box hiding on the main application page.

[0085] This solution achieves the pop-up hiding of the main application page and the sub-application page by triggering the execution of other page functions and, when the other page functions are pop-up hiding functions, the main application obtains the pop-up hiding function and pop-up display style of the main application page, and hides the pop-up of the main application page. This realizes the pop-up hiding of the pop-up box in the main application page and the sub-application page, thereby realizing the closed-loop operation of pop-up, interaction and hiding of the pop-up box in the main application page and the sub-application page.

[0086] Based on the above embodiment, the present invention further provides a preferred embodiment. The method for displaying a pop-up window includes:

[0087] Step 1: When access to the software system is detected, add a routing listener to the main application page, obtain all routing addresses of the main application page, and add a listener to each routing address.

[0088] Among them, all routing addresses include the routing address corresponding to the main application and the routing address corresponding to at least one sub-application.

[0089] Step 2: When a trigger operation is detected for the routing address associated with the main application page, a display detection operation is performed on the routing address to obtain all page elements of the target page corresponding to the routing address.

[0090] The page element is a DOM element. The purpose of performing a display detection operation on the routing address is to detect whether the routing address corresponds to the main application page or the sub-application page.

[0091] Step 3: Check whether there is a root element of the target type in each page element to determine whether the target page has presentation layer integration behavior.

[0092] The target type's root element can include an IFrame (Inline Frame) element or an HTML (Hypertext Markup Language) element. Determining whether the target page has presentation layer integration behavior can be understood as determining whether the target page is a sub-application page.

[0093] Step 4: If the target page has presentation layer integration, construct a presentation layer rendering container instance and attach all page elements of the target page to the presentation layer rendering container instance.

[0094] Step 5: Extract the feature value of the routing address and use the feature value of the routing address as the container identifier of the presentation layer rendering container instance.

[0095] Step 6: Store the container identifier and the presentation layer rendering container instance in correspondence in the presentation layer integration manager. At the same time, share the container identifier with the presentation layer rendering container instance.

[0096] The presentation layer integration manager manages the correspondence between container identifiers and rendering container instances, specifically, between routing addresses and presentation layer rendering container instances. The container identifier is shared with the presentation layer rendering container instance, making it aware of its own container identifier. The unique container identifier stored within the presentation layer rendering container instance serves two purposes: identifying the presentation layer rendering container instance itself and identifying the corresponding routing address. Ultimately, this allows for binding the routing address associated with presentation layer integration to the constructed presentation layer rendering container instance.

[0097] Step 7. While attaching all page elements of the target page to the presentation layer rendering container instance, obtain all page elements and corresponding sub-elements of the target page, and detect whether the element style of each page element is in a hidden state; when the element style of the page element is in a hidden state, detect whether the background color of the page element is a color between black and gray and has a transparency setting; when the background color of the page element is a color between black and gray and has a transparency setting, obtain the characteristic values ​​of all sub-elements associated with the page element, and detect whether each sub-element is bound to a click event; when the sub-element is bound to a click event, detect whether the processing logic of the click event is to control the sub-element to hide the associated page element; when the processing logic of the click event is to control the sub-element to hide the associated page element, determine that the page element is the page element corresponding to the pop-up box.

[0098] Step 8. Get the pop-up display data and all page functions of the page element corresponding to the pop-up, and pass all child elements associated with the page element corresponding to the pop-up, the pop-up display data and all page functions of the page element corresponding to the pop-up to the presentation layer rendering container instance. At the same time, build a bridge event for the click function of the page element corresponding to the pop-up.

[0099] Step 9: Detect the business logic of all page functions of the page element corresponding to the pop-up box; when the business logic of the page function is to initialize and assign values ​​to the page elements, obtain the pop-up box display function.

[0100] All page functions of the page element corresponding to the pop-up box may include a pop-up box display function, a pop-up box interaction function, a pop-up box hiding function, etc. Among them, the pop-up box display function may initialize and assign values ​​to the pop-up box when the pop-up box is displayed.

[0101] Step 10: When it is detected that the target page element corresponding to the pop-up box in the sub-application page is clicked, the execution of the bridge event of the click function is triggered. That is, the main application queries the container identifier of the presentation layer rendering container instance based on the presentation layer rendering container instance where the target page element is located, and obtains the target page element, at least one child element associated with the target page element, the pop-up box display data corresponding to the target page element, and the pop-up box display function from the corresponding presentation layer rendering container instance based on the container identifier.

[0102] Exemplarily, the pop-up display data may include pop-up display content and a pop-up display style. The pop-up display content may be the content required to be displayed in the pop-up on the main application page. Exemplarily, the pop-up display content may be an HTML (Hypertext Markup Language) string. The pop-up display style may be the format required to display the pop-up on the main application page. Exemplarily, the pop-up display format may be a CSS (Cascading Style Sheets) style.

[0103] Step 11: trigger the execution of the pop-up display function. Through the pop-up display function, based on the pop-up display style and pop-up display data, the pop-up is rendered on the main application page to achieve masked display of the pop-up on the main application page and the sub-application page.

[0104] Step 12: While rendering the pop-up window on the main application page, obtain other page functions bound to the page element corresponding to the pop-up window, except for the pop-up window display function, from the presentation layer rendering container instance; pass the other page functions of the page element corresponding to the pop-up window into the presentation layer rendering container instance; and build a bridge event for the trigger function of the sub-element of the page element corresponding to the pop-up window.

[0105] Exemplarily, other page functions may include test functions, and the identifiers of the test functions may include "test 1" and "test 2".

[0106] Step 13: When it is detected that the target sub-element of the target page element corresponding to the pop-up box is triggered, the main application obtains the key-value pairs of the triggered target page element and each sub-element associated with the target page element from the presentation layer rendering container instance, and obtains other page functions through the bridge event associated with the trigger function of the target sub-element of the target page element.

[0107] Step 14: Call the presentation layer to render the target sub-element of the triggered target page element in the container instance as the key object corresponding to the main application page.

[0108] Step 15: Trigger the execution of other page functions, assign values ​​to the pop-up box in the main application page according to the key-value pair of the key object, and complete the linkage change of the pop-up box in the main application page and the sub-application page.

[0109] Step 16: While triggering the execution of other page functions, detect whether the other page functions are pop-up box hiding functions; when the other page functions are pop-up box hiding functions, the main application obtains the pop-up box hiding function and pop-up box display style of the main application page, and hides the pop-up box of the main application page to achieve pop-up box hiding on the main application page.

[0110] This solution completes the closed-loop operation of pop-up, pop-up masking, pop-up interaction, and pop-up hiding for the main application page and sub-application page, improving the page interactivity of the software system.

[0111] Example 3

[0112] Figure 3 This is a schematic diagram of the structure of a pop-up window display device provided in Example 3 of the present invention. This embodiment of the present invention is applicable to the case where a pop-up window mask is displayed on the main application page. The device can execute the pop-up window display method. The device can be implemented in hardware and / or software and can be configured in an electronic device that supports the pop-up window display function.

[0113] See also Figure 3 The pop-up box display device shown includes: a main application data acquisition module 310 and a main application pop-up box display module 320. Among them, the main application data acquisition module 310 is used to detect that the target page element corresponding to the pop-up box in the sub-application page is clicked, and the main application obtains the target page element, at least one sub-element associated with the target page element, and the pop-up box display data corresponding to the target page element from the presentation layer rendering container instance, and obtains the pop-up box display function from the presentation layer rendering container instance through the bridge event associated with the click function of the target page element; the main application pop-up box display module 320 is used to trigger the execution of the pop-up box display function, and based on the target page element, at least one sub-element associated with the target page element and the pop-up box display data corresponding to the target page element, perform pop-up box rendering on the main application page to realize the pop-up box display and pop-up box mask of the pop-up box in the main application page.

[0114] The technical solution of the embodiment of the present invention is to pre-store the target page element, at least one sub-element associated with the target page element, the pop-up display data corresponding to the target page element and the pop-up display function in the display layer rendering container instance by pre-building a display layer rendering container instance, and to build a bridge event associated with the click function of the target page element. When it is detected that the target page element corresponding to the pop-up box in the sub-application page is clicked, the main application obtains the target page element, at least one sub-element associated with the target page element and the pop-up display data corresponding to the target page element from the display layer rendering container instance, and the main application displays the target page element through the target page. The bridge event associated with the click function of the element obtains the pop-up display function from the presentation layer rendering container instance, the main application triggers the execution of the pop-up display function, and based on the target page element, at least one sub-element associated with the target page element and the pop-up display data corresponding to the target page element, the pop-up rendering of the main application page is performed. While the pop-up is displayed and masked in the sub-application page, the pop-up display and masking of the pop-up are realized in the main application page, which can improve the interactivity of the software system integration. In addition, there is no need to add any page elements to the main application page, which can reduce the software development cost during software system integration.

[0115] In an optional embodiment of the present invention, the device also includes: other page function acquisition module, which is used to detect that the target sub-element of the target page element corresponding to the pop-up box is triggered after the pop-up box rendering is performed on the main application page, and the main application obtains the key-value pairs of the triggered target page element and each sub-element associated with the target page element from the presentation layer rendering container instance, and obtains other page functions through the bridging event associated with the trigger function of the target sub-element of the target page element; other page function determination module, which is used to call the target sub-element of the triggered target page element in the presentation layer rendering container instance as the key object corresponding to the main application page; main application pop-up box linkage module, which is used to trigger the execution of the other page function, trigger the execution of the other page function, assign a value to the pop-up box in the main application page, and complete the linkage of the pop-up box between the main application page and the sub-application page.

[0116] In an optional embodiment of the present invention, the device also includes: a pop-up box hiding function detection module, which is used to detect whether the other page function is a pop-up box hiding function while triggering the execution of the other page function; a main application pop-up box hiding module, which is used to, when the other page function is a pop-up box hiding function, the main application obtains the pop-up box hiding function and pop-up box display style of the main application page, and hides the pop-up box of the main application page, so as to achieve the pop-up box hiding of the pop-up box in the main application page.

[0117] In an optional embodiment of the present invention, the device also includes: a routing address detection module, which is used to perform display detection on the routing address when a routing address trigger operation associated with the main application page is detected before the page element corresponding to the pop-up box in the sub-application page is detected to be clicked, and obtain all page elements of the target page corresponding to the routing address; a display layer integration behavior determination module, which is used to detect whether there is a root element of the target type in each of the page elements, and determine whether there is a display layer integration behavior on the target page; a display layer rendering container instance construction module, which is used to construct a display layer rendering container instance when there is a display layer integration behavior on the target page, and attach all page elements of the target page to the display layer rendering container instance; an element style detection module, which is used to detect whether the element style of each of the page elements is the target style; a click event binding detection module, which is used to detect whether the element style of each of the page elements is the target style When the style is the target style, at least one child element associated with the page element is obtained, and it is detected whether each of the child elements is bound to a click event; a click event logic detection module is used to detect whether the processing logic of the click event is to control the sub-element to hide the associated page element when the sub-element is bound to a click event; a pop-up page element determination module is used to determine that the page element is the page element corresponding to the pop-up box when the processing logic of the click event is to control the sub-element to hide the associated page element; a click function construction bridge event module is used to obtain the pop-up box display data and pop-up box display function of the page element corresponding to the pop-up box, and pass at least one child element associated with the page element corresponding to the pop-up box, the pop-up box display data and the pop-up box display function of the page element corresponding to the pop-up box into the display layer rendering container instance, and at the same time, construct a bridge event for the click function of the page element corresponding to the pop-up box.

[0118] In an optional embodiment of the present invention, the device also includes: a module for obtaining all page functions of the page element corresponding to the pop-up box while passing the pop-up box display data and the pop-up box display function of the page element corresponding to the pop-up box into the presentation layer rendering container instance; a module for passing other page functions corresponding to the page element except the pop-up box display function into the presentation layer rendering container instance; a module for constructing a bridge event for a trigger function of a sub-element of the page element corresponding to the pop-up box.

[0119] In an optional embodiment of the present invention, the device also includes: a container identifier determination module, which is used to extract feature values ​​of the routing address while constructing the presentation layer rendering container instance, and determine the container identifier of the presentation layer rendering container instance based on the routing address feature values; a container identifier corresponding storage module, which is used to store the container identifier and the presentation layer rendering container instance in correspondence; accordingly, the main application data acquisition module 310 includes: a container identifier acquisition unit, which is used to detect that the target page element corresponding to the pop-up box in the sub-application page is clicked, and the main application obtains the container identifier of the presentation layer rendering container instance where the target page element is located; a main application data acquisition unit, which is used for the main application to obtain the target page element, at least one sub-element associated with the target page element, and the pop-up box display data corresponding to the target page element from the corresponding presentation layer rendering container instance according to the container identifier.

[0120] The pop-up box display device provided in the embodiment of the present invention can execute the pop-up box display method provided in any embodiment of the present invention, and has the corresponding functional modules and beneficial effects of the execution method.

[0121] In the technical solution of the embodiment of the present invention, the acquisition, storage and application of the target page elements, at least one sub-element associated with the target page elements, the pop-up display data corresponding to the target page elements, the pop-up display function, the target page elements, the key-value pairs of each sub-element associated with the target page elements, other page functions, the pop-up hiding function of the main application page, the pop-up display style, all page elements of the target page corresponding to the routing address and at least one sub-element associated with the page elements, etc., all comply with the provisions of relevant laws and regulations and do not violate public order and good morals.

[0122] Example 4

[0123] Figure 4 A schematic diagram of an electronic device 400 that can be used to implement an embodiment of the present invention is shown. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as personal digital assistants, cellular phones, smartphones, wearable devices (such as helmets, glasses, watches, etc.), and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples and are not intended to limit the implementation of the present invention described and / or claimed herein.

[0124] like Figure 4 As shown, electronic device 400 includes at least one processor 401 and memory, such as read-only memory (ROM) 402 and random access memory (RAM) 403, communicatively connected to at least one processor 401. The memory stores computer programs executable by the at least one processor. Processor 401 can perform various appropriate actions and processes based on the computer programs stored in ROM 402 or loaded from storage unit 408 into RAM 403. RAM 403 can also store various programs and data required for the operation of electronic device 400. Processor 401, ROM 402, and RAM 403 are interconnected via bus 404. An input / output (I / O) interface 405 is also connected to bus 404.

[0125] Multiple components in the electronic device 400 are connected to the I / O interface 405, including an input unit 406, such as a keyboard, a mouse, etc.; an output unit 407, such as various types of displays, speakers, etc.; a storage unit 408, such as a magnetic disk, an optical disk, etc.; and a communication unit 409, such as a network card, a modem, a wireless communication transceiver, etc. The communication unit 409 allows the electronic device 400 to exchange information / data with other devices via a computer network such as the Internet and / or various telecommunication networks.

[0126] Processor 401 can be any general-purpose and / or specialized processing component with processing and computing capabilities. Some examples of processor 401 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various specialized artificial intelligence (AI) computing chips, various processors running machine learning model algorithms, a digital signal processor (DSP), and any other suitable processor, controller, microcontroller, etc. Processor 401 executes the various methods and processes described above, such as the pop-up window display method.

[0127] In some embodiments, the pop-up display method can be implemented as a computer program, which is tangibly contained in a computer-readable storage medium, such as a storage unit 408. In some embodiments, part or all of the computer program can be loaded and / or installed on the electronic device 400 via the ROM 402 and / or the communication unit 409. When the computer program is loaded into the RAM 403 and executed by the processor 401, one or more steps of the pop-up display method described above can be performed. Alternatively, in other embodiments, the processor 401 can be configured to execute the pop-up display method in any other appropriate manner (for example, by means of firmware).

[0128] Various embodiments of the systems and techniques described above can be implemented in digital electronic circuit systems, integrated circuit systems, field programmable gate arrays (FPGAs), application specific integrated circuits (ASICs), application specific standard products (ASSPs), system-on-chip systems (SOCs), complex programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various embodiments can include being implemented in one or more computer programs that are executable and / or interpreted on a programmable system that includes at least one programmable processor, which can be a special purpose or general purpose programmable processor that can receive data and instructions from a storage system, at least one input device, and at least one output device, and transmit data and instructions to the storage system, the at least one input device, and the at least one output device.

[0129] Computer programs for implementing the methods of the present invention may be written in any combination of one or more programming languages. These computer programs may be provided to a processor of a general-purpose computer, a special-purpose computer, or other programmable data processing device, such that when the computer program is executed by the processor, the functions / operations specified in the flowcharts and / or block diagrams are implemented. The computer program may be executed entirely on the machine, partially on the machine, as a stand-alone software package, partially on the machine and partially on a remote machine, or entirely on a remote machine or server.

[0130] In the context of the present invention, a computer-readable storage medium may be a tangible medium that may contain or store a computer program for use by or in conjunction with an instruction execution system, device, or apparatus. A computer-readable storage medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, device, or apparatus, or any suitable combination of the foregoing. Alternatively, a computer-readable storage medium may be a machine-readable signal medium. More specific examples of machine-readable storage media may include an electrical connection based on one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0131] To provide interaction with a user, the systems and techniques described herein can be implemented on an electronic device that has: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and pointing device (e.g., a mouse or trackball) through which the user can provide input to the electronic device. Other types of devices can also be used to provide interaction with the user; for example, the feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including acoustic input, voice input, or tactile input).

[0132] The systems and techniques described herein can be implemented in a computing system that includes back-end components (e.g., as a data server), or a computing system that includes middleware components (e.g., an application server), or a computing system that includes front-end components (e.g., a user computer with a graphical user interface or web browser through which a user can interact with implementations of the systems and techniques described herein), or a computing system that includes any combination of such back-end components, middleware components, or front-end components. The components of the system can be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: a local area network (LAN), a wide area network (WAN), a blockchain network, and the Internet.

[0133] A computing system may include clients and servers. The clients and servers are generally remote from each other and typically interact via a communication network. This client-server relationship arises through computer programs running on the respective computers, creating a client-server relationship. The server may be a cloud server, also known as a cloud computing server or cloud host. This is a hosting product within the cloud computing service ecosystem that addresses the management difficulties and limited scalability of traditional physical hosting and VPS (Virtual Private Server) services.

[0134] It should be understood that the various forms of the processes shown above can be used to reorder, add, or delete steps. For example, the steps described in the present invention can be performed in parallel, sequentially, or in a different order, as long as the desired results of the technical solution of the present invention can be achieved. This is not limited herein.

[0135] The above specific embodiments do not limit the scope of protection of the present invention. Those skilled in the art will appreciate that various modifications, combinations, sub-combinations, and substitutions may be made based on design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of the present invention are intended to be included within the scope of protection of the present invention.

Claims

1. A method for displaying a pop-up window, characterized in that: The method comprises: When a trigger operation is detected for a routing address associated with the main application page, a display detection operation is performed on the routing address to obtain all page elements of the target page corresponding to the routing address; Detecting whether there is a root element of the target type in each of the page elements, and determining whether the target page has presentation layer integration behavior; When the target page has presentation layer integration behavior, construct a presentation layer rendering container instance, and attach all page elements of the target page to the presentation layer rendering container instance; Detecting whether the element style of each of the page elements is the target style; When the element style of the page element is the target style, obtaining at least one child element associated with the page element, and detecting whether each child element is bound to a click event; When a click event is bound to the sub-element, detecting whether the processing logic of the click event is to control the sub-element to hide the associated page element; When the processing logic of the click event is to control the sub-element to hide the associated page element, determining that the page element is the page element corresponding to the pop-up box; Obtaining the pop-up display data and pop-up display function of the page element corresponding to the pop-up, and passing at least one child element associated with the page element corresponding to the pop-up, the pop-up display data and the pop-up display function of the page element corresponding to the pop-up into the presentation layer rendering container instance, and at the same time, constructing a bridge event for the click function of the page element corresponding to the pop-up; When detecting that a target page element corresponding to a pop-up box in a sub-application page is clicked, the main application obtains the target page element, at least one child element associated with the target page element, and the pop-up box display data corresponding to the target page element from the presentation layer rendering container instance, and obtains the pop-up box display function from the presentation layer rendering container instance through a bridge event associated with the click function of the target page element; Trigger the execution of the pop-up display function, and based on the target page element, at least one sub-element associated with the target page element, and the pop-up display data corresponding to the target page element, render the pop-up on the main application page to achieve pop-up display and pop-up masking of the pop-up in the main application page.

2. The method for displaying a pop-up window according to claim 1, wherein: After rendering the main application page in a pop-up window, the method further includes: When detecting that a target sub-element of the target page element corresponding to the pop-up window is triggered, the main application obtains key-value pairs of the triggered target page element and each sub-element associated with the target page element from the presentation layer rendering container instance, and obtains other page functions through a bridge event associated with the trigger function of the target sub-element of the target page element; Calling the target sub-element of the triggered target page element in the presentation layer rendering container instance as the key object corresponding to the main application page; Trigger the execution of the other page functions, assign values ​​to the pop-up box in the main application page according to the key-value pair of the key object, and complete the linkage of the pop-up box in the main application page and the sub-application page.

3. The method for displaying a pop-up window according to claim 2, wherein: While triggering the execution of the other page functions, it also includes: Detect whether the other page function is a pop-up hidden function; When the other page function is a pop-up box hiding function, the main application obtains the pop-up box hiding function and pop-up box display style of the main application page, and hides the pop-up box of the main application page to achieve the pop-up box hiding of the pop-up box on the main application page.

4. The method for displaying a pop-up window according to claim 1, wherein: While transferring the pop-up box display data and the pop-up box display function of the page element corresponding to the pop-up box into the presentation layer rendering container instance, the method further includes: Get all page functions of the page element corresponding to the pop-up box; Pass all page functions of the page element corresponding to the bullet box, except the bullet box display function, into the presentation layer rendering container instance; A bridge event is constructed for the trigger function of the sub-element of the page element corresponding to the bullet box.

5. The method for displaying a pop-up window according to claim 1, wherein: While constructing the presentation layer rendering container instance, it also includes: Extracting a feature value from the routing address, and determining a container identifier of the presentation layer rendering container instance based on the feature value of the routing address; storing the container identifier and the presentation layer rendering container instance in correspondence; Accordingly, when it is detected that the target page element corresponding to the pop-up box in the sub-application page is clicked, the main application obtains the target page element, at least one child element associated with the target page element, and the pop-up box display data corresponding to the target page element from the presentation layer rendering container instance, including: When detecting that the target page element corresponding to the pop-up box in the sub-application page is clicked, the main application obtains the container identifier of the presentation layer rendering container instance where the target page element is located; The main application obtains the target page element, at least one child element associated with the target page element, and the pop-up display data corresponding to the target page element from the corresponding presentation layer rendering container instance according to the container identifier.

6. A pop-up display device, characterized in that: The device comprises: The routing address detection module is used to detect that the routing address associated with the main application page triggers an operation, perform a display detection operation on the routing address, and obtain all page elements of the target page corresponding to the routing address; A presentation layer integration behavior determination module is used to detect whether there is a root element of the target type in each of the page elements, and determine whether the target page has a presentation layer integration behavior; A presentation layer rendering container instance construction module is used to construct a presentation layer rendering container instance when the target page has presentation layer integration behavior, and attach all page elements of the target page to the presentation layer rendering container instance; An element style detection module, used to detect whether the element style of each of the page elements is a target style; A click event binding detection module is used to obtain at least one child element associated with the page element when the element style of the page element is the target style, and detect whether each of the child elements is bound to a click event; A click event logic detection module is used to detect whether the processing logic of the click event is to control the sub-element to hide the associated page element when the sub-element is bound to the click event; A pop-up page element determination module, configured to determine that the page element is the page element corresponding to the pop-up window when the processing logic of the click event is to control the sub-element to hide the associated page element; A click function bridge event construction module is used to obtain the pop-up box display data and pop-up box display function of the page element corresponding to the pop-up box, and pass at least one child element associated with the page element corresponding to the pop-up box, the pop-up box display data and the pop-up box display function of the page element corresponding to the pop-up box to the presentation layer rendering container instance. At the same time, a bridge event is constructed for the click function of the page element corresponding to the pop-up box; The main application data acquisition module is configured to detect that a target page element corresponding to a pop-up box in a sub-application page is clicked, and the main application obtains the target page element, at least one child element associated with the target page element, and the pop-up box display data corresponding to the target page element from the presentation layer rendering container instance, and obtains the pop-up box display function from the presentation layer rendering container instance through a bridge event associated with the click function of the target page element; The main application pop-up display module is used to trigger the execution of the pop-up display function, and based on the target page element, at least one sub-element associated with the target page element and the pop-up display data corresponding to the target page element, render the pop-up on the main application page to achieve the pop-up display and pop-up mask of the pop-up in the main application page.

7. An electronic device, characterized in that: The electronic device comprises: at least one processor; and a memory communicatively connected to the at least one processor; wherein, The memory stores a computer program that can be executed by the at least one processor, and the computer program is executed by the at least one processor so that the at least one processor can execute the pop-up box display method according to any one of claims 1 to 5.

8. A computer-readable storage medium, characterized in that The computer-readable storage medium stores computer instructions, and the computer instructions are used to enable a processor to implement the pop-up box display method according to any one of claims 1 to 5 when executed.

9. A computer program product, characterized in that The computer program product includes a computer program, and when the computer program is executed by a processor, the computer program implements the pop-up box display method according to any one of claims 1 to 5.

Images