A method and device for page mask management

By generating mask objects and using mask queues to manage the display and hiding of mask layers, the problem of multiple mask layers blocking each other in web pages is solved, improving user experience and avoiding performance losses.

CN114969589BActive Publication Date: 2025-07-15BEIJING WODONG TIANJUN INFORMATION TECH CO LTD +1
View PDF 2 Cites 0 Cited by

Patent Information

Application Number
CN202210498504.5
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2022-05-09
Publication Date
2025-07-15
Estimated Expiration
2042-05-09

AI Technical Summary

Technical Problem

The problem of multiple mask layers blocking each other in a web page page leads to poor user experience, and existing solutions such as iframe management and traversing DOM documents can lead to performance problems.

Method used

By generating mask objects and inserting mask queues, the display and hiding of mask layers are managed using the display marks of mask objects and prioritization, and a non-maximum suppression algorithm is used to determine mask objects that do not overlap, avoiding traversing DOM documents.

Benefits of technology

The mask layer is not overlapped, which improves the user experience, avoids the performance problems caused by iframes and poor device compatibility, and does not cause rendering lag.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN114969589B_ABST
    Figure CN114969589B_ABST
Patent Text Reader

Abstract

The present invention discloses a method and device for page mask management, which relates to the field of computer technology. A specific implementation of the method includes: in response to a page access request, generating a mask object corresponding to the page access request, and then inserting the mask object into a mask queue; in the case where there are multiple mask objects with overlapping mask positions in the mask queue, setting the display flag of some of the multiple mask objects to a first attribute value; respectively determining a mask layer corresponding to each mask object in the mask queue that does not have the first attribute value, and setting the display flag of the mask object corresponding to the mask layer to a second attribute value, so as to display the mask layer corresponding to the mask object with the second attribute value on the page. This implementation uses a mask queue to manage the generated mask objects, which can solve the problem of mutual occlusion of multiple mask layers, will not cause lags in the rendered page, has good device compatibility, and can improve the user experience.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular, to a method and device for page mask management. Background Art

[0002] Currently, almost all web pages are developed based on componentization, and there are corresponding mask components for the implementation of masks. When different components on the page load different requests, there will be a phenomenon of multiple masks overlapping, which destroys the unity of the page and results in poor user experience.

[0003] Existing methods for solving the problem of multiple mask overlaps include the following: One is to manage multiple masks based on nested iframes, but this will result in many pages being difficult to manage and poor user experience; the other is to record the order of requests through a mask middleware in the case of multiple requests sent using ajax resulting in multiple overlaps, and control the destruction order of masks by traversing the page hierarchy of the DOM document to which the mask belongs or the time when the request is completed. However, traversing the DOM document will cause page lag during rendering and poor user experience. Summary of the Invention

[0004] In view of this, embodiments of the present invention provide a method and device for page mask management. By generating a mask object corresponding to a page access request and inserting the mask object into a mask queue to manage the mask object, the display of non-overlapping mask layers is achieved, the problem of multiple mask overlaps can be solved, and the user experience can be improved.

[0005] To achieve the above object, according to one aspect of the embodiments of the present invention, a method for page mask management is provided, including:

[0006] In response to a page access request, generating a mask object corresponding to the page access request, and then inserting the mask object into a mask queue, where the mask object includes a display flag and a mask position;

[0007] In the case where there are multiple mask objects with overlapping mask positions in the mask queue, setting the display flags of some of the multiple mask objects to a first attribute value so as not to display the mask layer corresponding to the mask object with the first attribute value on the page;

[0008] Respectively determining the mask layers corresponding to each mask object in the mask queue that does not have the first attribute value, and setting the display flags of the mask objects corresponding to the mask layers to a second attribute value so as to display the mask layer corresponding to the mask object with the second attribute value on the page.

[0009] Optionally, the mask object includes a mask priority, and the partial mask object is other mask objects in the multiple mask objects except the mask object with the highest mask priority.

[0010] Optionally, setting the display flag of the partial mask objects in the multiple mask objects to a first attribute value includes:

[0011] Setting the display flag of each mask object in the mask queue to empty, and then traversing each mask object in the mask queue whose display flag is not the first attribute value in descending order of mask priority:

[0012] Determining whether there is a mask object in the mask queue whose mask position overlaps with the mask position of this mask object;

[0013] If so, setting the display flag of the mask object whose mask position overlaps with the mask position of this mask object to the first attribute value, and then traversing the next mask object whose display flag is not the first attribute value;

[0014] Otherwise, traversing the next mask object whose display flag is not the first attribute value.

[0015] Optionally, setting the display flag of the partial mask objects in the multiple mask objects to a first attribute value includes:

[0016] Copying the mask queue to obtain a copied mask queue, and then traversing each mask object in the copied mask queue in descending order of mask priority: determining whether there is a mask object in the copied mask queue whose mask position overlaps with the mask position of this mask object;

[0017] If so, deleting the mask object whose mask position overlaps with the mask position of this mask object from the copied mask queue, and setting the display flag of the deleted mask object in the mask queue to the first attribute value, and then traversing the next mask object in the copied mask queue;

[0018] Otherwise, traversing the next mask object in the copied mask queue.

[0019] Optionally, after respectively determining the mask layers corresponding to each mask object in the mask queue that does not have the first attribute value, including:

[0020] After determining that the display of the mask layer has ended, delete the mask object corresponding to the mask layer from the mask queue to obtain an updated mask queue. In the case where there are multiple mask objects with overlapping mask positions in the updated mask queue, set the display flags of some of the multiple mask objects to a first attribute value, so as not to display the mask layer corresponding to the mask object with the first attribute value on the page. Then, respectively determine the mask layers corresponding to each mask object in the updated mask queue that does not have the first attribute value, and set the display flags of the corresponding mask objects to a second attribute value, so as to display the mask layer corresponding to the mask object with the second attribute value on the page.

[0021] Optionally, before respectively determining the mask layers corresponding to each mask object in the mask queue that does not have the first attribute value, it further includes: confirming that there is no mask layer corresponding to the mask object that does not have the first attribute value in the cache; and

