CN113761424A - Webpage rolling positioning method, equipment and storage medium - Google Patents
Webpage rolling positioning method, equipment and storage medium Download PDFInfo
- Publication number
- CN113761424A CN113761424A CN202110385327.5A CN202110385327A CN113761424A CN 113761424 A CN113761424 A CN 113761424A CN 202110385327 A CN202110385327 A CN 202110385327A CN 113761424 A CN113761424 A CN 113761424A
- Authority
- CN
- China
- Prior art keywords
- monitored
- title
- navigation area
- display
- webpage
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 54
- 238000005096 rolling process Methods 0.000 title claims abstract description 15
- 238000012545 processing Methods 0.000 claims abstract description 55
- 238000004590 computer program Methods 0.000 claims description 5
- 238000012544 monitoring process Methods 0.000 description 13
- 238000010586 diagram Methods 0.000 description 4
- 230000001960 triggered effect Effects 0.000 description 3
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000006978 adaptation Effects 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000000977 initiatory effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/954—Navigation, e.g. using categorised browsing
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/46—Multiprogramming arrangements
- G06F9/52—Program synchronisation; Mutual exclusion, e.g. by means of semaphores
- G06F9/522—Barrier synchronisation
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- Software Systems (AREA)
- Radar, Positioning & Navigation (AREA)
- Remote Sensing (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The application provides a webpage rolling positioning method, equipment and a storage medium, comprising the following steps: when a webpage is displayed in a rolling mode on a browser, display information of a monitored element returned by a monitor when the monitor monitors that the display state of the monitored element in a display area changes is acquired, wherein threads used by the monitor are different from threads used by the browser when the webpage is displayed; performing style processing on the title element associated with the monitored element according to the display information to obtain style data of the title element in the navigation area; and displaying the title element in the navigation area according to the style data of the title element in the navigation area. The monitor returns display information when the display state of the monitored element changes, so that the data processing amount is reduced, the CPU expense is reduced, the monitor and the webpage display are asynchronous, and the frame drop phenomenon cannot occur.
Description
Technical Field
The present application relates to the field of computer technologies, and in particular, to a method, an apparatus, and a storage medium for scrolling and positioning a web page.
Background
When a webpage is displayed on a browser, a navigation area and a window area are often set, the corresponding window area can be positioned by clicking the navigation area, and when the content in the window area is displayed in a rolling manner, the navigation area can also be displayed.
Typically, an anchor point or a scroll event is used for web page scroll positioning. The positioning accuracy of the rolling positioning by adopting the anchor points is not high. The positioning accuracy can be improved by using the scroll event to perform webpage scrolling positioning. However, when a scroll event is frequently triggered, since the scroll event involves a large amount of computation and processing procedures such as Document Object Model (DOM) element operation, i.e. requires a relatively long processing time, when the processing procedures are not completed before the next scroll event is triggered, a frame dropping phenomenon is easily occurred. Moreover, the scroll event is often continuous, that is, the scroll event is frequently triggered, which further aggravates the frame dropping phenomenon.
Disclosure of Invention
The application provides a webpage rolling positioning method, equipment and a storage medium, which are used for solving the problem that the frame drop is easy to occur in the conventional webpage rolling positioning method.
In a first aspect, the present application provides a method for scrolling and positioning a web page, including:
when a webpage is displayed in a rolling mode on a browser, display information of a monitored element returned by a monitor is obtained, wherein a thread used by the monitor is different from a thread used by the browser for displaying the webpage, and the display information is returned when the display state of the monitored element in a display area is monitored to change;
performing style processing on the title element associated with the monitored element according to the display information to obtain style data of the title element in the navigation area;
and displaying the title element in the navigation area according to the style data of the title element in the navigation area.
In an embodiment, performing style processing on the title element associated with the monitored element according to the display information to obtain style data of the title element in the navigation area specifically includes:
when the display states of the plurality of monitored elements are monitored to be changed, selecting a target element from the plurality of monitored elements according to the display information, wherein the target element is the monitored element closest to the navigation area;
and performing style processing on the title element associated with the target element to obtain style data of the title element in the navigation area.
In an embodiment, selecting a target element from a plurality of monitored elements according to display information specifically includes:
determining the distance from the top of the area where the monitored element is located to the top of the navigation area according to the position information of the area where the monitored element is located, and recording the distance as a first distance;
if the first distance is smaller than or equal to the distance threshold, the target element is a monitored element corresponding to the first distance;
the display information comprises position information of an area where the target element is located, and the distance threshold is the distance from the bottom of the navigation area to the top of the navigation area.
According to the technical scheme, when the plurality of monitored elements are monitored, the monitored element closest to the navigation area is selected as the target element, the style adjustment is carried out on the title element associated with the target element, the plurality of title elements are prevented from being marked in the navigation area, and therefore the accuracy of webpage rolling positioning is improved.
In an embodiment, performing style processing on a title element associated with a target element to obtain style data of the title element in a navigation area specifically includes:
and carrying out selected style processing on the title element associated with the target element to obtain style data of the title element in the navigation area.
In an embodiment, performing style selection processing on a title element associated with a target element to obtain style data of the title element in a navigation area specifically includes:
and setting the attribute parameter of the selected style of the navigation area as the identification information of the title element associated with the target element.
In the technical scheme, the attribute parameters of the selected style in the navigation area are set as the identification information of the title element associated with the target element, and the step of modifying the styles of other title elements is not required to be added, so that the number of codes can be reduced, and the processing performance is improved.
In one embodiment, before obtaining the display information of the intercepted element returned by the listener, the method further comprises:
establishing a listener of each title element in a webpage and a listener of each paragraph element in the webpage; wherein the listened elements include a header element and a paragraph element.
In one embodiment, before obtaining the display information of the intercepted element returned by the listener, the method further comprises:
acquiring a node relation between each title element and each paragraph element;
and associating the title element with the paragraph element according to the node relation.
In an embodiment, before obtaining the node relationship between each title element and each paragraph element, the method further includes:
and configuring identification information for each title element to generate the identification information of each title element.
In a second aspect, the present application provides a web page scrolling positioning device, including:
the acquisition module is used for acquiring display information of the monitored element returned by the monitor when the webpage is displayed in a rolling manner on the browser, wherein the thread used by the monitor is different from the thread used by the browser in displaying the webpage, and the display information is returned when the display state of the monitored element in the display area is monitored to change;
the processing module is used for processing the style of the title element associated with the monitored element according to the display information to obtain style data of the title element in the navigation area;
the processing module is further used for displaying the title element in the navigation area according to the style data of the title element in the navigation area.
In a third aspect, the present application provides a web page scrolling positioning device, including: a memory, a processor;
a memory; a memory for storing processor-executable instructions;
wherein the processor is configured to perform the web page scroll positioning method according to the first aspect and the alternative.
In a fourth aspect, the present application provides a computer-readable storage medium, in which computer-executable instructions are stored, and the computer-executable instructions are executed by a processor to implement the method for scrolling and positioning a web page according to the first aspect and the alternative.
In a fifth aspect, the present application provides a computer program product comprising a computer program which, when executed by a processor, implements the method for scrolling and positioning web pages according to the first aspect and the alternative aspects.
According to the webpage scrolling positioning method, the equipment and the storage medium, the thread used by the monitor is different from the thread used by the browser for displaying the webpage, namely, the monitoring process of the monitor is asynchronous with the display process of the browser, the webpage display cannot be influenced in the monitoring process, and therefore the phenomenon of webpage frame dropping caused by the need of processing the monitoring process cannot occur. And the monitor monitors the display state change of the monitored element, and returns the display information of the monitored element when the change occurs, so that the data processing amount can be reduced, the expense of a CPU (central processing unit) is reduced, and the webpage display performance is improved.
Drawings
The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and together with the description, serve to explain the principles of the application.
Fig. 1 is a schematic diagram of a service system provided in an embodiment of the present application;
fig. 2 is a schematic flowchart of a web page scrolling positioning method according to another embodiment of the present application;
FIG. 3 is a schematic interface diagram of a browser according to another embodiment of the present application;
fig. 4 is a schematic flowchart of a web page scrolling positioning method according to another embodiment of the present application;
FIGS. 5a and 5b are schematic views of an interface of a browser according to another embodiment of the present application;
fig. 6 is a schematic structural diagram of a web page scrolling positioning device according to another embodiment of the present application;
fig. 7 is a schematic structural diagram of a client according to another embodiment of the present application.
With the above figures, there are shown specific embodiments of the present application, which will be described in more detail below. These drawings and written description are not intended to limit the scope of the inventive concepts in any manner, but rather to illustrate the inventive concepts to those skilled in the art by reference to specific embodiments.
Detailed Description
Reference will now be made in detail to the exemplary embodiments, examples of which are illustrated in the accompanying drawings. When the following description refers to the accompanying drawings, like numbers in different drawings represent the same or similar elements unless otherwise indicated. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present application. Rather, they are merely examples of apparatus and methods consistent with certain aspects of the present application, as detailed in the appended claims.
In order to solve the technical problem that a frame drop phenomenon easily occurs when a scroll event is used, the application provides a webpage scrolling positioning method, equipment and a storage medium. The technical idea of the application is as follows: the monitor is configured for each title element and each paragraph element, and the monitoring process and the webpage display process of the monitor are asynchronous, so that the monitoring process cannot influence the webpage display process, the webpage display process cannot be processed in time due to the processing of the monitoring process, and the webpage frame drop phenomenon cannot occur. And the monitor returns display information only when the display state of the monitored element changes, so that the data processing amount can be reduced, the expense of the GPU is reduced, and the webpage display performance is improved.
As shown in fig. 1, an embodiment of the present application provides a service system, which includes a client 101 and a server 102.
The client 101 and the server 102 are in communication connection, the client 101 is used for initiating a webpage request to the server, the server 102 sends webpage data to the client after receiving the webpage request, and the client 101 renders the webpage data in a browser after receiving the webpage data to be displayed to a user through a graphical interface.
The client 101 is further configured to execute a web page scrolling and positioning method described in the following embodiments when the web page is presented to the user through the graphical user interface, and the method is described in detail in the following embodiments and is not described herein again.
As shown in fig. 2, an embodiment of the present application provides a web page scrolling positioning method, where an execution subject of the web page scrolling positioning method is a client, and the method includes the following steps:
s201, when the webpage is displayed in a rolling mode on the browser, the client acquires display information of the monitored elements returned by the monitor.
As shown in fig. 3, a web page includes a plurality of title elements and a plurality of paragraph elements, and at least one paragraph element is disposed under each title element. The element content in the title element is a brief introduction to the element content in the paragraph element.
The browser is provided with a navigation area 111 and a display area 112, and the navigation area is used for displaying the title elements in the webpage. The display area is used for displaying a title element and a paragraph element. Typically, the display area can only display part of the title elements and part of the paragraph elements, the remaining title elements and paragraph elements being invisible.
The monitored elements comprise title elements and paragraph elements, a monitor is deployed for each title element and each paragraph element in the webpage, and the visibility of each title element and each paragraph element in the display area is monitored. When the display state of the intercepted title element and the intercepted paragraph element in the display area changes, returning the display information of the intercepted element.
The display information of the monitored elements comprises identification information, position information and display scale. The position information of the intercepted element includes the top position, the bottom position, the left position and the right position of the area in which the intercepted element is located. The display scale refers to the display scale of the monitored element on the display area.
Continuing with FIG. 3, the web page includes a title element a, a paragraph element b, a paragraph element c, a title element d, and a paragraph element e. The display scale of the title element a is 0%, that is, invisible on the display area. The display ratio of the paragraph element b is 70%, the display ratio of the paragraph element c and the title element d is 100%, and the display ratio of the paragraph element d is 30%.
When the webpage is displayed in a rolling mode on the browser, the monitor monitors the display state of each monitored element, the thread used by the monitor is different from the thread used by the browser for displaying the webpage, namely the monitoring process of the monitor and the display process of the browser are asynchronous, the monitoring process and the display process cannot affect each other, and therefore the browser cannot drop frames due to the fact that the monitoring process needs to be processed.
S202, the client side carries out style processing on the title elements associated with the monitored elements according to the display information to obtain style data of the title elements in the navigation area.
Wherein the content of the element in the title element is a brief introduction to the content of the element in the paragraph element located below the title element. A paragraph element is associated with a title element that is located above the paragraph element.
And if the monitored element with the changed display state is a paragraph element, acquiring the identification information of the title element associated with the original element of the paragraph. And processing the style of the title element in the navigation area according to the identification information of the title element to obtain style data of the title element in the navigation area.
And if the monitored element with the changed display state is the title element, directly acquiring the identification information of the title element, and processing the style of the title element in the navigation area to acquire the style data of the title element in the navigation area.
And S203, the client displays the title element on the navigation area according to the style data of the title element in the navigation area.
And after obtaining the style data of the title element on the navigation area, displaying the title element on the navigation area according to the style data of the title element on the navigation area.
In one embodiment, if the style data of the title element in the navigation area is selected style data, the style of the title element is in a selected state in the navigation area.
In the technical scheme, the monitor and the webpage display are carried out asynchronously, so that the webpage display is not influenced in the monitoring process, and the problem of webpage frame drop is avoided. And the monitor monitors the display state change of the monitored element, and returns the display information of the monitored element when the change occurs, so that the data processing amount can be reduced, the expense of a CPU (central processing unit) is reduced, and the webpage display performance is improved.
As shown in fig. 4, an embodiment of the present application provides a web page scrolling positioning method, where the web page scrolling positioning method includes the following steps:
s301, the client configures identification information for each title element to generate the identification information of each title element.
The method comprises the steps of configuring identification information for each title element in a webpage to obtain the identification information of each title element, wherein the identification information is used for performing style processing.
In one embodiment, configuring the identification information for each title element is achieved by defining the identification information of the title element inside each title tag.
In one embodiment, a class name is added to each title tag in the web page as the identification information of the title element.
S302, the client side obtains the node relation between each title element and each paragraph element.
And acquiring a DOM table of the webpage, and acquiring the node relation between each title element and each paragraph element according to the DOM table.
And S303, the client associates the title element with the paragraph element according to the node relationship.
After the node relation between each title element and each paragraph element is obtained, the title elements and the paragraph elements are associated according to the node relation.
In one embodiment, a paragraph element between two title elements is managed with the top one of the two title elements, and the bottom paragraph element is associated with the nearest title element to the paragraph element.
With continued reference to fig. 3, the web page includes a title element a, a paragraph element b, a paragraph element c, a title element d, and a paragraph element e, where the paragraph element b and the paragraph element c are associated with the title element a, and the paragraph element e is associated with the title element.
S304, the client establishes a listener of each title element in the webpage and a listener of each paragraph element in the webpage.
The monitored elements comprise title elements and paragraph elements, and a monitor of each title element in the webpage and a monitor of each paragraph element in the webpage are established, so that the display state of each title element and the display state of each paragraph element are monitored in real time.
In one embodiment, when a webpage is initialized, a list of all DOM elements to be listened to is obtained through a style selector, the list is circularly traversed, and a listener is established for each DOM element in the list. When the monitor is established, the attribute parameters of the monitor are configured to change the size of a monitoring window, so that the display proportion in the display information returned by the monitor is influenced. In this embodiment, the window size may be set to the size of the window area on the browser.
S305, the client acquires the display information of the monitored elements returned by the monitor when the webpage is scrolled and displayed on the browser.
The thread used by the monitor is different from the thread used by the browser for displaying the webpage, so that the monitoring process and the webpage displaying process cannot be influenced mutually, and the frame drop phenomenon cannot occur.
The monitor monitors the display state change of each monitored element in real time, and returns the display information of the monitored element when the display state of each monitored element changes, so that the style of the title elements in the navigation area is adjusted in real time according to the display information, a plurality of marked title elements are prevented from appearing in the navigation area, and the accuracy of webpage scrolling positioning is improved.
The listener will typically return an array, each member in the data being an object of change, and the array includes two members if the display status of two simultaneously listened to elements changes. Each member contains the following information:
monitoring time, displaying the time when the state changes;
the monitored element is a DOM node;
position information of the window area, including a top position, a bottom position, a left position and a right position of the window area;
the position information of the region where the monitored element is located comprises the top position, the bottom position, the left position and the right position of the region where the monitored element is located;
the position information of a cross region between the region where the monitored element is located and the window region;
the scale information of the intersection area indicates that the display is complete when the scale information is 100%, and indicates that the display is not complete when the scale information is 0%.
S306, performing style processing on the title element associated with the monitored element according to the display information to obtain style data of the title element in the navigation area.
When the monitor monitors the display states of the monitored elements, the monitor may monitor that the display states of the two monitored elements change at the same time.
The following distance description refers to the display state in which two intercepted elements are simultaneously intercepted. As shown in fig. 5a, at the previous time, the display ratios of the title element a, the paragraph element b, and the paragraph element c are all 100%, and the display ratios of the title element d and the paragraph element e are 0%. At the present moment, as shown in fig. 5b, the display ratio of the paragraph element b and the paragraph element c is still 100%, the display ratio of the paragraph element e is still 0%, the display ratio of the title element a is reduced to 90%, and the display ratio of the title element d is increased to 10%.
When the display states of a plurality of monitored elements are monitored to be changed, the following mode is specifically adopted for carrying out style processing: and selecting the monitored element closest to the navigation area from the plurality of monitored elements as a target element according to the display information. And carrying out style processing on the title element associated with the target element to obtain style data of the title element.
When selecting the target element, the following steps are specifically adopted for selection: and extracting the position information of the area where the target element is located from the display information of the monitored element, determining the distance from the top of the area where the monitored element is located to the top of the navigation area according to the position information of the area where the monitored element is located, and recording the distance as a first distance. And judging whether the first distance is smaller than a distance threshold value, if the first distance is smaller than or equal to the distance threshold value, the target element is a monitored element corresponding to the first distance.
When the distance from the top of the area where the monitored element is located to the top of the navigation area is less than or equal to the distance from the bottom of the navigation area to the top of the navigation area, the monitored element is shown to disappear gradually, and the style processing needs to be performed on the title element associated with the monitored element.
After the target element is obtained, style processing is carried out on the title element associated with the target element to obtain style data of the title element.
In one embodiment, the style-selected processing is performed on the title element associated with the target element to obtain style data of the title element. More specifically, the attribute parameter of the selected style of the navigation area is set as the identification information of the title element associated with the target element, thereby realizing modification of the style data of the title element associated with the target element.
When the displayed content in the display area of the browser is scrolled, the monitor monitors the display state of the title element or the paragraph element, and returns the display information of the monitored element when the display state changes. When the display area is large, two or more monitored elements may be monitored at the same time, so that it is impossible to determine which element is disappearing, and a JavaScript code is added to the web page, and the bottom of the navigation area is used as a boundary, so that a monitored element meeting the condition is selected from the monitored elements.
In one embodiment, the top value of the area where the monitored element is located is selected to be smaller than the top value of the navigation area, that is, the monitored element is a qualified element as long as the monitored element rolls to the top navigation position.
And determining the identification of the title element associated with the element meeting the condition, and assigning an attribute parameter active representing the selected style to the navigation area to dynamically modify the selected style of the title element in the navigation area, so that the navigation area is dynamically selected when the title area rolls to the top of the window area.
And S307, the client displays the title element on the navigation area according to the style data of the title element in the navigation area.
And after obtaining the style data of the title element in the navigation area, displaying the title element on the navigation area according to the style data of the title element in the navigation area.
In the above technical solution, when it is monitored that the display state of a plurality of monitored elements changes, the monitored element closest to the navigation area is selected, and the style of the header element associated with the monitored element is adjusted, so that the header element is marked in the navigation area after the header element or the paragraph element associated with the header element begins to disappear.
As shown in fig. 6, another embodiment of the present application provides a web page scrolling positioning device, where the web page scrolling positioning status specifically includes:
an obtaining module 501, configured to obtain display information of a monitored element returned by a listener when a web page is displayed in a scrolling manner on a browser, where a thread used by the listener is different from a thread used by the browser in displaying the web page, and the display information is returned when a change in a display state of the monitored element in a display area is monitored;
a processing module 502, configured to perform style processing on the title element associated with the monitored element according to the display information, to obtain style data of the title element in the navigation area;
the processing module 502 is further configured to display the title element in the navigation area according to the style data of the title element in the navigation area.
In an embodiment, the processing module 502 is specifically configured to:
when the display states of the plurality of monitored elements are monitored to be changed, selecting a target element from the plurality of monitored elements according to the display information, wherein the target element is the monitored element closest to the navigation area;
and performing style processing on the title element associated with the target element to obtain style data of the title element in the navigation area.
In an embodiment, the processing module 502 is specifically configured to:
determining the distance from the top of the area where the monitored element is located to the top of the navigation area according to the position information of the area where the monitored element is located, and recording the distance as a first distance;
if the first distance is smaller than or equal to the distance threshold, the target element is a monitored element corresponding to the first distance;
the display information comprises position information of an area where the target element is located, and the distance threshold is the distance from the bottom of the navigation area to the top of the navigation area.
In an embodiment, the processing module 502 is specifically configured to:
and carrying out selected style processing on the title element associated with the target element to obtain style data of the title element in the navigation area.
In one embodiment, the processing module 502 is further configured to:
and setting the attribute parameter of the selected style of the navigation area as the identification information of the title element associated with the target element.
In one embodiment, the processing module 502 is further configured to:
establishing a listener of each title element in a webpage and a listener of each paragraph element in the webpage; wherein the listened elements include a header element and a paragraph element.
In one embodiment, the processing module 502 is further configured to:
acquiring a node relation between each title element and each paragraph element;
and associating the title element with the paragraph element according to the node relation.
In one embodiment, the processing module 502 is further configured to:
and configuring identification information for each title element to generate the identification information of each title element.
As shown in fig. 7, another embodiment of the present application provides a server 600, where the server is an intermediate server or a user server, and the server 600 includes: a transmitter 601, a receiver 602, a memory 603, and a processor 604.
Wherein, the transmitter 601 is used for transmitting instructions and data, the receiver 602 is used for receiving instructions and data, the memory 603 is used for storing computer-executable instructions, and the processor 604 is used for executing the computer-executable instructions stored in the memory to implement the steps executed by the web page scrolling positioning method in the above-mentioned embodiments. Specifically, reference may be made to the related description in the foregoing embodiment of the web page scrolling positioning method.
Alternatively, the memory 603 may be separate or integrated with the processor 604. When the memory 603 is separately provided, the processing device further includes a bus for connecting the memory 603 and the processor 604.
The embodiment of the present application further provides a computer-readable storage medium, in which computer-executable instructions are stored, and when the processor executes the computer-executable instructions, the method for scrolling and positioning a web page, which is executed by the processing device, is implemented.
The embodiment of the present application further provides a computer program product, which includes instructions, and when the instructions are executed by a processor, the method for scrolling and positioning a web page is implemented by the processing device.
Other embodiments of the present application will be apparent to those skilled in the art from consideration of the specification and practice of the invention disclosed herein. This application is intended to cover any variations, uses, or adaptations of the invention following, in general, the principles of the application and including such departures from the present disclosure as come within known or customary practice within the art to which the invention pertains. It is intended that the specification and examples be considered as exemplary only, with a true scope and spirit of the application being indicated by the following claims.
It will be understood that the present application is not limited to the precise arrangements described above and shown in the drawings and that various modifications and changes may be made without departing from the scope thereof. The scope of the application is limited only by the appended claims.
Claims (12)
1. A webpage scrolling positioning method is characterized by comprising the following steps:
when a webpage is displayed in a rolling mode on a browser, display information of a monitored element returned by a monitor is obtained, wherein a thread used by the monitor is different from a thread used by the browser for displaying the webpage, and the display information is returned when the display state of the monitored element in a display area is monitored to be changed;
performing style processing on the title element associated with the monitored element according to display information to obtain style data of the title element in a navigation area;
and displaying the title element in the navigation area according to the style data of the title element in the navigation area.
2. The method according to claim 1, wherein performing style processing on the header element associated with the monitored element according to the display information to obtain style data of the header element in the navigation area specifically includes:
when the display states of a plurality of monitored elements are monitored to be changed, selecting a target element from the plurality of monitored elements according to the display information, wherein the target element is the monitored element closest to the navigation area;
and performing style processing on the title element associated with the target element to obtain style data of the title element in a navigation area.
3. The method according to claim 2, wherein selecting a target element from the plurality of monitored elements according to the display information comprises:
determining the distance from the top of the area where the monitored element is located to the top of the navigation area according to the position information of the area where the monitored element is located, and recording the distance as a first distance;
if the first distance is smaller than or equal to a distance threshold, the target element is the monitored element corresponding to the first distance;
wherein the display information includes position information of an area where the target element is located, and the distance threshold is a distance between the bottom of the navigation area and the top of the navigation area.
4. The method according to claim 2, wherein performing style processing on the header element associated with the target element to obtain style data of the header element in the navigation area specifically comprises:
and carrying out selected style processing on the title element associated with the target element to obtain style data of the title element in a navigation area.
5. The method according to claim 4, wherein performing a selected style process on the title element associated with the target element to obtain style data of the title element in the navigation area specifically comprises:
and setting the attribute parameter of the selected style of the navigation area as the identification information of the title element associated with the target element.
6. The method according to any one of claims 1 to 5, wherein before acquiring the display information of the intercepted element returned by the listener, the method further comprises:
establishing a listener of each title element in the webpage and a listener of each paragraph element in the webpage; wherein the listened elements comprise a header element and a paragraph element.
7. The method according to any one of claims 1 to 5, wherein before acquiring the display information of the intercepted element returned by the listener, the method further comprises:
acquiring a node relation between each title element and each paragraph element;
and associating the title element with the paragraph element according to the node relation.
8. The method of claim 7, wherein prior to obtaining the node relationship between each title element and each paragraph element, the method further comprises:
and configuring identification information for each title element to generate the identification information of each title element.
9. A web page scrolling pointing device, comprising:
the system comprises an acquisition module, a display module and a display module, wherein the acquisition module is used for acquiring display information of a monitored element returned by a monitor when a webpage is displayed in a rolling manner on a browser, the thread used by the monitor is different from the thread used by the browser for displaying the webpage, and the display information is returned when the state change of the monitored element in a display area is monitored;
the processing module is used for processing the style of the title element associated with the monitored element according to the display information to obtain style data of the title element in a navigation area;
the processing module is further configured to display the title element in the navigation area according to the style data of the title element in the navigation area.
10. A web page scrolling pointing device, comprising: a memory, a processor;
a memory; a memory for storing the processor-executable instructions;
wherein the processor is configured to execute the web page scroll positioning method according to any one of claims 1 to 8.
11. A computer-readable storage medium having stored thereon computer-executable instructions for implementing a method for web page roll positioning as claimed in any one of claims 1 to 8 when executed by a processor.
12. A computer program product comprising a computer program which, when executed by a processor, implements a method of web page roll positioning as claimed in any one of claims 1 to 8.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110385327.5A CN113761424A (en) | 2021-04-09 | 2021-04-09 | Webpage rolling positioning method, equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110385327.5A CN113761424A (en) | 2021-04-09 | 2021-04-09 | Webpage rolling positioning method, equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113761424A true CN113761424A (en) | 2021-12-07 |
Family
ID=78786865
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110385327.5A Pending CN113761424A (en) | 2021-04-09 | 2021-04-09 | Webpage rolling positioning method, equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113761424A (en) |
Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103605688A (en) * | 2013-11-01 | 2014-02-26 | 北京奇虎科技有限公司 | Intercept method and intercept device for homepage advertisements and browser |
| US20150309971A1 (en) * | 2012-11-21 | 2015-10-29 | Roofoveryourhead Marketing Ltd. | A browser extension for the collection and distribution of data and methods of use thereof |
| CN107087236A (en) * | 2017-03-22 | 2017-08-22 | 北京潘达互娱科技有限公司 | A kind of live information methods of exhibiting and device |
| CN108319505A (en) * | 2017-12-18 | 2018-07-24 | 湖北鸿云科技股份有限公司 | Network data communication system and method based on IOCP mechanism combinations pond fragment |
| CN110018862A (en) * | 2018-01-09 | 2019-07-16 | 龙芯中科技术有限公司 | The data processing method and device of browser |
| CN110221922A (en) * | 2018-03-02 | 2019-09-10 | 网易（杭州）网络有限公司 | The Caton localization method and device of program product, medium and calculate equipment |
| CN110442819A (en) * | 2019-07-24 | 2019-11-12 | 腾讯科技（深圳）有限公司 | Data processing method, device, storage medium and terminal |
| US20200097613A1 (en) * | 2018-09-25 | 2020-03-26 | Salesforce.Com, Inc. | Systems and methods for providing client-side enablement of server communications via a single communication session for a plurality of browser-based presentation interfaces |
| CN111158839A (en) * | 2019-12-31 | 2020-05-15 | 中国银行股份有限公司 | Paragraph content display method and device |
| CN112035768A (en) * | 2020-08-27 | 2020-12-04 | 深圳市欢太科技有限公司 | Page rendering method and device for fast application, storage medium and electronic equipment |
-
2021
- 2021-04-09 CN CN202110385327.5A patent/CN113761424A/en active Pending
Patent Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150309971A1 (en) * | 2012-11-21 | 2015-10-29 | Roofoveryourhead Marketing Ltd. | A browser extension for the collection and distribution of data and methods of use thereof |
| CN103605688A (en) * | 2013-11-01 | 2014-02-26 | 北京奇虎科技有限公司 | Intercept method and intercept device for homepage advertisements and browser |
| CN107087236A (en) * | 2017-03-22 | 2017-08-22 | 北京潘达互娱科技有限公司 | A kind of live information methods of exhibiting and device |
| CN108319505A (en) * | 2017-12-18 | 2018-07-24 | 湖北鸿云科技股份有限公司 | Network data communication system and method based on IOCP mechanism combinations pond fragment |
| CN110018862A (en) * | 2018-01-09 | 2019-07-16 | 龙芯中科技术有限公司 | The data processing method and device of browser |
| CN110221922A (en) * | 2018-03-02 | 2019-09-10 | 网易（杭州）网络有限公司 | The Caton localization method and device of program product, medium and calculate equipment |
| US20200097613A1 (en) * | 2018-09-25 | 2020-03-26 | Salesforce.Com, Inc. | Systems and methods for providing client-side enablement of server communications via a single communication session for a plurality of browser-based presentation interfaces |
| CN110442819A (en) * | 2019-07-24 | 2019-11-12 | 腾讯科技（深圳）有限公司 | Data processing method, device, storage medium and terminal |
| CN111158839A (en) * | 2019-12-31 | 2020-05-15 | 中国银行股份有限公司 | Paragraph content display method and device |
| CN112035768A (en) * | 2020-08-27 | 2020-12-04 | 深圳市欢太科技有限公司 | Page rendering method and device for fast application, storage medium and electronic equipment |
Non-Patent Citations (1)
| Title |
|---|
| 冯佩佩;: "VRML多用户网络通信的设计与实现", 郑州轻工业学院学报(自然科学版), no. 02, 15 April 2009 (2009-04-15) * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| EP3518124A1 (en) | Webpage rendering method and related device | |
| JP5324411B2 (en) | Advertisement distribution apparatus, method and program | |
| US10863016B2 (en) | Display controlling method, terminal, information processing apparatus, and storage medium | |
| CN109684586B (en) | Page optimization display method and device, computer equipment and storage medium | |
| US20150220990A1 (en) | Systems and methods of serving parameter-dependent content to a resource | |
| CN105210051A (en) | Estimating visibility of content items | |
| CN109740081B (en) | Page loading method and device | |
| CN110209978B (en) | Data processing method and related device | |
| CN108616575B (en) | Operation monitoring method and device, computer equipment and storage medium | |
| CN111767100A (en) | Image processing method, device, system and medium applied to browser | |
| CN114117274A (en) | Data rendering method and device, computer equipment and storage medium | |
| CN113190321A (en) | Method and equipment for application program page pull-up refreshing | |
| US10607379B2 (en) | Graph drawing system | |
| JP2013232225A (en) | Content distribution device, content distribution method, content distribution program, and program for terminal | |
| CN114254222A (en) | Method and device for counting interactive time of single-page application and electronic equipment | |
| CN110504020B (en) | Medical image information system and method for displaying dicom image file by browser | |
| CN113761424A (en) | Webpage rolling positioning method, equipment and storage medium | |
| US20170270218A1 (en) | Mapping of Defined Regions Within a Webpage | |
| JP6339550B2 (en) | Terminal program, terminal device, and terminal control method | |
| CN111556355A (en) | Method, device and equipment for presenting bullet screen and storage medium | |
| CN112230952A (en) | Form updating method and device, computer equipment and storage medium | |
| CN105824606A (en) | Scroll input method and terminal | |
| CN113868563A (en) | Method, device, terminal and storage medium for progressively rendering webpage | |
| CN114168130A (en) | Buried point data reporting method and device, electronic equipment and storage medium | |
| CN108182237B (en) | Big data display method, system and related device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |