Page processing method and device, computer readable storage medium and electronic device

Abstract

The application discloses a page processing method and device, a computer readable storage medium and an electronic device. The method comprises the following steps: in response to an element click instruction, determining a target element, wherein the element click instruction is triggered when a target object clicks an element in a target page; determining at least one element to be processed from an element stack, wherein the element stack is used for storing elements displayed in the target page, and the element to be processed is an element in the element stack except the target element; determining a target state of each element to be processed in the target page based on the position of each element to be processed in the element stack, wherein the target state comprises a display state and a hidden state. The application solves the technical problem that in the related art, when a user clicks an element on a page, other elements will disappear, so that the user needs to open the elements multiple times, thereby affecting the interaction efficiency of the user and the element interaction.

Description

Technical Field

[0001] This invention relates to the Internet field, and more specifically, to a page processing method, apparatus, computer-readable storage medium, and electronic device. Background Technology

[0002] Web (World Wide Web) front-end technologies are constantly evolving and innovating every year. Users' demand for single-page operations is increasing. Within the same window, multiple positioned elements overlap, and managing these visually overlapping elements is necessary.

[0003] ExtJS is a web-based rich client framework built on standard W3C (World Wide Web Consortium) technologies, primarily used for creating front-end user interfaces. ExtJS imposes restrictions on the stacking of components within a browser window. In ExtJS, components with a stacking hierarchy are mainly menus, windows, and tooltips. In the ExtJS framework implementation, tooltips and menus cannot coexist with windows; only one component can be displayed on the page at a time.

[0004] In front-end development, nested elements are often encountered. Due to ExtJS's handling of menus and tooltips, while there may be a logical order in which content is displayed, the actual interaction may not reflect this logical order. For example, consider two levels of nesting: suppose a menu pops up first, followed by a window. When the user clicks on the overlay or the window while the window is open, the menu is hidden. This means that if the user wants to interact with the previous menu after interacting with the window, they need to re-open the menu, causing inconvenience to the user's interaction with the page.

[0005] There is currently no effective solution to the above problems. Summary of the Invention

[0006] This invention provides a page processing method, apparatus, computer-readable storage medium, and electronic device to at least solve the technical problem in the related art where users need to open elements multiple times, thus affecting the interaction efficiency between users and elements, because when a user clicks on an element on a page, all other elements disappear.

[0007] According to one aspect of the present invention, a page processing method is provided, comprising: responding to an element click instruction and determining a target element, wherein the element click instruction is triggered by a target object clicking an element in a target page; determining at least one element to be processed from an element stack, wherein the element stack is used to store elements displayed in the target page, and the element to be processed is an element in the element stack other than the target element; determining a target state of each element to be processed in the target page based on the position of each element to be processed in the element stack, wherein the target state includes a display state and a hidden state.

[0008] Furthermore, the page processing method also includes: before responding to the element click instruction and determining the target element, responding to the element trigger instruction and determining the element to be displayed, wherein the element trigger instruction is triggered when the target object clicks the target component in the target page, and the target component and the element to be displayed are associated; if the first attribute corresponding to the element to be displayed has a first attribute value, then the element to be displayed is stored in the element stack; and the target state of the element to be displayed is adjusted to the display state.

[0009] Furthermore, the page processing method also includes: sorting the elements to be processed according to the triggering time of the element triggering instruction corresponding to each element to be processed to obtain the target order; and determining the target state of each element to be processed in the target page based on the position of each element to be processed in the element stack according to the target order.

[0010] Furthermore, the page processing method also includes: determining a target element to be processed from at least one element to be processed according to the target order, wherein the target element to be processed is in the first order position among the at least one element to be processed; if the target element to be processed is at the top of the element stack at the current time, then the target element to be processed is removed from the element stack, and the target state of the target element to be processed is determined to be hidden; if the target element to be processed is not at the top of the element stack at the current time, then the target state of the target element to be processed is determined to be displayed; removing the target element to be processed from the target order, and repeating the process of determining the target element to be processed from at least one element to be processed according to the target order until the target order is empty.

[0011] Furthermore, the page processing method also includes: if the element to be displayed has a target attribute, after storing the element to be displayed in the element stack, responding to the page click instruction, determining the position of each element in the element stack, wherein the page click instruction is triggered when the target object clicks the target area in the target page, the target area is the area in the display area of ​​the target page excluding the area corresponding to the target component and the element in the display state; and determining the target state of each element in the element stack in the target page based on the position of each element in the element stack.

[0012] Furthermore, the page processing method also includes: after determining the target state of each element to be processed in the target page based on its position in the element stack, responding to the element close instruction for the target element, determining the target parent element corresponding to the target element, wherein the target parent element is the element below the target element in the element stack; if the second attribute corresponding to the target parent element has a second attribute value, then the target element and the target parent element are removed from the element stack, and the target state of the target element and the target parent element is determined to be hidden; if the second attribute corresponding to the target parent element has a third attribute value, then the target element is removed from the element stack, and the target state of the target element is determined to be hidden.

[0013] Furthermore, the page processing method also includes: if the element to be displayed has a target attribute, then after storing the element to be displayed in the element stack, if the element type of the element to be displayed is a window, then generating a mask layer with the element to be displayed in the target page; responding to the mask layer click instruction, maintaining the state of the elements in the element stack in the target page, wherein the mask layer click instruction is triggered when the target object clicks the mask layer in the target page.

[0014] According to another aspect of the present invention, a page processing apparatus is also provided, comprising: a first determining module, configured to determine a target element in response to an element click instruction, wherein the element click instruction is triggered when a target object clicks an element in a target page; a second determining module, configured to determine at least one element to be processed from an element stack, wherein the element stack is used to store elements displayed in the target page, and the element to be processed is an element in the element stack other than the target element; and a third determining module, configured to determine a target state of each element to be processed in the target page based on the position of each element to be processed in the element stack, wherein the target state includes a display state and a hidden state.

[0015] According to another aspect of the present invention, a computer-readable storage medium is also provided, wherein a computer program is stored in the computer-readable storage medium, and the computer program is configured to execute the page processing method described above when it is run.

[0016] According to another aspect of the present invention, an electronic device is also provided, the electronic device including one or more processors; a memory for storing one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors are configured to run the programs, wherein the programs are configured to execute the page processing method described above during runtime.

[0017] In this embodiment of the invention, when a user clicks on an element on a page, at least a portion of the elements displayed on the page are shown. By responding to an element click instruction, a target element is determined, and then at least one element to be processed is determined from the element stack. Based on the position of each element to be processed in the element stack, the target state of each element to be processed on the target page is determined. The element click instruction is triggered when the target object clicks on an element on the target page. The element stack stores the elements displayed on the target page. The elements to be processed are all elements in the element stack other than the target element. The target state includes a shown state and a hidden state.