[0022] If there is a mask layer corresponding to the mask object that does not have the first attribute value in the cache, directly obtain the mask layer corresponding to the mask object that does not have the first attribute value from the cache.

[0023] Optionally, the mask object includes a mask type of triggered closing or non-triggered closing;

[0024] Determining that the display of the mask layer has ended includes: when the mask type is non-triggered closing, when the preset display time of the mask layer ends, the mask layer closes, and it is determined that the display of the mask layer has ended; when the mask type is triggered closing, when a trigger closing instruction is received, the mask layer closes, and it is determined that the display of the mask layer has ended.

[0025] According to another aspect of the embodiments of the present invention, there is provided a device for page mask management, including:

[0026] A generation module, in response to a page access request, generates a mask object corresponding to the page access request, and then inserts the mask object into the mask queue. The mask object includes a display flag and a mask position;

[0027] An update module, in the case where there are multiple mask objects with overlapping mask positions in the mask queue, sets the display flags of some of the multiple mask objects to a first attribute value, so as not to display the mask layer corresponding to the mask object with the first attribute value on the page;

[0028] A determination module, respectively determines the mask layers corresponding to each mask object in the mask queue that does not have the first attribute value, and sets the display flags of the mask objects corresponding to the mask layers to a second attribute value, so as to display the mask layer corresponding to the mask object with the second attribute value on the page.

[0029] According to another aspect of the embodiments of the present invention, there is provided an electronic device, including:

[0030] One or more processors;

[0031] A storage device for storing one or more programs,

[0032] When the one or more programs are executed by the one or more processors, the one or more processors implement the method for page mask management provided by the present invention.

[0033] According to still another aspect of the embodiments of the present invention, there is provided a computer-readable medium having a computer program stored thereon, and when the program is executed by a processor, the method for page mask management provided by the present invention is implemented.

[0034] An embodiment of the above invention has the following advantages or beneficial effects: when a page access request is monitored, a mask object corresponding to the page access request is generated, and then the mask object is inserted into a mask queue, and the management of the mask layer is realized by using the mask queue to manage the mask object. For the case of multiple mask objects with overlapping mask positions, the display flag of some mask objects is set to a first attribute value, and the mask layer of the mask objects without the first attribute value is displayed, so as to ensure that non-overlapping mask layers are displayed, solve the problem that multiple mask layers block each other, and the user experience is better. It overcomes the defects of iframe that are unfriendly in use and performance and poor device compatibility, and there is no need to traverse the DOM document, and it will not cause page jitter during rendering.

[0035] The further effects of the above non-conventional optional manner will be described in conjunction with specific embodiments below. BRIEF DESCRIPTION OF THE DRAWINGS

[0036] The drawings are used to better understand the present invention and do not constitute an improper limitation of the present invention. Among them:

[0037] Figure 1 It is a schematic diagram of the main process of a method for page mask management according to an embodiment of the present invention;

[0038] Figure 2 It is a schematic diagram of the main process of another method for page mask management according to an embodiment of the present invention;

[0039] Figure 3 It is a schematic diagram of the main process of still another method for page mask management according to an embodiment of the present invention;

[0040] Figure 4 It is a schematic diagram of the process of a method for page mask management according to an embodiment of the present invention;

[0041] Figure 5 Schematic diagram of the main modules of a page mask management device according to an embodiment of the present invention;

[0042] Figure 6 Exemplary system architecture diagram to which an embodiment of the present invention can be applied;

[0043] Figure 7 Schematic diagram of the structure of a computer system of a terminal device or a server suitable for implementing an embodiment of the present invention. Detailed implementation manners

[0044] The following describes exemplary embodiments of the present invention with reference to the accompanying drawings, including various details of the embodiments of the present invention to facilitate understanding, which should be considered merely exemplary. Therefore, those of ordinary skill in the art should recognize that various changes and modifications can be made to the embodiments described herein without departing from the scope and spirit of the present invention. Similarly, for clarity and conciseness, descriptions of well-known functions and structures are omitted below.

[0045] When a user browses a web page and interacts with the page, a mask is often used to remind the user to perform an operation or wait for the loading of resources. For example, when the user submits a form, a mask layer can be generated on the current page, and the user performs the form submission operation on the mask layer. After the operation is completed, the mask layer is removed. Or, when the user submits a request or waits for a response from the website, a mask layer and a prompt animation or content prompting the user to wait can be generated on the current page, so that the user can perceive the waiting process, visualize the waiting and operation processes for the user, and improve the user experience. However, when there are multiple mask occlusion situations, the mask is opened or closed through the parent-child relationship of iframes, or a mask middleware is used to determine the display order of the masks, and the mask layer is destroyed by traversing the DOM document, resulting in poor mask management effect and thus poor user experience. Based on the above problems, an embodiment of the present invention provides a method for page mask management to solve the problem of mutual occlusion of multiple mask layers and improve the user experience.

[0046] Figure 1 Schematic diagram of the main process of a method for page mask management according to an embodiment of the present invention, as Figure 1 shown, the method for page mask management, which is applied to a client, includes the following steps:

[0047] Step S101: In response to a page access request, generate a mask object corresponding to the page access request, and then insert the mask object into a mask queue. The mask object includes a display flag and a mask position;

[0048] Step S102: When there are multiple mask objects with overlapping mask positions in the mask queue, set the display flag of some of the multiple mask objects to a first attribute value, so as not to display the mask layer corresponding to the mask object with the first attribute value on the page;

[0049] Step S103: Determine the mask layer corresponding to each mask object in the mask queue that does not have the first attribute value respectively, and set the display flag of the mask object corresponding to the mask layer to a second attribute value, so as to display the mask layer corresponding to the mask object with the second attribute value on the page.

[0050] In an embodiment of the present invention, the page access request is a network request sent by the client to the server to request to display a page. The page access request can be one or more. When a page access request is monitored, a mask object corresponding to the page access request is generated, and then the mask layer corresponding to the mask object is created and displayed. Among them, the mask object is an object defined to describe the mask layer to be displayed. Then the generated mask object is inserted into the mask queue, and the mask queue is used to store each generated mask object.

