CN113901352A - Webpage operation playback method, device, equipment and storage medium - Google Patents
Webpage operation playback method, device, equipment and storage medium Download PDFInfo
- Publication number
- CN113901352A CN113901352A CN202111227565.XA CN202111227565A CN113901352A CN 113901352 A CN113901352 A CN 113901352A CN 202111227565 A CN202111227565 A CN 202111227565A CN 113901352 A CN113901352 A CN 113901352A
- Authority
- CN
- China
- Prior art keywords
- webpage
- page
- event
- monitored
- playback
- 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
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/953—Querying, e.g. by the use of web search engines
- G06F16/9538—Presentation of query results
-
- 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/903—Querying
- G06F16/90335—Query processing
- G06F16/90344—Query processing by using string matching techniques
-
- 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/953—Querying, e.g. by the use of web search engines
- G06F16/9532—Query formulation
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Computational Linguistics (AREA)
- Mathematical Physics (AREA)
- Information Transfer Between Computers (AREA)
- Debugging And Monitoring (AREA)
Abstract
The invention relates to the technical field of computers, and discloses a webpage operation playback method, a device, equipment and a storage medium, wherein the method comprises the following steps: acquiring page information of a webpage to be monitored, wherein the page information comprises Dom element information, CSS style information and view state information which cannot be reflected in HTML; monitoring a webpage operation event generated on a webpage to be monitored by using a preset monitoring event and storing the webpage operation event; responding to a playback request of webpage operation, extracting a webpage operation event, and reconstructing a playback page of a webpage to be monitored based on page information; and generating a simulation animation for the webpage operation event according to a preset rule and playing back the simulation animation on a playback page. By the mode, the record of the webpage operation process can be completely stored, and the occupied storage space is small when the record is stored in a data mode.
Description
Technical Field
The present application relates to the field of computer technologies, and in particular, to a method, an apparatus, a device, and a storage medium for webpage operation playback.
Background
In the process of web page browsing and operation, it is often necessary to record browsing and operation information of a user, for example, explaining browsed content and sending the explanation to a third party, so that the third party can perform web page playback to fully understand content, emphasis and operation process included in a web page. In addition, in some special requirements, it is required to strictly record the browsing and operating processes of the web page, and generate web page operating process recorded data for inspection, and at the same time, it is required to consider the integrity of the recorded data, and it is not allowed to tamper, for example, in the "notification about the retrospective management of the standardized internet insurance sales behavior" issued by the bank and custody, it is explicitly required to make the retrospective of the internet insurance sales behavior, i.e. the operating process sold through the web page is completely recorded, and the generated data for inspection is stored, and it is emphasized that the retrospective data of the internet insurance sales behavior should be restored to an effective file for inspection, and the sales page should be restored to an effective picture or video for inspection, so as to facilitate inspection and use.
In the prior art, a mode of screen recording is adopted for recording a webpage operation process to generate a video, and the method has the characteristics of large volume, inconvenience in recording and difficulty in checking, generally, in the webpage operation process of internet insurance, the operation time is calculated according to 10 minutes, the size of a generated recording file is more than 500M, a user is required to install screen recording software to complete the insurance process, and the behaviors of the user are limited; checking for recorded video does not allow one to quickly locate a certain content (e.g., the user's signature in the health advice item).
Disclosure of Invention
The application provides a webpage operation playback method, a webpage operation playback device, a webpage operation playback equipment and a webpage operation playback storage medium, and aims to solve the problem that existing webpage operation video recording occupies too much storage resources.
In order to solve the technical problem, the application adopts a technical scheme that: provided is a webpage operation playback method, comprising the following steps: acquiring page information of a webpage to be monitored, wherein the page information comprises Dom element information, CSS style information and view state information which cannot be reflected in HTML; monitoring a webpage operation event generated on a webpage to be monitored by using a preset monitoring event and storing the webpage operation event; responding to a playback request of webpage operation, extracting a webpage operation event, and reconstructing a playback page of a webpage to be monitored based on page information; and generating a simulation animation for the webpage operation event according to a preset rule and playing back the simulation animation on a playback page.
As a further improvement of the present application, in response to a playback request of a web page operation, extracting a web page operation event, and reconstructing a playback page of a web page to be monitored based on page information, the method includes: responding to a webpage playback request of webpage operation, and filtering script tags in the webpage information by using a regular expression; and based on the iframe sandbox function, reconstructing a playback page according to the filtered page information.
As a further improvement of the application, the method for monitoring the webpage operation events occurring on the webpage to be monitored by using the preset monitoring event and storing the webpage operation events comprises the following steps: when detecting that a user opens a webpage to be monitored, starting a preset monitoring event to monitor an event occurring on the webpage to be monitored and the occurrence time of the event; and when the user is detected to close the webpage to be monitored, stopping presetting the monitoring event, generating a webpage operation event according to the monitored event and the occurrence time of the event, and storing the webpage operation event.
As a further improvement of the present application, monitoring events occurring on a page to be monitored includes: monitoring a target top-layer Dom element when a webpage to be monitored is operated; confirming a target actual Dom element of an occurrence event based on an event bubbling mechanism; the event that occurred and the target actual Dom element are recorded.
As a further improvement of the application, the method for monitoring the webpage operation events occurring on the webpage to be monitored by using the preset monitoring event and storing the webpage operation events comprises the following steps: monitoring a webpage operation event generated on a webpage to be monitored by using a preset monitoring event; storing the webpage operation event and the page information into a database, and constructing a search index based on two dimensions of the name of the page to be monitored and the time of the webpage operation event.
As a further improvement of the present application, when a playback request is received, extracting a webpage operation event, and reconstructing a playback page of a webpage to be monitored based on page information includes: receiving query information input by a user, wherein the query information comprises a query page name and query time; matching the query page name and the query time with the search index, and querying to obtain a webpage operation event; and reconstructing a playback page of the webpage to be monitored based on the page information.
As a further improvement of the present application, the web page operation event includes a Dom element change, a mouse click, a mouse movement, a page or element movement, a window size change, or an input box input.
In order to solve the above technical problem, another technical solution adopted by the present application is: provided is a web page operation playback apparatus including: the acquisition module is used for acquiring page information of the webpage to be monitored, wherein the page information comprises Dom element information, CSS style information and view states which cannot be reflected in HTML; the monitoring module is used for monitoring and storing webpage operation events generated on the webpage to be monitored by utilizing preset monitoring events; the reconstruction module is used for extracting the webpage operation event when receiving the playback request and reconstructing the playback page of the webpage to be monitored based on the page information; and the playback module is used for generating the simulation animation according to the webpage operation event according to the preset rule and playing back the simulation animation on the playback page.
In order to solve the above technical problem, the present application adopts another technical solution that: there is provided a computer device comprising a processor, a memory coupled to the processor, the memory having stored therein program instructions which, when executed by the processor, cause the processor to perform the steps of the web page operation playback method as claimed in any one of the above.
In order to solve the above technical problem, the present application adopts another technical solution that: there is provided a storage medium storing program instructions capable of implementing the above-described web page operation playback method.
The beneficial effect of this application is: according to the webpage operation playback method, event monitoring is carried out on a webpage to be monitored, a webpage operation event is recorded and stored, page information of the webpage to be monitored is obtained, after a playback request is received, a playback page of the webpage to be monitored is rebuilt according to the page information, the webpage operation event is restored into a simulation animation, the simulation animation is played back on the playback page, the stored webpage operation event and the stored page information are both character string data, the occupied space is small and is far smaller than the size of a video file, in addition, when a preset monitoring event of the webpage to be monitored is monitored, the occupied resources are far smaller than those when video recording software operates, and the resource consumption is reduced.
Drawings
Fig. 1 is a flowchart illustrating a method for playing back a web page operation according to a first embodiment of the present invention;
FIG. 2 is a functional block diagram of a playback apparatus for web page operations according to an embodiment of the present invention;
FIG. 3 is a schematic structural diagram of a computer device according to an embodiment of the present invention;
fig. 4 is a schematic structural diagram of a storage medium according to an embodiment of the present invention.
Detailed Description
The technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are only a part of the embodiments of the present application, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.
The terms "first", "second" and "third" in this application are used for descriptive purposes only and are not to be construed as indicating or implying relative importance or implying any indication of the number of technical features indicated. Thus, a feature defined as "first," "second," or "third" may explicitly or implicitly include at least one of the feature. In the description of the present application, "plurality" means at least two, e.g., two, three, etc., unless explicitly specifically limited otherwise. All directional indications (such as up, down, left, right, front, and rear … …) in the embodiments of the present application are only used to explain the relative positional relationship between the components, the movement, and the like in a specific posture (as shown in the drawings), and if the specific posture is changed, the directional indication is changed accordingly. Furthermore, the terms "include" and "have," as well as any variations thereof, are intended to cover non-exclusive inclusions. For example, a process, method, system, article, or apparatus that comprises a list of steps or elements is not limited to only those steps or elements listed, but may alternatively include other steps or elements not listed, or inherent to such process, method, article, or apparatus.
Reference herein to "an embodiment" means that a particular feature, structure, or characteristic described in connection with the embodiment can be included in at least one embodiment of the application. The appearances of the phrase in various places in the specification are not necessarily all referring to the same embodiment, nor are separate or alternative embodiments mutually exclusive of other embodiments. It is explicitly and implicitly understood by one skilled in the art that the embodiments described herein can be combined with other embodiments.
Fig. 1 is a flowchart illustrating a method for operating and playing back a web page according to an embodiment of the present invention. It should be noted that the method of the present invention is not limited to the flow sequence shown in fig. 1 if the results are substantially the same. As shown in fig. 1, the method comprises the steps of:
step S101: and acquiring page information of the webpage to be monitored, wherein the page information comprises Dom element information, CSS style information and view state information which cannot be reflected in HTML.
In this embodiment, the Dom element information of the whole webpage can be directly obtained by providing a corresponding API interface through a browser, and can be converted into character string type data which is convenient to store. The CSS style information is a front-end code language for implementing visual modification of a web page, such as a space, a width, a height, a size, an arrangement layout, a color, and the like of the web page, and the Dom element information can be assembled into the web page according to the CSS style. View states that cannot be reflected in HTML, for example, values entered in the Input and Textarea tag Input boxes cannot be reflected in HTML data, and therefore, it is necessary to read and record the value values.
In step S101, when a user opens a web page, if the web page is a to-be-monitored web page, acquiring page information of the web page, storing the page information, and reconstructing the to-be-monitored web page through the page information.
Step S102: and monitoring a webpage operation event generated on the webpage to be monitored by using a preset monitoring event and storing the webpage operation event.
Further, the web page operation event includes a Dom element change, a mouse click, a mouse movement, a page or element movement, a window size change, or an input box input. Specifically, events occurring in other peripheral devices related to the web page to be listened to, such as keyboard operation events, etc., may also be used.
In step S102, the web page operation event can be monitored through the monitoring event provided by js, and for each type of web page operation event, only data required for playing back the type of web page operation event need to be recorded, such as recording of mouse movement, horizontal and vertical relative positions of the mouse with respect to the browser, data input when the input box is input, data of page or element scrolling in the horizontal and vertical curl sizes of the page, and data of window size variation in the width and height of the current browser are recorded, and the visual change process of the whole web page can be restored through the data.
It should be noted that after the web page operation event is monitored, the occurrence time of the web page operation event needs to be recorded, and when the web page operation event is stored, the web page operation event is sequentially stored according to the time sequence relationship, so that the web page operation event can be sequentially played back subsequently according to the time sequence relationship, and the actually occurring web page operation event is really fed back.
Further, in some embodiments, after saving the web page operation event, the method further includes: and performing incremental statistics on the stored webpage operation events, compressing the newly added data of the webpage operation events when the data size of the webpage operation events reaches a preset threshold value, and uploading the compressed data to a cloud server.
Specifically, the preset threshold may be preset by a user, when the data of the newly added webpage operation event reaches the preset threshold, the data of the newly added webpage operation event is compressed, and then the compressed data is uploaded to the cloud server, and in order to facilitate quick search of corresponding data, when the data is uploaded, the data is named, where the name includes an occurrence time period of the newly added webpage operation event and a name of a webpage to be monitored, and an index is established according to the occurrence time period and the name. When a user needs to inquire the data of the corresponding webpage operation event, the corresponding data can be quickly found according to the occurrence time period and the index and then played back after being downloaded.
Further, in some embodiments, the step S102 specifically includes:
1. when the user is detected to open the webpage to be monitored, a preset monitoring event is started to monitor the event occurring on the webpage to be monitored and the occurrence time of the event.
2. And when the user is detected to close the webpage to be monitored, stopping presetting the monitoring event, generating a webpage operation event according to the monitored event and the occurrence time of the event, and storing the webpage operation event.
Specifically, when a user enters a webpage to be monitored, monitoring of a webpage operation event is started, when the user leaves the webpage to be monitored, monitoring of the webpage to be monitored is stopped, and then all webpage operation events in the period are stored. It should be understood that if the web page operation event is stored in real time, a large amount of CPU resources are occupied for processing, and therefore, in this embodiment, the web page operation event does not need to be stored in real time each time, but the web page operation event occurring in the period is stored when the user closes the web page to be monitored, so that the occupation and consumption of resources are reduced.
Further, monitoring an event occurring on the page to be monitored, including:
1. and monitoring the target top-level Dom element when the webpage to be monitored operates.
2. And confirming the target actual Dom element of the occurred event based on the event bubbling mechanism.
Specifically, the event bubbling mechanism is an event monitoring mechanism of a browser, and the browser can deliver the event information to the top-most Dom element layer by layer through element nesting when the Dom element is triggered by a certain event.
3. The event that occurred and the target actual Dom element are recorded.
Specifically, the number of Dom elements in the web page is large, and if a monitoring event is added to each Dom element, a large amount of resources are occupied, performance of web page browsing is affected, and user experience is poor.
Further, in some embodiments, the step S102 specifically includes:
1. and monitoring a webpage operation event generated on the webpage to be monitored by using a preset monitoring event.
2. Storing the webpage operation event and the page information into a database, and constructing a search index based on two dimensions of the name of the page to be monitored and the time of the webpage operation event.
Specifically, after a preset monitoring event is utilized to monitor and obtain a webpage operation event, the webpage operation event is stored in an IndexDB database of the browser, a search index is established according to the name of a page to be monitored and two dimensions of the event of the webpage operation event, and a user can quickly find the corresponding webpage operation event through the search index.
Step S103: and responding to a playback request of the webpage operation, extracting the webpage operation event, and reconstructing a playback page of the webpage to be monitored based on the page information.
In step S103, after the web page operation event of the web page to be monitored is recorded and stored, the user may play back the web page operation event by inputting a playback request, specifically, find the corresponding web page operation event according to the input playback request, and reconstruct the playback page according to the acquired page information.
Further, in some embodiments, the step S103 specifically includes:
1. and receiving query information input by a user, wherein the query information comprises a query page name and a query time.
Specifically, the query time is a time period during which a web page operation event occurs, where the query time is a name of the new page, i.e., a web page that the user wants to view. The webpage operation event occurring in the corresponding time period can be found by inputting the name of the query page and the query time.
2. And matching the query page name and the query time with the search index, and querying to obtain a webpage operation event.
3. And reconstructing a playback page of the webpage to be monitored based on the page information.
Specifically, the database may store webpage operation events of a plurality of webpages, and when a user needs to perform playback operation, query information input by the user is received, where the query information includes a query page name and query time, and the query page and the query event are matched with the search index to find a corresponding webpage operation event, and meanwhile, page information of a corresponding webpage is acquired to construct a corresponding playback page.
Further, in order to improve the efficiency of web page reconstruction, in some embodiments, the step S103 specifically includes:
1. and responding to a webpage playback request of webpage operation, and filtering script tags in the webpage information by using a regular expression.
It should be noted that the script tag in the web page is generally a js script file that is introduced into the web page to implement an interaction function of the web page and a network data acquisition function, for example, a new web page operation is opened through a web page link. In the webpage operation event playback stage, a new webpage does not need to be opened, when a user needs to jump to the new webpage, the user can directly rebuild a playback webpage according to the webpage information of the webpage and then continuously play back the webpage operation event on the playback webpage, so that the script tag does not have an effect on later-stage playback videos and can cause script error reporting, and therefore filtering is needed. Specifically, since the Dom element information is the character string data, in this embodiment, the script tag in the page information is filtered by a regular expression, and the regular expression is set by the user in advance.
2. And based on the iframe sandbox function, reconstructing a playback page according to the filtered page information.
It should be noted that the sandbox mode can be realized by the existence of a sandbox attribute in the iframe, and the operation that can be performed in the iframe can be limited by setting a value for the attribute, so that the operation of the parent window is not affected.
Specifically, after the script tags in the page information are filtered out, the playback page is reconstructed, the reconstructed playback page has no page interaction function, and the efficiency of reconstructing the playback page is higher after the script tags are filtered out.
Step S104: and generating a simulation animation for the webpage operation event according to a preset rule and playing back the simulation animation on a playback page.
In step S104, after the playback page is reconstructed, the web page operation event is generated into a simulated animation according to a preset rule, for example, a mouse movement event simulates a movement trajectory through animation according to recorded mouse position data, a mouse click event simulates click through flashing animation according to recorded mouse click position data, an input frame input event fills data into a corresponding input frame through recorded event input data and input frame Dom element information, a scroll event controls a page to scroll through page curl data through js, and a window size change event controls a window size through width and height data through js. It should be noted that, when generating the simulation animation, if the simulation animation is a continuous web page operation event, the simulation animation needs to be generated according to the duration of each web page operation event, so that the duration of the simulation animation is the same as the duration of the simulation animation, for example, when the web page operation event is that a mouse drags a certain element on a page to be monitored, the dragging process is a continuous operation, the duration of the continuous operation needs to be recorded, and when generating the simulation animation, the duration of the generated simulation animation is the same as the duration of the continuous operation. And after generating the corresponding simulation animation, sequentially playing the corresponding simulation animation on the webpage to be monitored according to the occurrence time of the webpage operation event, thereby finishing the playback of the webpage operation event.
The webpage operation playback method of the embodiment of the invention carries out event monitoring on the webpage to be monitored, records and stores the webpage operation event, acquires the page information of the webpage to be monitored, reconstructs the playback page of the webpage to be monitored according to the page information after receiving the playback request, then reduces the webpage operation event into the simulated animation, and plays back the simulated animation on the playback page, wherein the stored webpage operation event and the page information are both character string data, the occupied space is small and is far smaller than the size of a video file, and the occupied resources when the preset monitoring event of the webpage to be monitored is monitored are far smaller than the occupied resources when the video recording software runs, thereby reducing the consumption of the resources.
Fig. 2 is a schematic diagram of functional modules of a web page operation playback apparatus according to an embodiment of the present invention. As shown in fig. 2, the apparatus 20 includes an acquisition module 21, a listening module 22, a reconstruction module 23, and a playback module 24.
The acquiring module 21 is configured to acquire page information of a webpage to be monitored, where the page information includes Dom element information, CSS style information, and view state information that cannot be reflected in HTML.
In this embodiment, the Dom element information of the whole webpage can be directly obtained by providing a corresponding API interface through a browser, and can be converted into character string type data which is convenient to store. The CSS style information is a front-end code language for implementing visual modification of a web page, such as a space, a width, a height, a size, an arrangement layout, a color, and the like of the web page, and the Dom element information can be assembled into the web page according to the CSS style. View states that cannot be reflected in HTML, for example, values entered in the Input and Textarea tag Input boxes cannot be reflected in HTML data, and therefore, it is necessary to read and record the value values.
The monitoring module 22 is configured to monitor and store a webpage operation event occurring on the webpage to be monitored by using a preset monitoring event.
Specifically, the web page operation events can be monitored through the monitoring events provided by js, for each type of web page operation event, only data required for playing back the type of web page operation event need to be recorded, for example, a record of mouse movement, a horizontal and vertical relative position of a mouse with respect to a browser, data input when an input box is input, data of page or element scrolling in a horizontal and vertical curling size of a page are recorded, a change in window size records a width and a height of a current browser, and a visual change process of the whole web page can be restored through the data.
It should be noted that after the web page operation event is monitored, the occurrence time of the web page operation event needs to be recorded, and when the web page operation event is stored, the web page operation event is sequentially stored according to the time sequence relationship, so that the web page operation event can be sequentially played back subsequently according to the time sequence relationship, and the actually occurring web page operation event is really fed back.
Further, in some embodiments, after the listening module 22 saves the web page operation event, the listening module 22 is further configured to: and performing incremental statistics on the stored webpage operation events, compressing the newly added data of the webpage operation events when the data size of the webpage operation events reaches a preset threshold value, and uploading the compressed data to a cloud server.
Specifically, the preset threshold may be preset by a user, when the data of the newly added webpage operation event reaches the preset threshold, the data of the newly added webpage operation event is compressed, and then the compressed data is uploaded to the cloud server, and in order to facilitate quick search of corresponding data, when the data is uploaded, the data is named, where the name includes an occurrence time period of the newly added webpage operation event and a name of a webpage to be monitored, and an index is established according to the occurrence time period and the name. When a user needs to inquire the data of the corresponding webpage operation event, the corresponding data can be quickly found according to the occurrence time period and the index and then played back after being downloaded.
The rebuilding module 23 is configured to, in response to a playback request of a web page operation, extract a web page operation event, and rebuild a playback page of the web page to be monitored based on the page information.
Specifically, after the webpage operation event of the webpage to be monitored is recorded and stored, the user can play back the webpage operation event by inputting a playback request, specifically, the webpage operation event corresponding to the playback request is found according to the input playback request, and then the reconstruction module 23 reconstructs the playback page according to the acquired page information.
And the playback module 24 is used for generating the simulation animation according to the webpage operation event according to the preset rule and playing the simulation animation on the playback page.
Specifically, after the reconstruction module 23 reconstructs the playback page, the playback module 24 generates a simulation animation from the webpage operation event according to a preset rule, for example, a mouse movement event simulates a movement track through animation according to recorded mouse position data, a mouse click event simulates click through flashing animation according to recorded mouse click position data, an input box input event fills data into a corresponding input box through recorded event input data and input box Dom element information, a scroll event controls the page to scroll through page curl data through js, and a window size change event controls the window size through width and height data through js. It should be noted that, when generating the simulation animation, if the simulation animation is a continuous web page operation event, the simulation animation needs to be generated according to the duration of each web page operation event, so that the duration of the simulation animation is the same as the duration of the simulation animation, for example, when the web page operation event is that a mouse drags a certain element on a page to be monitored, the dragging process is a continuous operation, the duration of the continuous operation needs to be recorded, and when generating the simulation animation, the duration of the generated simulation animation is the same as the duration of the continuous operation. And after generating the corresponding simulation animation, sequentially playing the corresponding simulation animation on the webpage to be monitored according to the occurrence time of the webpage operation event, thereby finishing the playback of the webpage operation event.
The webpage operation playback device provided by the embodiment of the invention carries out event monitoring on the webpage to be monitored, records and stores the webpage operation event, acquires the page information of the webpage to be monitored, reconstructs the playback page of the webpage to be monitored according to the page information after receiving the playback request, then reduces the webpage operation event into the simulated animation, and plays back the simulated animation on the playback page, wherein the stored webpage operation event and the page information are both character string data, the occupied space is small and is far smaller than the size of a video file, and the occupied resources when the preset monitoring event of the webpage to be monitored is monitored are far smaller than the occupied resources when the video recording software runs, so that the consumption of the resources is reduced.
Optionally, the operation of the rebuilding module 23 executing the playback request responding to the webpage operation, extracting the webpage operation event, and rebuilding the playback page of the webpage to be monitored based on the page information may also be: responding to a playback request of webpage operation, and filtering script tags in the webpage information by using a regular expression; and based on the iframe sandbox function, reconstructing a playback page according to the filtered page information.
It should be noted that the script tag in the web page is generally a js script file that is introduced into the web page to implement an interaction function of the web page and a network data acquisition function, for example, a new web page operation is opened through a web page link. In the webpage operation event playback stage, a new webpage does not need to be opened, when a user needs to jump to the new webpage, the user can directly rebuild a playback webpage according to the webpage information of the webpage and then continuously play back the webpage operation event on the playback webpage, so that the script tag does not have an effect on later-stage playback videos and can cause script error reporting, and therefore filtering is needed. Specifically, since the Dom element information is the character string data, in this embodiment, the script tag in the page information is filtered by a regular expression, and the regular expression is set by the user in advance. The sandbox mode can be realized by the aid of the sandbox attribute existing in the iframe, and operation in the iframe can be limited by setting a value for the attribute, so that operation of a parent window is not affected.
Specifically, the rebuilding module 23 rebuilds the playback page after filtering out the script tag in the page information, where the rebuilt playback page has no page interaction function, and the rebuilding efficiency of the playback page is higher after filtering out the script tag.
Optionally, the operation performed by the monitoring module 22 to monitor and store the webpage operation event occurring on the webpage to be monitored by using the preset monitoring event may also be: when detecting that a user opens a webpage to be monitored, starting a preset monitoring event to monitor an event occurring on the webpage to be monitored and the occurrence time of the event; and when the user is detected to close the webpage to be monitored, stopping presetting the monitoring event, generating a webpage operation event according to the monitored event and the occurrence time of the event, and storing the webpage operation event.
Specifically, when the user enters the web page to be monitored, the monitoring module 22 starts monitoring the web page operation event, and when the user leaves the web page to be monitored, the monitoring on the web page to be monitored is stopped, and then all the web page operation events in the period are saved. It should be understood that if the web page operation event is stored in real time, a large amount of CPU resources are occupied for processing, and therefore, in this embodiment, the web page operation event does not need to be stored in real time each time, but the web page operation event occurring in the period is stored when the user closes the web page to be monitored, so that the occupation and consumption of resources are reduced.
Optionally, the operation of the listening module 22 for listening for the event occurring on the page to be listened to may be further: monitoring a target top-layer Dom element when a webpage to be monitored is operated; confirming a target actual Dom element of an occurrence event based on an event bubbling mechanism; the event that occurred and the target actual Dom element are recorded.
It should be noted that the event bubbling mechanism is an event monitoring mechanism of the browser, and the browser will deliver the event information to the top-level Dom element layer by layer through the element nesting when the Dom element is triggered by some event.
Specifically, the number of Dom elements in the web page is large, and if a monitoring event is added to each Dom element, a large amount of resources are occupied, performance of web page browsing is affected, and user experience is poor, so that in this embodiment, the monitoring module 22 only needs to add a corresponding monitoring event to the top Dom element according to a browser event bubbling mechanism in combination with a node relationship between the Dom elements, and then monitors the top Dom element, thereby avoiding affecting browser performance.
Optionally, the operation performed by the monitoring module 22 to monitor and store the webpage operation event occurring on the webpage to be monitored by using the preset monitoring event may also be: monitoring a webpage operation event generated on a webpage to be monitored by using a preset monitoring event; storing the webpage operation event and the page information into a database, and constructing a search index based on two dimensions of the name of the page to be monitored and the time of the webpage operation event.
Specifically, after the monitoring module 22 monitors a preset monitoring event to obtain a web page operation event, the web page operation event is stored in an indexedDB database of the browser, a search index is established according to the name of the page to be monitored and two dimensions of the event of the web page operation event, and a user can quickly find the corresponding web page operation event through the search index.
Optionally, when the rebuilding module 23 receives the playback request, the operation of extracting the webpage operation event and rebuilding the playback page of the webpage to be monitored based on the page information may further be: receiving query information input by a user, wherein the query information comprises a query page name and query time; matching the query page name and the query time with the search index, and querying to obtain a webpage operation event; and reconstructing a playback page of the webpage to be monitored based on the page information.
Specifically, the database may store web page operation events of a plurality of web pages, and when the user needs to perform a playback operation, the reconstruction module 23 receives query information input by the user, where the query information includes a query page name and query time, matches the query page and the query event with the search index to find a corresponding web page operation event, and obtains page information of the corresponding web page to construct a corresponding playback page.
Optionally, the web page operation event includes a Dom element change, a mouse click, a mouse movement, a page or element movement, a window size change, or an input box input.
It should be noted that, in the present specification, the embodiments are all described in a progressive manner, each embodiment focuses on differences from other embodiments, and the same and similar parts among the embodiments may be referred to each other. For the device-like embodiment, since it is basically similar to the method embodiment, the description is simple, and for the relevant points, reference may be made to the partial description of the method embodiment.
Referring to fig. 3, fig. 3 is a schematic structural diagram of a computer device according to an embodiment of the present invention. As shown in fig. 3, the computer device 30 includes a processor 31 and a memory 32 coupled to the processor 31, wherein the memory 32 stores program instructions, and the program instructions, when executed by the processor 31, cause the processor 31 to perform the following steps:
acquiring page information of a webpage to be monitored, wherein the page information comprises Dom element information, CSS style information and view states which cannot be reflected in HTML;
monitoring a webpage operation event generated on a webpage to be monitored by using a preset monitoring event and storing the webpage operation event;
extracting a webpage operation event when a playback request is received, and reconstructing a playback page of a webpage to be monitored based on page information;
and generating a simulation animation for the webpage operation event according to a preset rule and playing back the simulation animation on a playback page.
In the embodiment, event monitoring is performed on the webpage to be monitored, the webpage operation event is recorded and stored, the page information of the webpage to be monitored is obtained, after the playback request is received, the playback page of the webpage to be monitored is reconstructed according to the page information, the webpage operation event is restored into the simulated animation, the simulated animation is played back on the playback page, the stored webpage operation event and the stored page information are both character string data, the occupied space is small and is far smaller than the size of a video file, the occupied resources when the preset monitoring event of the webpage to be monitored is monitored are far smaller than the occupied resources when the video recording software is operated, and the consumption of the resources is reduced.
The processor 31 may also be referred to as a CPU (Central Processing Unit). The processor 31 may be an integrated circuit chip having signal processing capabilities. The processor 31 may also be a general purpose processor, a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field Programmable Gate Array (FPGA) or other programmable logic device, discrete gate or transistor logic, discrete hardware components. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like.
Referring to fig. 4, fig. 4 is a schematic structural diagram of a storage medium according to an embodiment of the invention. The storage medium of an embodiment of the present invention stores program instructions 41 that implement all of the methods described above, and when the program instructions 41 are executed, the following steps are implemented:
acquiring page information of a webpage to be monitored, wherein the page information comprises Dom element information, CSS style information and view states which cannot be reflected in HTML;
monitoring a webpage operation event generated on a webpage to be monitored by using a preset monitoring event and storing the webpage operation event;
extracting a webpage operation event when a playback request is received, and reconstructing a playback page of a webpage to be monitored based on page information;
and generating a simulation animation for the webpage operation event according to a preset rule and playing back the simulation animation on a playback page.
In the embodiment, event monitoring is performed on the webpage to be monitored, the webpage operation event is recorded and stored, the page information of the webpage to be monitored is obtained, after the playback request is received, the playback page of the webpage to be monitored is reconstructed according to the page information, the webpage operation event is restored into the simulated animation, the simulated animation is played back on the playback page, the stored webpage operation event and the stored page information are both character string data, the occupied space is small and is far smaller than the size of a video file, the occupied resources when the preset monitoring event of the webpage to be monitored is monitored are far smaller than the occupied resources when the video recording software is operated, and the consumption of the resources is reduced.
The program instructions 41 may be stored in the storage medium in the form of a software product, and include several instructions to enable a computer device (which may be a personal computer, a server, or a network device) or a processor (processor) to execute all or part of the steps of the method according to the embodiments of the present application. And the aforementioned storage medium includes: various media capable of storing program codes, such as a usb disk, a removable hard disk, a Read-Only Memory (ROM), a RanDom Access Memory (RAM), a magnetic disk or an optical disk, or computer equipment, such as a computer, a server, a mobile phone, and a tablet.
In the several embodiments provided in the present application, it should be understood that the disclosed computer apparatus, device and method may be implemented in other ways. For example, the above-described apparatus embodiments are merely illustrative, and for example, a division of a unit is merely a logical division, and an actual implementation may have another division, for example, a plurality of units or components may be combined or integrated into another system, or some features may be omitted, or not executed. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection through some interfaces, devices or units, and may be in an electrical, mechanical or other form.
In addition, functional units in the embodiments of the present invention may be integrated into one processing unit, or each unit may exist alone physically, or two or more units are integrated into one unit. The integrated unit can be realized in a form of hardware, and can also be realized in a form of a software functional unit. The above embodiments are merely examples and are not intended to limit the scope of the present disclosure, and all modifications, equivalents, and flow charts using the contents of the specification and drawings of the present disclosure or those directly or indirectly applied to other related technical fields are intended to be included in the scope of the present disclosure.
Claims (10)
1. A webpage operation playback method is characterized by comprising the following steps:
acquiring page information of a webpage to be monitored, wherein the page information comprises Dom element information, CSS style information and view state information which cannot be reflected in HTML;
monitoring a webpage operation event generated on the webpage to be monitored by using a preset monitoring event and storing the webpage operation event;
responding to a playback request of webpage operation, extracting the webpage operation event, and reconstructing a playback page of the webpage to be monitored based on the page information;
and generating a simulation animation for the webpage operation event according to a preset rule and playing back the simulation animation on the playback page.
2. The method for replaying web page operations according to claim 1, wherein the extracting the web page operation event in response to a replay request of a web page operation and reconstructing a replay page of the web page to be monitored based on the page information includes:
responding to a playback request of webpage operation, and filtering script tags in the page information by using a regular expression;
and based on the iframe sandbox function, reconstructing the playback page according to the filtered page information.
3. The method for web page operation playback according to claim 1, wherein the monitoring and saving the web page operation events occurring on the web page to be monitored by using the preset monitoring event comprises:
when the user is detected to open the webpage to be monitored, starting the preset monitoring event to monitor the event of the webpage to be monitored and the occurrence time of the event;
and when the user is detected to close the webpage to be monitored, stopping the preset monitoring event, generating a webpage operation event according to the monitored event and the occurrence time of the event, and storing the webpage operation event.
4. The webpage operation playback method according to claim 3, wherein the monitoring the event occurring on the page to be monitored comprises:
monitoring a target top-layer Dom element when the webpage to be monitored is operated;
confirming a target actual Dom element of an occurrence event based on an event bubbling mechanism;
recording the event occurred and the target actual Dom element.
5. The method for web page operation playback according to claim 1, wherein the monitoring and saving the web page operation events occurring on the web page to be monitored by using the preset monitoring event comprises:
monitoring a webpage operation event generated on the webpage to be monitored by using a preset monitoring event;
and storing the webpage operation event and the page information into a database, and constructing a search index based on the name of the page to be monitored and the two dimensions of the time of the webpage operation event.
6. The method for web page operation playback according to claim 1, wherein the extracting the web page operation event and reconstructing the playback page of the web page to be monitored based on the page information when the playback request is received comprises:
receiving query information input by a user, wherein the query information comprises a query page name and query time;
matching the query page name and the query time with the search index, and querying to obtain a webpage operation event;
and reconstructing a playback page of the webpage to be monitored based on the page information.
7. The web page manipulation playback method of claim 1, wherein the web page manipulation event comprises a Dom element change, a mouse click, a mouse movement, a page or element movement, a window size change, or an input box input.
8. A web page manipulation playback apparatus, comprising:
the acquisition module is used for acquiring page information of a webpage to be monitored, wherein the page information comprises Dom element information, CSS style information and view state information which cannot be reflected in HTML;
the monitoring module is used for monitoring and storing the webpage operation events generated on the webpage to be monitored by utilizing preset monitoring events;
the reconstruction module is used for responding to a playback request of webpage operation, extracting the webpage operation event and reconstructing a playback page of the webpage to be monitored based on the page information;
and the playback module is used for generating simulation animation according to the webpage operation event according to a preset rule and playing back the simulation animation on the playback page.
9. A computer device, characterized in that the computer device comprises a processor, a memory coupled to the processor, in which memory program instructions are stored which, when executed by the processor, cause the processor to carry out the steps of the web page operation playback method according to any one of claims 1 to 7.
10. A storage medium storing program instructions capable of implementing the web page operation playback method according to any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111227565.XA CN113901352A (en) | 2021-10-21 | 2021-10-21 | Webpage operation playback method, device, equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111227565.XA CN113901352A (en) | 2021-10-21 | 2021-10-21 | Webpage operation playback method, device, equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113901352A true CN113901352A (en) | 2022-01-07 |
Family
ID=79025945
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111227565.XA Pending CN113901352A (en) | 2021-10-21 | 2021-10-21 | Webpage operation playback method, device, equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113901352A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116188638A (en) * | 2023-04-27 | 2023-05-30 | 山东捷瑞信息技术产业研究院有限公司 | Method, system, device and medium for realizing custom animation based on three-dimensional engine |
-
2021
- 2021-10-21 CN CN202111227565.XA patent/CN113901352A/en active Pending
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116188638A (en) * | 2023-04-27 | 2023-05-30 | 山东捷瑞信息技术产业研究院有限公司 | Method, system, device and medium for realizing custom animation based on three-dimensional engine |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN104133828B (en) | Drag and drop clipbook for html document | |
| US9002895B2 (en) | Systems and methods for providing modular configurable creative units for delivery via intext advertising | |
| CN111241157B (en) | Operation behavior backtracking method and device and electronic equipment | |
| EP2291745B1 (en) | Method and medium for remote tracking of user interaction with a webpage | |
| CN112182473B (en) | Page operation behavior playback method and device, computer equipment and storage medium | |
| US20100070876A1 (en) | Self-Replicating Rich Media Interface | |
| CN110245069B (en) | Page version testing method and device and page display method and device | |
| US20140115506A1 (en) | Systems And Methods For Measurement Of User Interface Actions | |
| GB2479271A (en) | Remote replay of user interaction with a webpage | |
| CN108509589B (en) | Information flow display method and system, computer readable storage medium | |
| US20230251878A1 (en) | Capturing and processing interactions with a user interface of a native application | |
| CN111818123A (en) | Network front-end remote playback method, device, equipment and storage medium | |
| CN112445757A (en) | Visual log storage and backtracking method and device and computer equipment | |
| AU2009286453A1 (en) | Distributed digital media metering and reporting system | |
| CN112148571A (en) | Method and device for recording and playing back webpage operation process | |
| CN117235586B (en) | Hotel customer portrait construction method, system, electronic equipment and storage medium | |
| CN113901352A (en) | Webpage operation playback method, device, equipment and storage medium | |
| CN109522473B (en) | Method for recommending associated information, terminal and server thereof | |
| CN110659435A (en) | Page data acquisition processing method and device, computer equipment and storage medium | |
| JP4539438B2 (en) | COLLECTING METHOD AND DEVICE FOR TRACKBACK SOURCE COMMENT / TRACKBACK, PROGRAM, AND COMPUTER-READABLE STORAGE MEDIUM CONTAINING THE PROGRAM | |
| CN107368558B (en) | Data object returning method and device | |
| CN115292636A (en) | H5 page recording method, device and equipment and storage medium | |
| CN113312134A (en) | Operation reproduction method and apparatus | |
| CN112596732A (en) | Electronic teaching material manufacturing method and system | |
| CN113709553A (en) | Screen recording method, device, chip and terminal |
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 |