[0018] In the above process, by determining the target state of each element on the target page based on its position in the element stack when the target object clicks on an element on the target page, it ensures that at least some elements remain displayed when the user clicks on an element. This allows the user to directly click on the elements that remain displayed, avoiding the problem in related technologies where other elements are hidden when a user clicks on one element, requiring the user to reopen other elements to click on others. This improves the efficiency of user interaction with elements. Furthermore, since elements displayed on the target page first are stored at the bottom of the element stack, and elements displayed later are stored at the top, maintaining the elements displayed on the target page within the element stack ensures a correspondence between the position of each element in the element stack and the display order of the elements on the target page. This makes the target state of the element determined based on its position more consistent with practical application scenarios, improving the applicability of this application.

[0019] Therefore, the solution provided in this application achieves the goal of displaying at least a portion of the elements on the page when a user clicks on an element, thereby improving the technical efficiency of user interaction with elements. It also solves the technical problem in related technologies where other elements disappear when a user clicks on an element, causing the user to need to open elements multiple times, thus affecting the efficiency of user interaction with elements. Attached Figure Description

[0020] The accompanying drawings, which are included to provide a further understanding of the invention and form part of this application, illustrate exemplary embodiments of the invention and, together with their description, serve to explain the invention and do not constitute an undue limitation thereof. In the drawings:

[0021] Figure 1 This is a schematic diagram of an optional page processing method according to an embodiment of the present invention;

[0022] Figure 2 This is a timing diagram of an optional page processing method according to an embodiment of the present invention;

[0023] Figure 3 This is a schematic diagram illustrating the display of elements in an optional target page according to an embodiment of the present invention;

[0024] Figure 4 This is a schematic diagram of an optional element stack according to an embodiment of the present invention;

[0025] Figure 5 This is a schematic diagram of an optional element stack according to an embodiment of the present invention;

[0026] Figure 6 This is a schematic diagram of an optional element stack according to an embodiment of the present invention;

[0027] Figure 7 This is a schematic diagram of an optional page processing apparatus according to an embodiment of the present invention;

[0028] Figure 8 This is a schematic diagram of an optional electronic device according to an embodiment of the present invention. Detailed Implementation

[0029] To enable those skilled in the art to better understand the present invention, the technical solutions of the present invention will be clearly and completely described below with reference to the accompanying drawings of the embodiments of the present invention. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort should fall within the scope of protection of the present invention.

[0030] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this invention are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of the invention described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover a non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0031] Example 1

[0032] According to an embodiment of the present invention, an embodiment of a page processing method is provided. It should be noted that the steps shown in the flowchart in the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions. Furthermore, although a logical order is shown in the flowchart, in some cases, the steps shown or described may be executed in a different order than that shown here.

[0033] Figure 1 This is a schematic diagram of an optional page processing method according to an embodiment of the present invention, such as... Figure 1 As shown, the method includes the following steps:

[0034] Step S101: Respond to the element click instruction and determine the target element, wherein the element click instruction is triggered when the target object clicks an element in the target page.

[0035] Optionally, the target element can be determined by responding to the element click instruction through electronic devices, application systems, servers, or other devices. In this embodiment, the target processing system responds to the element click instruction to determine the target element. The target processing system includes at least the ExtJS framework. ExtJS is a powerful JavaScript library primarily used for creating front-end user interfaces. It organizes visual components by referencing relevant mechanisms. JavaScript is a lightweight, interpreted, or just-in-time (JIT) compiled programming language with function priority. The aforementioned components are equivalent to the elements in this application. ExtJS includes multiple classes, each corresponding to an element on the target page. The element corresponding to each class is a specific instance of that class, i.e., an object corresponding to that class.

[0036] In this embodiment, the aforementioned elements are elements with a stacking hierarchy, and the element types include, but are not limited to, menus, windows, and tooltips. In step S101, the elements displayed on the target page can listen for mouse click events on the target page, and when the target object triggers a mouse click event (i.e., the aforementioned element click instruction), respond to the event and determine the target element clicked by the target object.

[0037] Step S102: Determine at least one element to be processed from the element stack, wherein the element stack is used to store elements displayed on the target page, and the element to be processed is an element in the element stack other than the target element.

[0038] In step S102, as Figure 2As shown, when the target object clicks on the target element on the target page, the element displayed on the target page can determine whether it is the aforementioned target element. If it is not the aforementioned target element, then the element is determined to be the element to be processed, and its corresponding close event (beforeclose) is determined to be triggered. Conversely, if it is the aforementioned target element, then its corresponding close event is determined not to be triggered. The aforementioned element stack (float stack) is a stack. In the element stack, elements displayed on the target page first are stored at the bottom of the element stack, and elements displayed later are stored at the top of the element stack.

[0039] It should be noted that, within the element stack, elements that appear on the target page first are stored in the element stack at the bottom, while elements that appear later are stored at the top. Therefore, by maintaining the elements displayed on the target page within the element stack, it is easier to determine the display order of the elements on the target page.

[0040] Step S103: Based on the position of each element to be processed in the element stack, determine the target state of each element to be processed in the target page, wherein the target state includes a display state and a hidden state.

[0041] In step S103, when a close event corresponding to a certain element to be processed is triggered, the element to be processed can determine its current position in the element stack based on the aforementioned close event, thereby determining the target state of the element to be processed in the target page. When the element to be processed determines that its target state is a display state, it is determined that the element to be processed can still be displayed on the target page; when the element to be processed determines that its target state is a hidden state, it is determined that the element to be processed is hidden in the target page, and the element to be processed is removed from the element stack.

[0042] Optionally, the close events of the elements to be processed are triggered sequentially according to preset triggering rules. Each element to be processed can determine its target state on the target page based on its current position in the element stack.

[0043] Furthermore, when it is determined that the element to be processed is above the target element, the target state of the element to be processed can be determined to be hidden; when it is determined that the element to be processed is below the target element, the target state of the element to be processed can be determined to be displayed. Alternatively, when it is determined that the element to be processed is above the target element and is more than or equal to N elements away from the target element, the target state of the element to be processed can be determined to be hidden; when it is determined that the element to be processed is below the target element, the target state of the element to be processed can be determined to be displayed.

[0044] It should be noted that by determining the target state of each element on the target page based on its position when the target object clicks on an element on the target page, at least some elements remain displayed when the user clicks on an element. This allows the user to directly click on the elements that remain displayed, avoiding the problem in related technologies where other elements are hidden when the user clicks on one element, requiring the user to reopen other elements before clicking on them. This improves the efficiency of user interaction with elements.

[0045] Based on the scheme defined in steps S101 to S103 above, it can be understood that in this embodiment of the invention, when a user clicks on an element on a page, at least a portion of the elements displayed on the page are shown. By responding to an element click instruction, a target element is determined, and then at least one element to be processed is determined from the element stack. Thus, based on the position of each element to be processed in the element stack, the target state of each element to be processed on the target page is determined. Specifically, the element click instruction is triggered when the target object clicks on an element on the target page; the element stack stores the elements displayed on the target page; the elements to be processed are elements in the element stack other than the target element; and the target state includes a displayed state and a hidden state.