[0051] The mask object includes attributes of a display flag and a mask position. The display flag is used to identify whether the mask layer corresponding to the mask object is being displayed. The display flag includes a first attribute value and a second attribute value. The display flag can be a bool value. The first attribute value indicates not being displayed and can be marked as false; the second attribute value indicates being displayed and can be marked as true.

[0052] When the display flag of the mask object is the first identifier, it indicates that the mask layer corresponding to the mask object is not in the state of being displayed. The mask object with the display flag being the first attribute value can be a mask object for which the corresponding mask layer has not been created (or generated); when the display flag of the mask object is the second attribute value, it indicates that the mask layer corresponding to the mask object is in the state of being displayed, that is, the mask layer corresponding to the mask object has been created and is being displayed.

[0053] Optionally, the mask object further includes a display attribute (such as the display attribute). The display attribute includes an attribute value indicating hiding (such as setting the display attribute to none) and an attribute value indicating display, and is used to represent that the mask layer corresponding to the mask object has been created but the mask layer is in a non-display state. However, due to the appearance of a mask object with a higher mask priority, the display attribute of the created mask layer is modified to a third flag, and it is not necessary to destroy the created mask layer, saving the resources of destruction and creation.

[0054] The masking position of the masking object indicates the position of the generated masking layer corresponding to the masking object, which can be the position coordinates of the masking layer. The masking layer is generally rectangular, and the position of the masking layer can be determined by the lower left corner coordinates and the upper right corner coordinates of the masking layer, or by the upper left corner coordinates and the lower right corner coordinates of the masking layer. Generally, in a two-dimensional coordinate system with the upper left corner of the browser or page as the origin, the masking position can be represented by a quadruple, and the masking position is represented as [x1, y1, x2, y2], where (x1, y1) represents the lower left corner coordinates and (x2, y2) represents the upper right corner coordinates.

[0055] In the embodiments of the present invention, the masking object further includes a masking identifier attribute, which is used to mark the identifier of the masking layer corresponding to the masking object and corresponds one-to-one with the ID attribute of HTML. The masking layer corresponding to the masking object can be determined through the masking identifier.

[0056] When adding the masking object to the masking queue, generally, the masking object is inserted at the end of the masking queue, and then the masking objects in the masking queue can be sorted according to a preset sorting rule to determine the display order of the masking layers corresponding to the masking objects, that is, the masking layer corresponding to the masking object with a higher sorting priority is preferentially displayed.

[0057] In the embodiments of the present invention, the masking object further includes a masking priority, which is used to control whether the masking layer corresponding to the masking object is preferentially displayed or is closed due to the generation of a masking object with a higher priority.

[0058] In the embodiments of the present invention, the masking priority can be custom-configured, so as to realize flexible management of the masking to be displayed or closed.

[0059] In an optional implementation manner, the masking priority can be determined according to the order of page access requests. For example, it can be set that the masking priority of the masking object corresponding to the earlier page access request is higher than that of the later page access request.

[0060] In another optional implementation manner, the masking priority can be a custom priority, and the custom priority can have a mapping relationship with z-index. For example, it can be mapped from the z-index used when creating the masking, which can cover a wider range of application scenarios. The larger the value of z-index, the higher the priority of the generated masking layer, and the masking layer is more located at the top layer. The custom configuration of the masking priority in the embodiments of the present invention will not cause the problem of confusion of multiple masking layers, and can also solve the problem that when the importance of the previous page access request is relatively high, it will not be replaced by the masking generated by the new page access request, improving the user experience. Among them, the masking priority can be defined by numbers. For example, the masking priority can be represented in the order from large to small by numbers to indicate the order from high to low.

[0061] In an embodiment of the present invention, some masking objects are other masking objects among the multiple masking objects except the masking object with the highest masking priority, and the other masking objects can be one or more. When there are multiple masking objects with overlapping masking positions in the masking queue, set the display flag of the other masking objects to the first attribute value, and the display flag of the masking object that overlaps with the masking position of the masking object with the highest masking priority among the multiple masking objects can be set to the first attribute value; when there are no multiple masking objects with overlapping masking positions in the masking queue, such as only one masking object, directly generate a corresponding masking layer based on the masking priority and masking position of the masking object; if there are multiple masking objects, but the masking positions of the multiple masking objects do not overlap, corresponding masking layers can be generated based on the masking priorities and masking positions of the respective masking objects. After generating the masking layer, the display flag of the masking object that generates the masking layer can be set to the second attribute value.

[0062] In an alternative embodiment of the embodiment of the present invention, as Figure 2 shown, setting the display flag of some masking objects among the multiple masking objects to the first attribute value includes:

[0063] Step S201: Set the display flag of each masking object in the masking queue to empty;

[0064] Step S202: Sort the masking objects in the masking queue in descending order of masking priority;

[0065] Step S203: Traverse the i-th masking object in the masking queue whose display flag is not the first attribute value, i = 1: Determine whether there is a masking object in the masking queue whose masking position overlaps with the masking position of the i-th masking object whose display flag is not the first attribute value; if so, execute Step S204; if not, execute Step S205;

[0066] Step S204: Set the display flag of the masking object that overlaps with the masking position of the i-th masking object whose display flag is not the first attribute value to the first attribute value, and then execute Step S205;

[0067] Step S205: Determine whether i is equal to N, if so, execute Step S206; if not, set i = i + 1 and execute Step S203; where N is the number of masking objects in the masking queue whose display flags are not the first attribute value;

[0068] Step S205: Determine all masking objects in the masking queue that have the first attribute value.

[0069] In an embodiment of the present invention, first, the display flag of each mask object in the mask queue is set to null. Then, the mask objects in the mask queue are sorted in descending order of mask priority. Traverse each mask object in the mask queue whose display flag is not the first attribute value in descending order of mask priority, and set the display flag of the mask object in the mask queue that overlaps with the mask position of this mask object to the first attribute value, that is, set the display flag of the mask object whose mask priority is lower than this mask object and whose mask position overlaps with this mask object to the first attribute value until the traversal is completed, obtaining all mask objects with the first attribute value in the mask queue, thereby determining each non-display mask object and each display mask object in the mask queue, and the mask positions of each display mask object do not overlap with each other.

[0070] In another implementation manner of the embodiment of the present invention, setting the display flags of some of the multiple mask objects to the first attribute value includes: copying the mask queue to obtain a copied mask queue, that is, creating a copy of the mask queue; then traversing each mask object in the copied mask queue in descending order of mask priority: determining whether there is a mask object in the copied mask queue whose mask position overlaps with the mask position of this mask object; if so, deleting the mask object whose mask position overlaps with the mask position of this mask object from the copied mask queue, setting the display flag of the deleted mask object in the mask queue to the first attribute value, and then traversing the next mask object in the copy; otherwise, traversing the next mask object in the copied mask queue, that is, the mask object with the second highest mask priority in the copied mask queue, and repeating the above process until the traversal is completed.

[0071] In an implementation manner of the embodiment of the present invention, as Figure 3 shown, setting the display flags of some of the multiple mask objects to the first attribute value includes:

[0072] Step S301: Sort the mask objects in the mask queue in descending order of mask priority and create a copy of the mask queue;

[0073] Step S302: Traverse the j-th mask object in the copy, where j = 1: Determine whether there is a mask object in the copy whose mask position overlaps with the mask position of the j-th mask object; if so, execute Step S303; if not, execute Step S304;

[0074] Step S303: Delete the mask object whose mask position overlaps with the mask position of the j-th mask object from the copy, and set the display flag of the deleted mask object in the mask queue to the first attribute value; then execute Step S304;

[0075] Step S304: Determine whether j is equal to M; if so, execute Step S305; if not, set j = j + 1 and execute Step S302; where M is the number of masking objects in the copy.

[0076] Step S305: Determine all the masking objects in the copy and all the masking objects in the masking queue that have the first attribute value.

[0077] In the embodiments of the present invention, each masking object to be displayed can be determined by creating a copy of the masking queue. Optionally, before creating the copy of the masking queue, all the masking objects in the masking queue can be sorted in descending order according to the masking priority, so as to create the corresponding copy, such that the masking objects in the copy are sorted in descending order according to the masking priority. Then, each masking object in the copy is traversed in this order, and the masking objects whose masking positions are lower than the masking position of this masking object are deleted from the copy, and their display flags in the masking queue are set to the first attribute value, that is, the masking objects whose masking priorities are lower than this masking object and whose masking positions overlap with this masking object are deleted, and the display flags are set to the first attribute value. After the traversal is completed, all the masking objects in the copy, that is, all the masking objects to be displayed, can be determined. Thus, the masking objects retained in the copy are non-overlapping masking objects to be displayed, and at the same time, all the masking objects in the masking queue that are set to the first attribute value are determined. For example, if the copy of the masking queue includes three masking objects A, B, C, and D, and the three masking objects are sorted in descending order according to the masking priority as A, B, C, D, then first traverse the masking object A, and respectively determine whether the masking positions of B, C, and D overlap with the masking position of A. If B and D do not overlap with A and C overlaps with A, then retain the masking objects B and D in the copy, delete C from the copy, and set the display flag of C in the masking queue to the first attribute value. Then, there are remaining masking objects A, B, and D in the copy. Then traverse the masking object B and determine whether D overlaps with B. If D does not overlap with B, then retain D in the copy. After the traversal is completed, all the masking objects to be displayed A, B, and D in the copy are determined, and their masking positions do not overlap with each other. Thus, three masking layers corresponding to the masking objects A, B, and D can be generated, and the three masking layers do not overlap with each other.

[0078] In the embodiment of the present invention, a copy of the mask queue is created based on the mask queue. Similar to the non-maximum suppression algorithm, each mask object in the copy is traversed in the order of decreasing mask priority. It is judged whether there is a mask object overlapping with the mask object in the copy, and the mask object overlapping with the mask object is deleted from the copy, so that non-overlapping mask objects are retained in the copy as mask objects to be displayed, and thus each non-overlapping mask layer is generated based on each non-overlapping mask object in the copy. Since judging whether there is an overlap does not require judging after creating the mask layer, but is judged based on the mask position attribute of the mask object, therefore, it does not affect the page lag during rendering.

[0079] In the embodiment of the present invention, to judge whether there is a mask object whose mask position overlaps with the mask position of this mask object, the mask positions of this mask object and the mask object to be judged can be represented by a quadruple. For example, in a two-dimensional coordinate system with the upper left corner of the browser or page as the origin, the mask position of this mask object is represented as [x1, y1, x2, y2], where (x1, y1) represents the lower left corner coordinates, and (x2, y2) represents the upper right corner coordinates; the mask position of the mask object to be judged is represented as [x3, y3, x4, y4], (x3, y3) represents the lower left corner coordinates, and (x4, y4) represents the upper right corner coordinates. If there exists a point (x, y) satisfying max(x1, x3) < x < min(x2, x4) and max(y1, y3) < y < min(y2, y4), that is, the abscissa of the point satisfies being greater than the maximum value of the lower left corner abscissas of the two mask layers and less than the minimum value of the upper right corner abscissas, and the ordinate of the point satisfies being greater than the maximum value of the lower left corner ordinates of the two mask layers and less than the minimum value of the upper right corner ordinates, then it is determined that the mask position of the mask object to be judged overlaps with the mask position of this mask object; otherwise, it is determined that there is no overlap.

[0080] In the embodiment of the present invention, after setting the display flag of some mask objects among multiple mask objects to the first attribute value, the mask layer corresponding to each mask object in the mask queue that does not have the first attribute value is determined, and the display flag of the mask object corresponding to the mask layer is set to the second attribute value, that is, it is being displayed.

[0081] In the embodiment of the present invention, after respectively determining the mask layer corresponding to each mask object in the mask queue that does not have the first attribute value, it includes:

[0082] After determining that the display of the mask layer is completed, delete the mask object corresponding to the mask layer from the mask queue to obtain an updated mask queue. When there are multiple mask objects with overlapping mask positions in the updated mask queue, set the display flag of some of the mask objects among the multiple mask objects to a first attribute value, so as not to display the mask layer corresponding to the mask object with the first attribute value on the page. Respectively determine the mask layer corresponding to each mask object in the updated mask queue that does not have the first attribute value, and set the display flag of the corresponding mask object to a second attribute value, so as to display the mask layer corresponding to the mask object with the second attribute value on the page.

[0083] In an embodiment of the present invention, after the display of the mask layer is completed, delete the mask object corresponding to the mask layer from the mask queue to obtain an updated mask queue, and perform steps S102 and S103. Optionally, after obtaining the updated mask queue, sort the mask objects in the updated mask queue in descending order of mask priority.

[0084] In an embodiment of the present invention, before respectively determining the mask layer corresponding to each mask object in the mask queue that does not have the first attribute value, it further includes: determining each mask object in the mask queue that does not have the first attribute value; judging whether there is a mask layer corresponding to the mask object that does not have the first attribute value in the cache; if so, directly obtain the mask layer corresponding to the mask object that does not have the first attribute value from the cache, if not, respectively determine the mask layer corresponding to each mask object in the mask queue that does not have the first attribute value.

[0085] In an embodiment of the present invention, the mask object that does not have the first attribute value may include a mask object for which a mask layer has not been generated and a mask object for which a mask layer has been generated but the mask layer is not displayed (that is, the mask object with the display attribute being the third flag). Therefore, if there is a generated but not displayed mask layer in the cache, directly obtain and display the mask layer, and set the display flag to the second attribute value. If there is no such mask layer in the cache, respectively determine the mask layer corresponding to the mask object that does not have the first attribute value to display the generated mask layer, and at the same time set the display flag of the mask object that generates the mask layer to the second attribute value.

[0086] For example, during the display of the mask layer of mask object A, if mask object B is inserted into the mask queue, the mask priority of mask object B is higher than that of mask object A, and the mask positions of mask object B and mask object A overlap, then the mask layer corresponding to mask object A needs to be set to not display, without destroying the mask layer corresponding to mask object A, but saving it in the cache; then create and display the mask layer of mask object B. When the display of the mask layer corresponding to mask object B ends and the display time of the mask layer corresponding to mask object A has not ended, if there is only mask object A in the mask queue or there are other mask objects but their mask priorities are lower than that of mask object A, then the mask layer corresponding to mask object A can be redisplayed. Therefore, mask objects without the first attribute value include mask objects corresponding to mask layers that have been created but are not currently being displayed and mask objects without created mask layers. When there is no mask layer corresponding to the mask object without the first attribute value in the cache, that is, when there is no mask layer corresponding to mask object A, then determine the mask layer corresponding to the mask object without the first attribute value respectively.

[0087] After determining that the mask layer display has ended, that is, after the mask layer is destroyed, delete the corresponding mask object from the mask queue, and delete the mask object in the callback function of the page access request to update the mask queue, and then update the copy.

[0088] In the embodiments of the present invention, the mask object includes a mask type that triggers closing or non - triggers closing;

[0089] Determining that the mask layer display has ended includes: when the mask type is non - triggers closing, when the preset display time of the mask layer ends, the mask layer closes, and it is determined that the mask layer display has ended; when the mask type is triggers closing, when the trigger closing instruction is received, the mask layer closes, and it is determined that the mask layer display has ended.

[0090] In the embodiments of the present invention, the mask layer with the mask type of triggers closing can be a mask layer that requires the user to manually close, that is, the user operates the mask. When the user clicks the close button of the mask layer, it is confirmed that the mask layer display has ended to destroy the mask layer; the mask layer with the mask type of non - triggers closing does not require the user to manually close, such as an information display mask, which automatically closes the mask layer according to the preset time to determine that the mask layer display has ended. The preset time can be the time from the start to the end of the page access request or a custom time.

[0091] The method for page mask management in the embodiments of the present invention can manage and layout mask objects when a new mask object is inserted into the mask queue, an old mask object is generated, and a mask object with a higher mask priority is inserted into the mask queue during the display of the mask layer, so as to solve the problem of multiple masks overlapping each other.

[0092] Such as Figure 4The following is a schematic flowchart of a method for page mask management according to an embodiment of the present invention, including:

[0093] Step S401: In response to a page access request, generate a mask object corresponding to the page access request, and then insert the mask object into the mask queue;

[0094] Step S402: Sort the mask objects in the mask queue in descending order of priority, and then create a copy of the mask queue;

[0095] Step S403: Traverse the j-th mask object in the copy, where j = 1: Determine whether there is a mask object in the copy whose mask position overlaps with the mask position of the j-th mask object; if so, execute Step S404; if not, execute Step S405;

[0096] Step S404: Delete the mask object whose mask position overlaps with the mask position of the j-th mask object from the copy, and set the display flag of the deleted mask object in the mask queue to the first attribute value; then execute Step S405;

[0097] Step S405: Determine whether j is equal to M; if so, execute Step S406; if not, set j = j + 1 and execute Step S403;

[0098] Step S406: Determine all the mask objects in the copy and all the mask objects in the mask queue that have the first attribute value.

[0099] Step S407: Respectively determine the mask layer corresponding to each mask object that does not have the first attribute value, and set the display flag of the mask object corresponding to the mask layer to the second attribute value;

[0100] Step S408: After determining that the mask layer display is over, delete the mask object corresponding to the mask layer from the mask queue to obtain an updated mask queue, and return to Step S402.