[0046] It is noteworthy that in the above process, by determining the target state of each element on the target page based on its position in the element stack when the target object clicks on an element on the target page, at least some elements remain displayed when the user clicks on an element. This allows the user to directly click on the elements that remain displayed, avoiding the problem in related technologies where other elements are hidden when a user clicks on one element, requiring the user to reopen other elements to click on others. This improves the efficiency of user interaction with elements. Furthermore, since elements displayed on the target page first are stored at the bottom of the element stack, and elements displayed later are stored at the top, maintaining the elements displayed on the target page within the element stack ensures a correspondence between the position of each element in the stack and the display order of the elements on the target page. This makes the target state of the element determined based on its position more consistent with practical application scenarios, improving the applicability of this application.

[0047] Therefore, the solution provided in this application achieves the goal of displaying at least a portion of the elements on the page when a user clicks on an element, thereby improving the technical efficiency of user interaction with elements. It also solves the technical problem in related technologies where other elements disappear when a user clicks on an element, causing the user to need to open elements multiple times, thus affecting the efficiency of user interaction with elements.

[0048] In one optional embodiment, before determining the target element in response to an element click instruction, the target processing system can respond to an element trigger instruction to determine the element to be displayed. If the first attribute corresponding to the element to be displayed has a first attribute value, the element to be displayed is stored in the element stack, and then the target state of the element to be displayed is adjusted to the display state. The element trigger instruction is triggered when the target object clicks on a target component on the target page, and the target component and the element to be displayed are associated.