[0101] The method for page mask management according to the embodiments of the present invention uses a mask object to describe the mask layer to be generated. When a page access request is monitored, a mask object corresponding to the page access request is generated and then inserted into the mask queue. The mask queue is used to manage each mask object. When there are multiple mask objects with overlapping mask positions, the display flags of some mask objects are set to a first attribute value, so as to determine the mask layer corresponding to the mask object that does not have the first attribute value, and the display flag of the mask object corresponding to the mask layer is set to a second attribute value to indicate that the mask layer is being displayed. The method according to the embodiments of the present invention uses the mask queue to combine the mask priorities and draws on the non-maximum suppression algorithm to determine the mask objects that need to be set to the first attribute value, so as to determine the non-overlapping mask objects to be displayed, solving the problem of multi-mask occlusion; and using a custom-configured mask priority, it can be applied to a wider range of application scenarios. This method does not need to traverse the DOM document at the cost of performance to mark the mask priority. At the same time, the present invention does not use iframes, avoiding the unfriendly experience in use and performance brought by iframes. This method can improve the user experience, has good device compatibility, is conducive to search engine optimization, and will not cause page jamming during rendering.

[0102] As Figure 5 shown, on the other hand, the embodiments of the present invention provide a page mask management device 500, which includes:

[0103] A generation module 501, in response to a page access request, generates a mask object corresponding to the page access request, and then inserts the mask object into the mask queue. The mask object includes a display flag and a mask position;

[0104] An update module 502, in the case where there are multiple mask objects with overlapping mask positions in the mask queue, sets the display flags of some of the multiple mask objects to a first attribute value, so as not to display the mask layer corresponding to the mask object with the first attribute value on the page;

[0105] A determination module 503, respectively determines the mask layer corresponding to each mask object in the mask queue that does not have the first attribute value, and sets the display flag of the mask object corresponding to the mask layer to a second attribute value, so as to display the mask layer corresponding to the mask object with the second attribute value on the page.

[0106] In the embodiments of the present invention, the mask object includes a mask priority, and some mask objects are other mask objects in the multiple mask objects except the mask object with the highest mask priority.

[0107] In an implementation manner of the embodiment of the present invention, the update module 502 is further configured to: set the display flag of each mask object in the mask queue to be empty, and then traverse each mask object in the mask queue whose display flag is not the first attribute value in the order from the highest to the lowest mask priority: determine whether there is a mask object in the mask queue whose mask position overlaps with the mask position of this mask object; if so, set the display flag of the mask object whose mask position overlaps with the mask position of this mask object to the first attribute value, and then traverse the next mask object whose display flag is not the first attribute value; otherwise, traverse the next mask object whose display flag is not the first attribute value.

[0108] In another implementation manner of the embodiment of the present invention, the update module 502 is further configured to: include: copy the mask queue, and then traverse each mask object in the copied mask queue in the order from the highest to the lowest mask priority: determine whether there is a mask object in the copied mask queue whose mask position overlaps with the mask position of this mask object; if so, delete the mask object whose mask position overlaps with the mask position of this mask object from the copied mask queue, and set the display flag of the deleted mask object in the mask queue to the first attribute value, and then traverse the next mask object in the copied mask queue; otherwise, traverse the next mask object in the copied mask queue.

[0109] In the embodiment of the present invention, the determination module 503 is further configured to: after respectively determining the mask layers corresponding to each mask object in the mask queue that does not have the first attribute value, when it is determined that the display of the mask layer ends, delete the mask object corresponding to the mask layer from the mask queue to obtain an updated mask queue, and in the case that there are multiple mask objects with overlapping mask positions in the updated mask queue, set the display flags of some of the multiple mask objects to the first attribute value, so as not to display the mask layer corresponding to the mask object with the first attribute value on the page, respectively determine the mask layers corresponding to each mask object in the updated mask queue that does not have the first attribute value, and set the display flag of the corresponding mask object to the second attribute value, so as to display the mask layer corresponding to the mask object with the second attribute value on the page.

[0110] In the embodiment of the present invention, the determination module 503 is further configured to: before respectively determining the mask layers corresponding to each mask object in the mask queue that does not have the first attribute value, confirm that there is no mask layer corresponding to the mask object that does not have the first attribute value in the cache; and, if there is a mask layer corresponding to the mask object that does not have the first attribute value in the cache, directly obtain the mask layer corresponding to the mask object that does not have the first attribute value from the cache.

[0111] In an embodiment of the present invention, the mask object includes a mask type that can be triggered to close or non-triggered to close; the determination module 503 is further configured to: when the mask type is non-triggered to close, after the preset display time of the mask layer ends, the mask layer closes, and it is determined that the display of the mask layer ends; when the mask type is triggered to close, when a trigger close instruction is received, the mask layer closes, and it is determined that the display of the mask layer ends.

[0112] Another aspect of the embodiments of the present invention provides an electronic device, including: one or more processors; a storage device for storing one or more programs, which when executed by the one or more processors, cause the one or more processors to implement the method for page mask management in the embodiments of the present invention.

[0113] Yet another aspect of the embodiments of the present invention provides a computer-readable medium, on which a computer program is stored, and when the program is executed by a processor, it implements the method for page mask management in the embodiments of the present invention.

[0114] Figure 6 An exemplary system architecture 600 is shown to which the method for page mask management or the apparatus for page mask management in the embodiments of the present invention can be applied.

[0115] As Figure 6 shown, the system architecture 600 may include terminal devices 601, 602, 603, a network 604, and a server 605. The network 604 is used to provide a medium for a communication link between the terminal devices 601, 602, 603 and the server 605. The network 604 may include various connection types, such as wired, wireless communication links, or fiber optic cables, etc.

[0116] Users can use the terminal devices 601, 602, 603 to interact with the server 605 through the network 604 to receive or send messages, etc. Various communication client applications may be installed on the terminal devices 601, 602, 603, such as shopping applications, web browser applications, search applications, instant messaging tools, email clients, social platform software, etc. (only as examples).

[0117] The terminal devices 601, 602, 603 may be various electronic devices having a display screen and supporting web browsing, including but not limited to smart phones, tablet computers, laptop portable computers, and desktop computers, etc.

[0118] The server 605 may be a server that provides various services, such as a background management server that supports shopping websites browsed by users using the terminal devices 601, 602, 603 (only as an example). The background management server may analyze and process data such as product information query requests received, and feedback the processing results (such as target push information, product information - only as examples) to the terminal devices.