[0049] Optionally, when the triggering element triggers the instruction (i.e. Figure 2 When an element is clicked (opened), each element on the target page responds to the element trigger command and determines the element to be displayed. The aforementioned target component can be a component on the target page containing words such as "Options" or "Edit." For example, when the target object clicks the "Options" component on the target page, the element to be displayed is the options menu; when the target object clicks the "Edit" component on the target page, the element to be displayed is the edit menu. Furthermore, the aforementioned target component can also be an element on the target page with a stacked hierarchy. For example, when the target object clicks option A in the options menu, the element to be displayed is window A or tooltip A, etc.

[0050] Furthermore, the initialization method for each element on the target page can predefine a first target attribute (floatCascade), and the creation method for each element on the target page can pre-assign a value to the first target attribute. Once the elements to be displayed are determined, each element on the target page can determine whether it is one of the aforementioned elements to be displayed. If it is not an element to be displayed, it maintains its current hidden state; if it is an element to be displayed, then... Figure 2As shown, the value of the first target attribute of the element to be displayed can be determined based on the initialization method. The first target attribute is used to determine whether to use the element stack management of the current element. For example, if the first target attribute of the element to be displayed has a first attribute value, the element to be displayed is stored in the element stack using a public method (floatCascadeManager) proposed in the ExtJS framework. The target state of the current element can be adjusted to the display state based on the initialization method, and a hook function can be defined for the element to listen for the close event. Conversely, if the element to be displayed has a fourth attribute value, the element to be displayed is processed according to the original element processing method in ExtJS. The aforementioned hook function is the aforementioned close event. The aforementioned first attribute value can be 1 or "true", and the fourth attribute value can be 0 or "false".

[0051] It should be noted that by determining whether to store the element to be displayed in the element stack based on whether the element to be displayed has the first target attribute, on the one hand, the problem of low applicability caused by storing the element to be displayed in the element stack in all cases is avoided, and on the other hand, the display logic of the elements in the target page is avoided repeatedly, thereby reducing manual costs.

[0052] In an optional embodiment, during the process of determining the target state of each element to be processed in the target page based on its position in the element stack, the target processing system can sort the elements to be processed according to the triggering time of the element triggering instruction corresponding to each element to be processed to obtain the target order, and then determine the target state of each element to be processed in the target page based on the target order and its position in the element stack.

[0053] Optionally, the ExtJS framework in the target processing system can sort the elements to be processed based on the trigger time of the element trigger instruction corresponding to each element to be processed, that is, the display time when each element to be processed starts to be displayed on the target page. The order of the elements to be processed that are closer to the current time will be set to the front, and the order of the elements to be processed that are farther from the current time will be set to the back, thereby achieving the sorting of the elements to be processed and obtaining the target order.

[0054] Furthermore, each element to be processed can determine the time when the aforementioned close event is triggered based on the target order, so that when the close event is triggered, each element to be processed can determine its target state in the target page based on its position in the element stack.

[0055] It should be noted that by determining the target state of each element to be processed in the target page according to the target order, the phenomenon that occurs when the position of an element to be processed in the element stack changes due to the target state of an element that has been determined is avoided, which is caused by simultaneously determining the target state of all elements to be processed in the target page. This results in the need to re-determine the target state of other elements to be processed, thereby improving processing efficiency.

[0056] In one optional embodiment, during the process of determining the target state of each element in the target page based on its position in the element stack according to the target order, the target processing system can determine the target element to be processed from at least one element according to the target order. If the target element to be processed is currently at the top of the element stack, it is removed from the element stack, and its target state is determined to be hidden. If the target element to be processed is not currently at the top of the element stack, its target state is determined to be displayed. Then, the target element is removed from the target order, and the process of determining the target element from at least one element according to the target order is repeated until the target order is empty. The target element to be processed is in a first order position among the at least one element to be processed.

[0057] Specifically, when a certain element to be processed is determined to be in the first position in the target order according to the target order, that is, when it is the first in the target order, the element to be processed can identify itself as the target element to be processed, thereby triggering the close event corresponding to the element.

[0058] Furthermore, such as Figure 2 As shown, the target element to be processed can be determined based on the corresponding close event using the top element determination method (isTopActiveItem) in the aforementioned element stack management method (floatCascadeManager) to determine whether the target element to be processed is currently at the top of the element stack. Optionally, if it is at the top of the element stack, the target element to be processed is removed from the element stack and hidden from the target page; if it is not at the top of the element stack, no operation is performed, that is, the target state of the element is maintained as the displayed state.

[0059] Furthermore, after the target element is removed from the element stack, the target element can dispatch a target event (cascadehide) for subsequent operations. The target event can be predefined by the worker to perform the processing on the target element as desired by the worker.

[0060] Optionally, after determining the target state of the target element to be processed, the ExtJS framework can remove the target element from the target order to obtain an updated target order. Then, other elements whose target states are not yet determined will determine their target elements again based on the updated target order, and the target elements will then determine their own target states. Figure 2 The process involves determining whether the next top element of the stack needs to be hidden. Based on the target state, if it is determined that the element needs to be hidden, it is removed from the element stack; otherwise, the current state is maintained, and the element is removed from the target order in the same way. This process of updating the target order and determining the target state of the elements to be processed is repeated until the target order is empty. At this point, it indicates that the target state of all elements to be processed has been determined.

[0061] Optionally, a specific embodiment of the method for determining the target state of each element to be processed may be described. For example, when a user (i.e., the target object) sequentially triggers element trigger commands for menus A, B, and C on the target page, one method for displaying menus A, B, and C on the target page may be as follows: Figure 3 As shown, the stack positions of menus A, B, and C in the element stack can be represented as follows: Figure 4 As shown, where, Figure 4 The top of the stack is the top element, and the bottom is the bottom element. Afterwards, if the user clicks on an element in menu C, both menus B and A will trigger their close events. Furthermore, during the triggering of the close events for menus B and A, since menu B is displayed after menu A, menu B can identify itself as the target element and trigger its close event first. Then, if... Figure 4 As shown, if menu B is not at the top of the element stack at the current time, then menu B will remain displayed and will not be hidden.

[0062] Furthermore, once menu B has determined that it has completed its target state, menu A can identify itself as the target element to be processed and trigger a close event. Then, as... Figure 4 As shown, if menu A is not currently at the top of the element stack, then menu A will remain displayed and will not be hidden.

[0063] Optionally, after displaying menus A, B, and C, if the user clicks on an element in menu B, both menus C and A will trigger their close events. Furthermore, during the triggering of the close events for menus C and A, since menu C is displayed after menu A, menu C can identify itself as the target element and trigger its close event first. Afterwards, if... Figure 4As shown, if menu C is determined to be at the top of the element stack at the current time, then menu C will be removed from the element stack and hidden from the target page. The element stack after deleting menu C is as follows: Figure 5 As shown.

[0064] Furthermore, once menu C has determined that it has completed its target state, menu A can identify itself as the target element to be processed and trigger a close event. Then, as... Figure 5 As shown, if menu A is not currently at the top of the element stack, then menu A will remain displayed and will not be hidden.

[0065] It should be noted that by hiding the target element when it is at the top of the element stack, and determining the target state of the target element as displayed when it is not at the top of the element stack, the elements displayed before the user click on an element will not be hidden, while the elements displayed after the user click on the element will be hidden. This improves the efficiency of user interaction with elements on the target page and better reflects the application scenarios in real-world applications, thus enhancing the applicability of this application.

[0066] In one optional embodiment, if the element to be displayed has a target attribute, after storing the element to be displayed in the element stack, in response to a page click command, the position of each element in the element stack is determined, and based on the position of each element in the element stack, the target state of each element in the element stack on the target page is determined. The page click command is triggered when the target object clicks on a target area on the target page. The target area is the display area of ​​the target page excluding the areas corresponding to the target component and elements in the display state.

[0067] Optionally, the aforementioned target area can be a blank area of ​​the target page, meaning that after clicking the target area, no element will pop up on the target page or the position of the element on the page will be updated (e.g., from being partially covered by other elements to not being covered by other elements).

[0068] Specifically, when the target object clicks on the target area of ​​the target page, the ExtJS framework sorts each element in the element stack to obtain a second target order. Based on this second target order and the position of each element in the element stack, the target state of each element in the element stack on the target page is determined. The method for determining the second target order is the same as the method for determining the target order described above, and the method for determining the target state of each element in the element stack on the target page is the same as the method for determining the target state of each element to be processed on the target page described above; therefore, they will not be repeated here.

[0069] Optionally, a specific embodiment will be used to describe the method for determining the target state of each element in the element stack under the aforementioned circumstances. For example, when a user (i.e., the target object) sequentially triggers element trigger commands for menus A, B, and C on the target page, one method for displaying menus A, B, and C on the target page can be as follows: Figure 3 As shown, the stack positions of menus A, B, and C in the element stack can be represented as follows: Figure 4 As shown. Afterwards, if the user triggers a page click command, menus C, B, and A will all trigger their close events. Furthermore, during the triggering of the close events for menus C, B, and A, since menu C is displayed after menus A and B, menu C can identify itself as the target element to be processed and will trigger its close event first. Then, as... Figure 4 As shown, if menu C is determined to be at the top of the element stack at the current time, then menu C will be removed from the element stack and hidden from the target page.

[0070] Furthermore, once menu C has determined that it has completed its target state, menu B can identify itself as the target element to be processed and trigger a close event. Then, as... Figure 5 As shown, after menu C is deleted from the element stack, it can be determined that menu B is at the top of the element stack at the current time. Therefore, menu B is deleted from the element stack and hidden from the target page.

[0071] Furthermore, once menu B has determined that it has completed its target state, menu A can identify itself as the target element to be processed and trigger the close event. Then, as... Figure 6 As shown, after menu B is deleted from the element stack, menu A is determined to be at the top of the element stack at the current time. Therefore, menu A is deleted from the element stack and hidden from the target page. In other words, when the target object clicks on the target area of ​​the target page, all elements on the target page are hidden.

[0072] It should be noted that by determining the position and target state of each element in the element stack when the target object clicks on the target area of ​​the target page, the target state of each element displayed on the target page can be determined when the user clicks on a blank area of ​​the page, thereby improving the applicability of this application and facilitating a better user experience.

[0073] In one optional embodiment, after determining the target state of each element in the target page based on its position in the element stack, the target processing system can respond to an element close command for the target element, determine the target parent element corresponding to the target element, and if the second attribute corresponding to the target parent element has a second attribute value, then remove the target element and the target parent element from the element stack, and determine that the target state of the target element and the target parent element is hidden. If the second attribute corresponding to the target parent element has a third attribute value, then remove the target element from the element stack, and determine that the target state of the target element is hidden. Here, the target parent element is the element below the target element in the element stack.

[0074] Optionally, a second target attribute (cascadeAutoHide) can be predefined in the initialization method corresponding to each element in the target page, and the attribute value of the second target attribute can be pre-assigned in the creation method corresponding to each element in the target page. When the element close instruction for the target element is triggered, all elements in the element stack except the target element can determine whether they are neighboring elements below the target element in the element stack. If the aforementioned condition is met, it can be determined that the element is the target parent element corresponding to the target element. Then, the target parent element can determine whether it has the second target attribute. The second target attribute is used to determine whether the current element is automatically hidden after its child elements are hidden. For example, if the second attribute corresponding to the target parent element has a second attribute value, the target parent element is hidden at the same time as the target element, and both the target element and the target parent element are removed from the element stack. Conversely, if the second attribute corresponding to the target parent element has a third attribute value, only the target element is hidden and only the target element is removed from the element stack. It should also be noted that when the aforementioned element-closing instruction for the target element is triggered, when the target element is closed, all elements above the target element in the element stack will be hidden and removed from the element stack according to the aforementioned method. Here, the aforementioned child elements represent neighboring elements above the target element in the element stack, and the aforementioned second attribute value can be 1 or "true", while the third attribute value can be 0 or "false".

[0075] Optionally, a specific embodiment is used to describe the processing method of the target parent element when a closed instruction is triggered. For example, when a user (i.e., the target object) triggers instructions for elements A, B, and C sequentially on the target page, one way to display menus A, B, and C on the target page is as follows: Figure 3 As shown, the stack positions of menus A, B, and C in the element stack can be represented as follows: Figure 4As shown. Subsequently, if the user triggers the element close command for menu B (i.e., the aforementioned target element), the close events for menu C and menu A will also be triggered. Based on the close events, menu C can be hidden and removed from the element stack.

[0076] Next, in response to the element close instruction on the target element, the target element is also hidden and removed from the element stack. At this point, since menu A is the target parent element corresponding to menu B, it is determined whether menu A has a second target attribute. If menu A has a second target attribute, menu A is hidden and removed from the element stack; otherwise, if menu A does not have a second target attribute, the display state of menu A is maintained.

[0077] It should be noted that by determining whether the target parent element is also hidden when the target element is closed, the convenience of user interaction with elements on the target page is improved, thereby enhancing the user experience.

[0078] In one optional embodiment, if the element to be displayed has a target attribute, after storing the element to be displayed in the element stack, if the element type of the element to be displayed is a window, the target processing system can generate a mask layer with the element to be displayed in the target page. Then, the target processing system can respond to the mask layer click instruction to maintain the state of the elements in the element stack in the target page. The mask layer click instruction is triggered when the target object clicks the mask layer in the target page.

[0079] Optionally, the target processing system can determine the element type of the element to be displayed when displaying the element on the target page. If the element type of the element to be displayed is determined to be a window, a mask layer can be generated on the target page to cover the element displayed before the element to be displayed.

[0080] Furthermore, when a user clicks on the overlay in the target page, the target processing system can respond to the overlay click instruction and maintain the current state of the elements in the element stack on the target page.

[0081] It should be noted that by not hiding elements on the target page when a user clicks on the overlay, this avoids the problem in related technologies where elements below the overlay are also hidden when a user clicks on it, which would require the user to repeatedly open the elements and thus affect the interaction efficiency.

[0082] Therefore, as users' demand for single-page operations increases, the solution provided in this application manages elements using an element stack. This achieves the goal of displaying at least a portion of the elements on the page when a user clicks on a certain element. This avoids users repeatedly clicking on stacked elements when single-page operations are complex, thus improving the technical efficiency of user interaction with elements. It also solves the technical problem in related technologies where clicking on a certain element causes other elements to disappear, requiring users to open elements multiple times, which in turn affects the efficiency of user interaction with elements.

[0083] Example 2

[0084] According to an embodiment of the present invention, a page processing apparatus is provided, wherein, Figure 7 This is a schematic diagram of an optional page processing apparatus according to an embodiment of the present invention, such as... Figure 7 As shown, the device includes:

[0085] The first determining module 701 is used to respond to an element click instruction and determine the target element, wherein the element click instruction is triggered when the target object clicks an element in the target page.

[0086] In this embodiment, the aforementioned elements are elements with a stacking hierarchy, and the element types include, but are not limited to, menus, windows, and tooltips. The first determining module can control the elements displayed on the target page to listen for mouse click events on the target page, and when the target object triggers a mouse click event (i.e., the aforementioned element click instruction), it responds to the event and determines the target element clicked by the target object.

[0087] The second determining module 702 is used to determine at least one element to be processed from the element stack, wherein the element stack is used to store elements displayed on the target page, and the element to be processed is an element in the element stack other than the target element.

[0088] like Figure 2 As shown, when the target object clicks on the target element on the target page, the second determining module can control the element displayed on the target page to determine whether it is the aforementioned target element. If it is not the aforementioned target element, it is determined that the element is an element to be processed, and the corresponding close event (beforeout) is determined to be triggered. Conversely, if it is the aforementioned target element, the corresponding close event is determined not to be triggered. The aforementioned element stack (float stack) is a stack where elements displayed on the target page first are stored at the bottom, and elements displayed later are stored at the top.

[0089] It should be noted that, within the element stack, elements that appear on the target page first are stored in the element stack at the bottom, while elements that appear later are stored at the top. Therefore, by maintaining the elements displayed on the target page within the element stack, it is easier to determine the display order of the elements on the target page.

[0090] The third determining module 703 is used to determine the target state of each element to be processed in the target page based on the position of each element to be processed in the element stack, wherein the target state includes a display state and a hidden state.

[0091] Optionally, when a close event corresponding to a pending element is triggered, the third determining module can control the pending element to determine its current position in the element stack based on the aforementioned close event, thereby determining the target state of the pending element in the target page. When the pending element determines its target state to be displayed, it is determined that the pending element can still be displayed on the target page; when the pending element determines its target state to be hidden, it is determined that the pending element is hidden in the target page, and the pending element is removed from the element stack.

[0092] Optionally, the close events of the elements to be processed are triggered sequentially according to preset triggering rules. Each element to be processed can determine its target state on the target page based on its current position in the element stack.

[0093] Furthermore, when it is determined that the element to be processed is above the target element, the target state of the element to be processed can be determined to be hidden; when it is determined that the element to be processed is below the target element, the target state of the element to be processed can be determined to be displayed. Alternatively, when it is determined that the element to be processed is above the target element and is more than or equal to N elements away from the target element, the target state of the element to be processed can be determined to be hidden; when it is determined that the element to be processed is below the target element, the target state of the element to be processed can be determined to be displayed.

[0094] It is noteworthy that in the above process, by determining the target state of each element on the target page based on its position in the element stack when the target object clicks on an element on the target page, at least some elements remain displayed when the user clicks on an element. This allows the user to directly click on the elements that remain displayed, avoiding the problem in related technologies where other elements are hidden when a user clicks on one element, requiring the user to reopen other elements to click on others. This improves the efficiency of user interaction with elements. Furthermore, since elements displayed on the target page first are stored at the bottom of the element stack, and elements displayed later are stored at the top, maintaining the elements displayed on the target page within the element stack ensures a correspondence between the position of each element in the stack and the display order of the elements on the target page. This makes the target state of the element determined based on its position more consistent with practical application scenarios, improving the applicability of this application.

[0095] Therefore, the solution provided in this application achieves the goal of displaying at least a portion of the elements on the page when a user clicks on an element, thereby improving the technical efficiency of user interaction with elements. It also solves the technical problem in related technologies where other elements disappear when a user clicks on an element, causing the user to need to open elements multiple times, thus affecting the efficiency of user interaction with elements.

[0096] It should be noted that the first determining module 701, the second determining module 702 and the third determining module 703 mentioned above correspond to steps S101 to S103 in the above embodiments. The examples and application scenarios implemented by the three modules and the corresponding steps are the same, but are not limited to the content disclosed in the above embodiment 1.

[0097] Optionally, the page processing device further includes: a fourth determining module, used to respond to an element triggering instruction and determine the element to be displayed, wherein the element triggering instruction is triggered when the target object clicks on the target component in the target page, and the target component and the element to be displayed are associated; a storage module, used to store the element to be displayed in the element stack if the first attribute corresponding to the element to be displayed has a first attribute value; and an adjusting module, used to adjust the target state of the element to be displayed to the display state.

[0098] Optionally, when the triggering element triggers the instruction (i.e. Figure 2When an element is clicked (opened), the fourth determining module can control each element on the target page to respond to the element trigger command and determine the element to be displayed. The aforementioned target component can be a component on the target page containing words such as "Options" or "Edit." For example, when the target object clicks the "Options" component on the target page, the element to be displayed can be determined to be the options menu; when the target object clicks the "Edit" component on the target page, the element to be displayed can be determined to be the edit menu. Furthermore, the aforementioned target component can also be an element on the target page with a stacked hierarchy. For example, when the target object clicks option A in the options menu, the element to be displayed can be determined to be window A or tooltip A, etc.

[0099] Furthermore, the initialization method for each element on the target page can predefine a first target attribute (floatCascade), and the creation method for each element on the target page can predefine the attribute value of the first target attribute. Once the element to be displayed is determined, the adjustment module can control each element on the target page to determine whether it is one of the aforementioned elements to be displayed. If it is not an element to be displayed, it maintains its current hidden state; if it is an element to be displayed, then... Figure 2 As shown, the storage module can control the element to be displayed to determine the value of its first target attribute based on the initialization method. The first target attribute is used to determine whether to use the element stack management of the current element. For example, if the first target attribute of the element to be displayed has a first attribute value, the element to be displayed is stored in the element stack using a public method (floatCascadeManager) proposed in the ExtJS framework. The module can also adjust the target state of the current element to the display state based on the initialization method and define a hook function for the element to listen for the close event. Conversely, if the element to be displayed has a fourth attribute value, the element to be displayed is processed according to the original element processing method in ExtJS. The aforementioned hook function is the aforementioned close event. The first attribute value can be 1 or "true", and the fourth attribute value can be 0 or "false".

[0100] It should be noted that by determining whether to store the element to be displayed in the element stack based on whether the element to be displayed has the first target attribute, on the one hand, the problem of low applicability caused by storing the element to be displayed in the element stack in all cases is avoided, and on the other hand, the display logic of the elements in the target page is avoided repeatedly, thereby reducing manual costs.

[0101] Optionally, the third determining module further includes: a sorting unit, used to sort the elements to be processed according to the triggering time of the element triggering instruction corresponding to each element to be processed, to obtain the target order; and a determining unit, used to determine the target state of each element to be processed in the target page based on the position of each element to be processed in the element stack according to the target order.

[0102] Optionally, the sorting unit can sort the elements according to the trigger time of the element trigger instruction corresponding to each element to be processed, that is, the display time when each element to be processed starts to be displayed on the target page. The sorting unit will set the order of the elements to be processed that are closer to the current time to the front, and the order of the elements to be processed that are farther from the current time to the back, thereby sorting the elements to be processed and obtaining the target order.

[0103] Furthermore, the determining unit can control each element to be processed to determine the time when the aforementioned closing event is triggered according to the target order, so that when the closing event is triggered, each element to be processed determines its target state in the target page according to its position in the element stack.

[0104] It should be noted that by determining the target state of each element to be processed in the target page according to the target order, the phenomenon that occurs when the position of an element to be processed in the element stack changes due to the target state of an element that has been determined is avoided, which is caused by simultaneously determining the target state of all elements to be processed in the target page. This results in the need to re-determine the target state of other elements to be processed, thereby improving processing efficiency.

[0105] Optionally, the determining unit further includes: a first determining submodule, used to determine a target element to be processed from at least one element to be processed according to the target order, wherein the target element to be processed is in a first order position among the at least one element to be processed; a second determining submodule, used to remove the target element to be processed from the element stack if the target element to be processed is at the top of the element stack at the current time, and determine the target state of the target element to be processed as a hidden state; a third determining submodule, used to determine the target state of the target element to be processed as a displayed state if the target element to be processed is not at the top of the element stack at the current time; and a fourth determining submodule, used to remove the target element to be processed from the target order, and repeatedly execute the process of determining the target element to be processed from at least one element to be processed according to the target order until the target order is empty.

[0106] Specifically, when the first determining submodule controls a certain element to be processed to determine that it is in the first order position in the target order, that is, when it is the first in the target order, the element to be processed can determine itself as the target element to be processed, thereby triggering the closing event corresponding to the element.

[0107] Furthermore, such as Figure 2 As shown, the second and third determining submodules can control the target element to be processed to determine whether it is at the top of the element stack at the current time based on the corresponding close event using the top element judgment method (isTopActiveItem) in the aforementioned element stack management method (floatCascadeManager). Optionally, if it is at the top of the element stack, the second determining submodule can remove the target element from the element stack and hide it from the target page; if it is not at the top of the element stack, the third determining submodule can do nothing, that is, maintain the target state of the element as displayed.

[0108] Furthermore, after removing the target element from the element stack, the second determining submodule can control the target element to dispatch a target event (cascadehide) for subsequent operations. The target event can be predefined by the worker to perform the processing desired by the worker on the target element.

[0109] Optionally, after determining the target state of the target element to be processed, the fourth determining submodule can remove the target element to be processed from the target order to obtain an updated target order. Then, the fourth determining submodule controls other elements to be processed whose target states have not yet been determined to re-determine the target element to be processed based on the updated target order, and controls the target element to determine its own target state, that is... Figure 2 The first step involves determining whether the next top element of the stack needs to be hidden. Based on the target state, if it is determined that the element needs to be hidden, it is removed from the element stack; otherwise, the current state is maintained, and the element is removed from the target order in the same way. The fourth determination submodule repeats the aforementioned update operations on the target order and the determination operations on the target state of the target elements to be processed until the target order is empty. At this point, it indicates that the target state of all elements to be processed has been determined.

[0110] Optionally, a specific embodiment of the method for determining the target state of each element to be processed may be described. For example, when a user (i.e., the target object) sequentially triggers element trigger commands for menus A, B, and C on the target page, one method for displaying menus A, B, and C on the target page may be as follows: Figure 3 As shown, the stack positions of menus A, B, and C in the element stack can be represented as follows: Figure 4 As shown, where, Figure 4The top of the stack is the top element, and the bottom is the bottom element. Afterwards, if the user clicks on an element in menu C, both menus B and A will trigger their close events. Furthermore, during the triggering of the close events for menus B and A, since menu B is displayed after menu A, menu B can identify itself as the target element and trigger its close event first. Then, if... Figure 4 As shown, if menu B is not at the top of the element stack at the current time, then menu B will remain displayed and will not be hidden.

[0111] Furthermore, once menu B has determined that it has completed its target state, menu A can identify itself as the target element to be processed and trigger a close event. Then, as... Figure 4 As shown, if menu A is not currently at the top of the element stack, then menu A will remain displayed and will not be hidden.

[0112] Optionally, after displaying menus A, B, and C, if the user clicks on an element in menu B, both menus C and A will trigger their close events. Furthermore, during the triggering of the close events for menus C and A, since menu C is displayed after menu A, menu C can identify itself as the target element and trigger its close event first. Afterwards, if... Figure 4 As shown, if menu C is determined to be at the top of the element stack at the current time, then menu C will be removed from the element stack and hidden from the target page. The element stack after deleting menu C is as follows: Figure 5 As shown.

[0113] Furthermore, once menu C has determined that it has completed its target state, menu A can identify itself as the target element to be processed and trigger a close event. Then, as... Figure 5 As shown, if menu A is not currently at the top of the element stack, then menu A will remain displayed and will not be hidden.

[0114] It should be noted that by hiding the target element when it is at the top of the element stack, and determining the target state of the target element as displayed when it is not at the top of the element stack, the elements displayed before the user click on an element will not be hidden, while the elements displayed after the user click on the element will be hidden. This improves the efficiency of user interaction with elements on the target page and better reflects the application scenarios in real-world applications, thus enhancing the applicability of this application.

[0115] Optionally, the page processing device further includes: a fifth determining module, used to respond to a page click instruction and determine the position of each element in the element stack, wherein the page click instruction is triggered when the target object clicks on a target area in the target page, and the target area is the area in the display area of ​​the target page excluding the areas corresponding to the target component and elements in the display state; and a sixth determining module, used to determine the target state of each element in the element stack in the target page based on the position of each element in the element stack.

[0116] Optionally, the aforementioned target area can be a blank area of ​​the target page, meaning that after clicking the target area, no element will pop up on the target page or the position of the element on the page will be updated (e.g., from being partially covered by other elements to not being covered by other elements).

[0117] Specifically, when the target object clicks on the target area of ​​the target page, the sixth determining module sorts each element in the element stack to obtain a second target order. Based on this second target order and the position of each element in the element stack, the target state of each element in the element stack on the target page is determined. The method for determining the second target order is the same as the method for determining the target order described above, and the method for determining the target state of each element in the element stack on the target page is the same as the method for determining the target state of each element to be processed on the target page described above; therefore, these methods will not be repeated here.

[0118] Optionally, a specific embodiment will be used to describe the method for determining the target state of each element in the element stack under the aforementioned circumstances. For example, when a user (i.e., the target object) sequentially triggers element trigger commands for menus A, B, and C on the target page, one method for displaying menus A, B, and C on the target page can be as follows: Figure 3 As shown, the stack positions of menus A, B, and C in the element stack can be represented as follows: Figure 4 As shown. Afterwards, if the user triggers a page click command, menus C, B, and A will all trigger their close events. Furthermore, during the triggering of the close events for menus C, B, and A, since menu C is displayed after menus A and B, menu C can identify itself as the target element to be processed and will trigger its close event first. Then, as... Figure 4 As shown, if menu C is determined to be at the top of the element stack at the current time, then menu C will be removed from the element stack and hidden from the target page.

[0119] Furthermore, once menu C has determined that it has completed its target state, menu B can identify itself as the target element to be processed and trigger a close event. Then, as... Figure 5As shown, after menu C is deleted from the element stack, it can be determined that menu B is at the top of the element stack at the current time. Therefore, menu B is deleted from the element stack and hidden from the target page.

[0120] Furthermore, once menu B has determined that it has completed its target state, menu A can identify itself as the target element to be processed and trigger the close event. Then, as... Figure 6 As shown, after menu B is deleted from the element stack, menu A is determined to be at the top of the element stack at the current time. Therefore, menu A is deleted from the element stack and hidden from the target page. In other words, when the target object clicks on the target area of ​​the target page, all elements on the target page are hidden.

[0121] It should be noted that by determining the position and target state of each element in the element stack when the target object clicks on the target area of ​​the target page, the target state of each element displayed on the target page can be determined when the user clicks on a blank area of ​​the page, thereby improving the applicability of this application and facilitating a better user experience.

[0122] Optionally, the page processing device further includes: a seventh determining module, used to respond to an element close instruction for the target element and determine the target parent element corresponding to the target element, wherein the target parent element is an element located below the target element in the element stack; an eighth determining module, used to remove the target element and the target parent element from the element stack if the second attribute corresponding to the target parent element has a second attribute value, and determine that the target state of the target element and the target parent element is a hidden state; and a ninth determining module, used to remove the target element from the element stack if the second attribute corresponding to the target parent element has a third attribute value, and determine that the target state of the target element is a hidden state.

[0123] Optionally, a second target attribute (cascadeAutoHide) can be predefined in the initialization method corresponding to each element in the target page, and the attribute value of the second target attribute can be pre-assigned in the creation method corresponding to each element in the target page. When the element close instruction for the target element is triggered, the seventh determining module can control the elements in the element stack other than the target element to determine whether they are neighboring elements below the target element in the element stack. If the aforementioned conditions are met, it can be determined that the element is the target parent element corresponding to the target element. Then, the eighth and ninth determining modules can control the target parent element to determine whether it has the second target attribute. The second target attribute is used to determine whether the current element is automatically hidden after its child elements are hidden. For example, if the second attribute corresponding to the target parent element has a second attribute value, the eighth determining module hides the target parent element while hiding the target element, and removes the target element and the target parent element from the element stack. Conversely, if the second attribute corresponding to the target parent element has a third attribute value, the ninth determining module only hides the target element and only removes the target element from the element stack. It should also be noted that when the aforementioned element-closing instruction for the target element is triggered, when the target element is closed, all elements above the target element in the element stack will be hidden and removed from the element stack according to the aforementioned method. Here, the aforementioned child elements represent neighboring elements above the target element in the element stack, and the aforementioned second attribute value can be 1 or "true", while the third attribute value can be 0 or "false".

[0124] Optionally, a specific embodiment is used to describe the processing method of the target parent element when a closed instruction is triggered. For example, when a user (i.e., the target object) triggers instructions for elements A, B, and C sequentially on the target page, one way to display menus A, B, and C on the target page is as follows: Figure 3 As shown, the stack positions of menus A, B, and C in the element stack can be represented as follows: Figure 4 As shown. Subsequently, if the user triggers the element close command for menu B (i.e., the aforementioned target element), the close events for menu C and menu A will also be triggered. Based on the close events, menu C can be hidden and removed from the element stack.

[0125] Next, in response to the element close instruction on the target element, the target element is also hidden and removed from the element stack. At this point, since menu A is the target parent element corresponding to menu B, it is determined whether menu A has a second target attribute. If menu A has a second target attribute, menu A is hidden and removed from the element stack; otherwise, if menu A does not have a second target attribute, the display state of menu A is maintained.

[0126] It should be noted that by determining whether the target parent element is also hidden when the target element is closed, the convenience of user interaction with elements on the target page is improved, thereby enhancing the user experience.

[0127] Optionally, the page processing device further includes: a generation module, used to generate a mask layer on the target page for the element to be displayed if the element type of the element to be displayed is a window; and a processing module, used to respond to a mask layer click instruction and maintain the state of the elements in the element stack on the target page, wherein the mask layer click instruction is triggered when the target object clicks the mask layer on the target page.

[0128] Optionally, the generation module can determine the element type of the element to be displayed when the target page displays the element to be displayed. If the element type of the element to be displayed is determined to be a window, a mask layer can be generated on the target page to cover the element displayed before the aforementioned element to be displayed.

[0129] Furthermore, when a user clicks on the overlay in the target page, the processing module can respond to the overlay click command and maintain the current state of the elements in the element stack on the target page.

[0130] It should be noted that by not hiding elements on the target page when a user clicks on the overlay, this avoids the problem in related technologies where elements below the overlay are also hidden when a user clicks on it, which would require the user to repeatedly open the elements and thus affect the interaction efficiency.

[0131] Therefore, as users' demand for single-page operations increases, the solution provided in this application manages elements using an element stack. This achieves the goal of displaying at least a portion of the elements on the page when a user clicks on a certain element. This avoids users repeatedly clicking on stacked elements when single-page operations are complex, thus improving the technical efficiency of user interaction with elements. It also solves the technical problem in related technologies where clicking on a certain element causes other elements to disappear, requiring users to open elements multiple times, which in turn affects the efficiency of user interaction with elements.

[0132] Example 3

[0133] According to another aspect of the present invention, a computer-readable storage medium is also provided, wherein a computer program is stored in the computer-readable storage medium, and the computer program is configured to execute the page processing method described above when it is run.

[0134] Example 4

[0135] According to another aspect of the present invention, an electronic device is also provided, wherein, Figure 8 This is a schematic diagram of an optional electronic device according to an embodiment of the present invention, such as... Figure 8 As shown, the electronic device includes one or more processors; and a memory for storing one or more programs, which, when executed by one or more processors, cause the one or more processors to run the programs, wherein the programs are configured to execute the page processing method described above during runtime.

[0136] The sequence numbers of the above embodiments of the present invention are for descriptive purposes only and do not represent the superiority or inferiority of the embodiments.

[0137] In the above embodiments of the present invention, the descriptions of each embodiment have different focuses. For parts not described in detail in a certain embodiment, please refer to the relevant descriptions of other embodiments.

[0138] In the several embodiments provided in this application, it should be understood that the disclosed technical content can be implemented in other ways. The device embodiments described above are merely illustrative; for example, the division of units can be a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the displayed or discussed mutual couplings, direct couplings, or communication connections may be through some interfaces; indirect couplings or communication connections between units or modules may be electrical or other forms.

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

[0140] Furthermore, the functional units in the various embodiments of the present invention can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0141] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods of the various embodiments of the present invention. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, read-only memory (ROM), random access memory (RAM), portable hard drives, magnetic disks, or optical disks.

[0142] The above are merely preferred embodiments of the present invention. It should be noted that those skilled in the art can make various improvements and modifications without departing from the principle of the present invention, and these improvements and modifications should also be considered within the scope of protection of the present invention.

Claims

1. A page processing method, characterized in that, include: Responding to an element click instruction, the target element is determined, wherein the element click instruction is triggered when the target object clicks an element in the target page; At least one element to be processed is determined from the element stack, wherein the element stack is used to store elements displayed on the target page, and the element to be processed is an element in the element stack other than the target element; Based on the position of each element to be processed in the element stack, the target state of each element to be processed in the target page is determined, wherein the target state includes a display state and a hidden state; Based on the position of each element to be processed within the element stack, determine the target state of each element to be processed within the target page, including: Based on the trigger time of the element trigger instruction corresponding to each element to be processed, the elements to be processed are sorted to obtain the target order; Based on the target order, and according to the position of each element to be processed in the element stack, the target state of each element to be processed in the target page is determined. Based on the target order and the position of each element to be processed within the element stack, the target state of each element to be processed in the target page is determined, including: According to the target order, a target element to be processed is determined from the at least one element to be processed, wherein the target element to be processed is in a first order position among the at least one element to be processed; If the target element to be processed is at the top of the element stack at the current time, then the target element to be processed is removed from the element stack, and the target state of the target element to be processed is determined to be the hidden state. If the target element to be processed is not at the top of the element stack at the current time, then the target state of the target element to be processed is determined to be the display state; The target element to be processed is removed from the target order, and the process of determining the target element to be processed from the at least one element to be processed according to the target order is repeated until the target order is empty.

2. The method according to claim 1, characterized in that, Before responding to an element click instruction and determining the target element, the method further includes: Responding to an element trigger command, the element to be displayed is determined, wherein the element trigger command is triggered when the target object clicks on a target component in the target page, and the target component has an association relationship with the element to be displayed; If the first attribute corresponding to the element to be displayed has a first attribute value, then the element to be displayed is stored in the element stack; Adjust the target state of the element to be displayed to the display state.

3. The method according to claim 2, characterized in that, After storing the element to be displayed into the element stack, the method further includes: In response to a page click command, the position of each element in the element stack is determined. The page click command is triggered when the target object clicks on a target area in the target page. The target area is the display area of ​​the target page excluding the areas corresponding to the target component and the elements in the display state. Based on the position of each element in the element stack, the target state of each element in the element stack in the target page is determined.

4. The method according to claim 1, characterized in that, After determining the target state of each element to be processed in the target page based on its position in the element stack, the method further includes: In response to an element close instruction for the target element, determine the target parent element corresponding to the target element, wherein the target parent element is the element below the target element in the element stack; If the second attribute corresponding to the target parent element has a second attribute value, then the target element and the target parent element are removed from the element stack, and the target state of the target element and the target parent element is determined to be the hidden state. If the second attribute corresponding to the target parent element has a third attribute value, then the target element is removed from the element stack, and the target state of the target element is determined to be the hidden state.

5. The method according to claim 2, characterized in that, After storing the element to be displayed into the element stack, the method further includes: If the element to be displayed is of type window, then a mask layer is generated on the target page that is the element to be displayed. In response to a mask layer click command, the elements in the element stack are maintained in the state of the target page, wherein the mask layer click command is triggered when the target object clicks the mask layer in the target page.

6. A page processing apparatus, characterized in that, For performing the method according to any one of claims 1 to 5, comprising: The first determining module is used to respond to an element click instruction and determine the target element, wherein the element click instruction is triggered when the target object clicks an element in the target page; The second determining module is used to determine at least one element to be processed from the element stack, wherein the element stack is used to store elements displayed on the target page, and the element to be processed is an element in the element stack other than the target element; The third determining module is used to determine the target state of each element to be processed in the target page based on the position of each element to be processed in the element stack, wherein the target state includes a display state and a hidden state.

7. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program, wherein the computer program is configured to execute the page processing method according to any one of claims 1 to 5 when it is run.

8. An electronic device, characterized in that, The electronic device includes one or more processors; A memory for storing one or more programs, which, when executed by one or more processors, cause the one or more processors to be configured to run the programs, wherein the programs are configured to execute the page processing method of any one of claims 1 to 5 at runtime.

Images