[0119] It should be noted that the method for page mask management provided by the embodiments of the present invention is generally executed by terminal devices 601, 602, 6036. Correspondingly, the device for page mask management is generally provided in terminal devices 601, 602, 6036.

[0120] It should be understood that Figure 6 the numbers of terminal devices, networks, and servers in

[0121] are merely illustrative. According to the implementation requirements, there can be any number of terminal devices, networks, and servers. Figure 7 is a schematic structural diagram of a computer system 700 of a terminal device suitable for implementing the embodiments of the present invention. Figure 7 The terminal device shown is merely an example and should not impose any limitations on the functions and usage scope of the embodiments of the present invention.

[0122] As Figure 7 shown, the computer system 700 includes a central processing unit (CPU) 701, which can perform various appropriate actions and processes according to the program stored in the read-only memory (ROM) 702 or the program loaded from the storage section 708 into the random access memory (RAM) 703. In the RAM 703, various programs and data required for the operation of the system 700 are also stored. The CPU 701, ROM 702, and RAM 703 are connected to each other via a bus 704. The input / output (I / O) interface 705 is also connected to the bus 704.

[0123] The following components are connected to the I / O interface 705: an input section 706 including a keyboard, a mouse, etc.; an output section 707 including such as a cathode ray tube (CRT), a liquid crystal display (LCD), etc. and a speaker; a storage section 708 including a hard disk, etc.; and a communication section 709 including a network interface card such as a LAN card, a modem, etc. The communication section 709 performs communication processing via a network such as the Internet. A drive 710 is also connected to the I / O interface 705 as needed. A removable medium 711, such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, etc., is installed on the drive 710 as needed so that a computer program read from it can be installed into the storage section 708 as needed.

[0124] In particular, according to the embodiments disclosed in the present invention, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, the embodiments disclosed in the present invention include a computer program product that includes a computer program carried on a computer-readable medium, and the computer program contains program codes for executing the methods shown in the flowcharts. In such an embodiment, the computer program can be downloaded and installed from a network through the communication section 709 and / or installed from the removable medium 711. When the computer program is executed by the central processing unit (CPU) 701, the above functions defined in the system of the present invention are executed.

[0125] It should be noted that the computer-readable medium shown in the present invention can be a computer-readable signal medium, a computer-readable storage medium, or any combination of the two. The computer-readable storage medium can be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the above. More specific examples of the computer-readable storage medium can include, but are not limited to: an electrical connection having 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 above. In the present invention, the computer-readable storage medium can be any tangible medium that contains or stores a program, and the program can be used by or in combination with an instruction execution system, apparatus, or device. In the present invention, the computer-readable signal medium can include a data signal propagated in a baseband or as part of a carrier wave, in which the computer-readable program code is carried. Such a propagated data signal can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. The computer-readable signal medium can also be any computer-readable medium other than the computer-readable storage medium, and the computer-readable medium can send, propagate, or transmit a program for use by or in combination with an instruction execution system, apparatus, or device. The program code contained on the computer-readable medium can be transmitted by any appropriate medium, including but not limited to: wireless, wire, optical fiber, RF, etc., or any suitable combination of the above.

[0126] The flowcharts and block diagrams in the accompanying drawings illustrate the possible architectures, functions, and operations of systems, methods, and computer program products according to various embodiments of the present invention. In this regard, each box in the flowchart or block diagram may represent a module, a segment of a program, or a part of code, and the above-mentioned module, segment of a program, or part of code contains one or more executable instructions for implementing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the boxes may occur in a different order than that marked in the accompanying drawings. For example, two consecutive boxes shown may actually be executed substantially in parallel, and they may sometimes be executed in the reverse order, depending on the functions involved. It should also be noted that each box in the block diagram or flowchart, as well as the combination of boxes in the block diagram or flowchart, can be implemented by a dedicated hardware-based system for performing the specified functions or operations, or can be implemented by a combination of dedicated hardware and computer instructions.

[0127] The modules involved in the embodiments of the present invention can be implemented in software or in hardware. The described modules can also be provided in a processor. For example, it can be described as: a processor includes a generation module, an update module, and a determination module. Among them, the names of these modules do not constitute a limitation on the module itself in some cases. For example, the update module can also be described as "the module that sets the display flag of some of the multiple mask objects to the first attribute value when there are multiple mask objects with overlapping mask positions in the mask queue".

[0128] As another aspect, the present invention also provides a computer-readable medium, which can be included in the device described in the above embodiments; or can exist separately without being assembled into the device. The above computer-readable medium carries one or more programs. When the above one or more programs are executed by the device, the device includes: in response to a page access request, generating a mask object corresponding to the page access request, and then inserting the mask object into the mask queue, where the mask object includes a display flag and a mask position; when there are multiple mask objects with overlapping mask positions in the mask queue, setting the display flag of some of the multiple mask objects to the first attribute value so as not to display the mask layer corresponding to the mask object with the first attribute value on the page; respectively determining the mask layer corresponding to each mask object without the first attribute value in the mask queue, and setting the display flag of the mask object corresponding to the mask layer to the second attribute value so as to display the mask layer corresponding to the mask object with the second attribute value on the page.

[0129] According to the technical solution of the embodiment of the present invention, the method for page mask management in the embodiment of the present invention uses a mask object to describe the mask layer to be generated. When a page access request is monitored, a mask object corresponding to the page access request is generated, and then the mask object is inserted into the mask queue. The mask queue is used to manage each mask object. When there are multiple mask objects with overlapping mask positions, the display flag of some mask objects is set to the first attribute value, so as to determine the mask layer corresponding to the mask object without the first attribute value, and the display flag of the mask object corresponding to the mask layer is set to the second attribute value to indicate that the mask layer is being displayed. The method in the embodiment of the present invention uses the mask queue to combine the mask priorities and draws on the non-maximum suppression algorithm to determine the mask objects that need to be set to the first attribute value, so as to determine the non-overlapping mask objects to be displayed, solving the problem of multi-mask occlusion; and using the custom-configured mask priorities, it can be applied to a wider range of application scenarios. This method does not need to traverse the DOM document at the cost of performance to mark the mask priorities. At the same time, the present invention does not use iframes, avoiding the unfriendly experience in use and performance brought by iframes. This method can improve the user experience, has good device compatibility, is beneficial to search engine optimization, and will not cause page lags during rendering.

[0130] The above specific embodiments do not constitute a limitation to the protection scope of the present invention. Those skilled in the art should understand that various modifications, combinations, sub-combinations and substitutions can occur depending on design requirements and other factors. Any modifications, equivalent substitutions and improvements made within the spirit and principle of the present invention shall be included within the protection scope of the present invention.

Claims

1. A method for page mask management, characterized in that Including: In response to a page access request, generating a mask object corresponding to the page access request, and then inserting the mask object into a mask queue, where the mask object includes a display flag and a mask position; When there are multiple mask objects with overlapping mask positions in the mask queue, setting the display flags of some of the mask objects among the multiple mask objects to a first attribute value, so as not to display the mask layer corresponding to the mask object with the first attribute value on the page; Respectively determining the mask layer corresponding to each mask object in the mask queue that does not have the first attribute value, and setting the display flag of the mask object corresponding to the mask layer to a second attribute value, so as to display the mask layer corresponding to the mask object with the second attribute value on the page; Among them, after respectively determining the mask layer corresponding to each mask object in the mask queue that does not have the first attribute value, it includes: when it is determined that the display of the mask layer ends, deleting the mask object corresponding to the mask layer from the mask queue, obtaining an updated mask queue, and when there are multiple mask objects with overlapping mask positions in the updated mask queue, setting the display flags of some of the mask objects among the multiple mask objects to the first attribute value, so as not to display the mask layer corresponding to the mask object with the first attribute value on the page, respectively determining the mask layer corresponding to each mask object in the updated mask queue that does not have the first attribute value, and setting the display flag of the corresponding mask object to the second attribute value, so as to display the mask layer corresponding to the mask object with the second attribute value on the page.

2. The method according to claim 1, wherein The mask object includes a mask priority, and the part of the mask objects are other mask objects except the mask object with the highest mask priority among the multiple mask objects.

3. The method according to claim 2, wherein Setting the display flags of some of the mask objects among the multiple mask objects to the first attribute value includes: Setting the display flag of each mask object in the mask queue to be empty, and then traversing each mask object in the mask queue whose display flag is not the first attribute value in descending order of mask priority: judging whether there is a mask object in the mask queue whose mask position overlaps with the mask position of this mask object; If so, setting the display flag of the mask object whose mask position overlaps with the mask position of this mask object to the first attribute value, and then traversing the next mask object whose display flag is not the first attribute value; Otherwise, traversing the next mask object whose display flag is not the first attribute value.

4. The method according to claim 2, wherein Setting the display flags of some of the mask objects among the multiple mask objects to the first attribute value includes: Copying the mask queue to obtain a copied mask queue, and then traversing each mask object in the copied mask queue in descending order of mask priority: judging whether there is a mask object in the copied mask queue whose mask position overlaps with the mask position of this mask object; If so, delete the mask object that overlaps with the mask position of the mask object from the copied mask queue, set the display flag of the deleted mask object in the mask queue to the first attribute value, and then traverse the next mask object in the copied mask queue; Otherwise, traverse the next mask object in the copied mask queue.

5. The method according to any one of claims 1 to 4, characterized in that, Before respectively determining the mask layers corresponding to each mask object in the mask queue that does not have the first attribute value, it further includes: confirming that there is no mask layer corresponding to the mask object that does not have the first attribute value in the cache; and If there is a mask layer corresponding to the mask object that does not have the first attribute value in the cache, directly obtain the mask layer corresponding to the mask object that does not have the first attribute value from the cache.

6. The method according to claim 5, characterized in that, The mask object includes a mask type of trigger-close or non-trigger-close; Determining that the display of the mask layer ends includes: when the mask type is non-trigger-close, when the preset display time of the mask layer ends, the mask layer closes, and it is determined that the display of the mask layer ends; When the mask type is trigger-close, when a trigger-close instruction is received, the mask layer closes, and it is determined that the display of the mask layer ends.

7. A device for page mask management, characterized in that, It includes: A generation module, in response to a page access request, generates a mask object corresponding to the page access request, and then inserts the mask object into the mask queue. The mask object includes a display flag and a mask position; An update module, in the case where there are multiple mask objects with overlapping mask positions in the mask queue, sets the display flags of some of the multiple mask objects to the first attribute value, so as not to display the mask layer corresponding to the mask object with the first attribute value on the page; A determination module, respectively determines the mask layers corresponding to each mask object in the mask queue that does not have the first attribute value, and sets the display flag of the mask object corresponding to the mask layer to the second attribute value, so as to display the mask layer corresponding to the mask object with the second attribute value on the page; Wherein, the determination module is further configured to: after respectively determining the mask layers corresponding to each mask object in the mask queue that does not have the first attribute value, when it is determined that the display of the mask layer ends, delete the mask object corresponding to the mask layer from the mask queue to obtain an updated mask queue, and in the case where there are multiple mask objects with overlapping mask positions in the updated mask queue, set the display flags of some of the multiple mask objects to the first attribute value, so as not to display the mask layer corresponding to the mask object with the first attribute value on the page, respectively determine the mask layers corresponding to each mask object in the updated mask queue that does not have the first attribute value, and set the display flag of the corresponding mask object to the second attribute value, so as to display the mask layer corresponding to the mask object with the second attribute value on the page.

8. An electronic device, characterized in that, It includes: One or more processors; A storage device for storing one or more programs, When the one or more programs are executed by the one or more processors such that the one or more processors implement the method according to any one of claims 1-6.

9. A computer-readable medium having a computer program stored thereon, characterized in that, When the program is executed by a processor, the method according to any one of claims 1-6 is implemented.

Citation Information

Patent Citations

  • Webpage masking method for asynchronous request mode

    CN104731821A

  • Popup window display method and device, electronic equipment and computer readable storage medium

    CN112099891A