CN114519156A - Webpage display method, operation event recording method and device - Google Patents
Webpage display method, operation event recording method and device Download PDFInfo
- Publication number
- CN114519156A CN114519156A CN202111670977.0A CN202111670977A CN114519156A CN 114519156 A CN114519156 A CN 114519156A CN 202111670977 A CN202111670977 A CN 202111670977A CN 114519156 A CN114519156 A CN 114519156A
- Authority
- CN
- China
- Prior art keywords
- webpage
- storage space
- event
- operation event
- events
- 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 60
- 230000001960 triggered effect Effects 0.000 claims abstract description 47
- 230000006870 function Effects 0.000 claims description 30
- 238000012545 processing Methods 0.000 claims description 22
- 238000012544 monitoring process Methods 0.000 claims description 15
- 239000000284 extract Substances 0.000 claims description 3
- 238000000605 extraction Methods 0.000 claims description 2
- 238000010586 diagram Methods 0.000 description 14
- 238000004590 computer program Methods 0.000 description 9
- 230000008569 process Effects 0.000 description 7
- 230000003287 optical effect Effects 0.000 description 3
- 230000008859 change Effects 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 230000005587 bubbling Effects 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 230000003068 static 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/957—Browsing optimisation, e.g. caching or content distillation
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The application discloses a webpage display method, which is used for solving the problem that in the prior art, convenience is low when a webpage is refreshed and the state before refreshing is recovered. The method comprises the following steps: receiving a display instruction aiming at a webpage; determining a storage space corresponding to the webpage according to the identification of the webpage contained in the display instruction; extracting the stored historical operation events corresponding to the webpage from the storage space; and displaying the webpage as a state after the historical operation event is triggered according to the extracted historical operation event. The application also discloses a webpage display device, and an operation event recording method and device.
Description
Technical Field
The application relates to the technical field of computers, in particular to a webpage display method, an operation event recording method and an operation event recording device.
Background
With the development of internet technology, websites greatly facilitate the lives of people, and in the web2.0 era, websites have not only been limited to showing information to users in a single way, but also have various interactions with users.
When the website interacts with the user, the website can receive an operation instruction of the user through a control arranged on an interface, and then trigger a corresponding operation event. For example, a user can operate controls of each node in a website tree menu, and the website can expand or retract the menu after receiving the operation; the website can provide form services, and after a user inputs data into a form and clicks and submits the data, the input data can be submitted to a server.
After the website page receives the user operation, the state of the displayed interface is often different from the initial state of the page which is just loaded. If the current page is refreshed due to some unexpected reasons after a user performs a large number of operations on the current web page, the web page is initialized to the initial state, and the states of the user after various operations do not exist before, and the user needs to perform the operation before refreshing again to change the state of the web page to the state before refreshing.
Especially for single-page applications, which can make multiple interactions with the user in a single page, if the single-page application is accidentally refreshed, all operations previously performed by the user on the page will fail. That is, in the prior art, after a page is accidentally refreshed, a user is required to perform an operation before the page is refreshed again, so that the state of the web page is changed to the state before the page is refreshed, and convenience is low.
Disclosure of Invention
The embodiment of the application provides a webpage display method, which is used for solving the problem that in the prior art, after a webpage is refreshed, the convenience is low when the state before refreshing is recovered.
The embodiment of the application further provides a webpage display device, and the webpage display device is used for solving the problem that in the prior art, convenience is low when a webpage is refreshed and the state before refreshing is recovered.
The embodiment of the application also provides an operation event recording method, which is used for solving the problem of lower convenience when the state before refreshing is recovered after the webpage is refreshed in the prior art.
The embodiment of the application further provides an operation event recording device, which is used for solving the problem that in the prior art, convenience is low when the state before refreshing is recovered after the webpage is refreshed.
The embodiment of the application adopts the following technical scheme:
a webpage display method comprises the following steps:
receiving a display instruction aiming at a webpage;
determining a storage space corresponding to the webpage according to the identification of the webpage contained in the display instruction;
extracting the stored historical operation events corresponding to the webpage from the storage space;
and displaying the webpage as a state after the historical operation event is triggered according to the extracted historical operation event.
An operational event recording method comprising:
monitoring an operation event triggered in a webpage;
when an operation event is monitored, determining a storage space corresponding to the identification of the webpage according to the identification of the webpage;
and recording the monitored operation events as historical operation events in the storage space, so that after a display instruction for the webpage is received, the webpage is displayed as a state after the historical operation events are triggered according to the historical operation events.
A web page presentation device, comprising:
the receiving module is used for receiving a display instruction aiming at a webpage;
the first determining module is used for determining a storage space corresponding to the webpage according to the identification of the webpage contained in the display instruction;
the extraction module is used for extracting the stored historical operation events corresponding to the webpage from the storage space;
and the display module is used for displaying the webpage as a state after the historical operation event is triggered according to the extracted historical operation event.
An operational event logging device comprising:
the monitoring module monitors an operation event triggered in the webpage;
the second determining module is used for determining a storage space corresponding to the identification of the webpage according to the identification of the webpage when an operation event is monitored;
and the recording module is used for recording the monitored operation events into the storage space as historical operation events so as to display the webpage as a state after the historical operation events are triggered according to the historical operation events after a display instruction for the webpage is received.
The embodiment of the application adopts at least one technical scheme which can achieve the following beneficial effects:
by monitoring the operation events triggered in the web page and recording the monitored operation events into the storage space, when the web page is reloaded, the historical operation events stored in the storage space can be triggered in the current web page again, and the state of the web page before reloading can be recovered. The problem of among the prior art, convenience is lower when the webpage is refreshed, resumes the state before refreshing is solved.
Drawings
The accompanying drawings, which are included to provide a further understanding of the application and are incorporated in and constitute a part of this application, illustrate embodiment(s) of the application and together with the description serve to explain the application and not to limit the application. In the drawings:
fig. 1 is a schematic flowchart illustrating a specific process of a webpage display method according to an embodiment of the present application;
fig. 2 is a schematic flowchart of an operation event recording method according to an embodiment of the present disclosure;
fig. 3 is a schematic structural diagram of a web page display device according to an embodiment of the present disclosure;
fig. 4 is a schematic structural diagram of an operation event recording device according to an embodiment of the present application.
Detailed Description
In order to make the objects, technical solutions and advantages of the present application more apparent, the technical solutions of the present application will be described in detail and completely with reference to the following specific embodiments of the present application and the accompanying drawings. It should be apparent that the described embodiments are only some 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 technical solutions provided by the embodiments of the present application are described in detail below with reference to the accompanying drawings.
In order to solve the problem that convenience is low when a webpage is refreshed accidentally and the state before refreshing is recovered, an embodiment of the application provides a webpage display method. The execution main body of the webpage display method provided by the embodiment of the application can be terminal equipment, such as a personal computer, a smart phone, a tablet computer and the like. Furthermore, the execution subject of the method may also be a web presentation application, such as a browser or the like. In addition, the execution subject of the method may also be the web page itself.
For convenience of description, the following description will be made of an embodiment of the method, taking the execution subject of the method as a browser as an example. It is understood that the execution of the method by the browser is only an exemplary illustration and should not be construed as a limitation of the method.
After the browser receives a display instruction for a certain web page, data of the web page is obtained from the web server according to a Uniform Resource Locator (URL) of the web page included in the display instruction, where the data of the web page includes a web page display frame obtained from a web front-end server and service data obtained from a web back-end server. The browser analyzes and renders the acquired data, and finally presents the webpage to the user, wherein before the user does not operate the webpage presented by the browser, the state of the webpage is the initial state of the webpage.
After the initial state of the web page is displayed by the browser, the user can use various functions provided by the web page through various operations in the web page. As described in the background art, while the functions implemented by a single web page are increasing, the problem of low convenience of a single page is also increasing when a page is accidentally refreshed. Especially insofar as the user performs a large number of operations on a page before the page is accidentally refreshed.
In order to solve the problem, the webpage can be restored to the state before the webpage is accidently refreshed according to the recorded historical operation events after the webpage is accidently refreshed by recording the operation events triggered by the user operation in the webpage.
Before describing how to restore the web page to the state before the page is accidentally refreshed according to the previously recorded historical operation events, a detailed description will be given to a method for recording the operation events in the web page in the present application.
The schematic implementation flow diagram of the method is shown in fig. 1, and comprises the following steps:
step S101: monitoring an operation event triggered in a webpage;
since the operation event in the web page is triggered after the browser displays the web page, before the operation event in the web page is monitored, first, the browser can display the web page by receiving an operation instruction for displaying the web page.
In practical application, the operation event triggered in the web page can be monitored through the event processing function. The event processing function is a function that can capture an operation event and process the captured operation event. The principle of using the event processing function to monitor the operation event in the webpage is as follows:
according to the specification of a Document Object Model (DOM) in the World Wide Web Consortium (W3C) standard, each element in a Web page can be regarded as an Object, so that the elements in the whole Web page can construct a DOM tree, and each element is a DOM node of the DOM tree. The triggering process of the operation event in the webpage follows an event bubbling mechanism, namely after the operation event aiming at a DOM node in the webpage is triggered, the operation event is firstly transmitted to a father node of the DOM node and then sequentially transmitted to a root node of a DOM tree.
Since the event processing function can capture the operation events passing through the DOM nodes, if the operation events of partial DOM nodes in the whole page are expected to be monitored, the event processing function can be bound on the DOM nodes expected to be monitored in the webpage or the father nodes of the DOM nodes; if monitoring of the operation events of all DOM nodes in the whole page is expected, before monitoring of the operation events triggered in the webpage, an event processing function can be bound on a root node (Document) of a DOM tree corresponding to the webpage.
The event processing function of the web page implemented by different frames is different. For the web page of the JQuery framework, the event processing functions specifically include a "bind" function, a "live" function, a "delete" function, an "on" function, and the like, and the specific implementation of these functions will not be described herein again.
Based on the event processing function bound on the root node of the DOM tree of the webpage, the operation events of all DOM nodes in the webpage can be monitored through the event processing function.
Step S102: when an operation event is monitored, determining a storage space corresponding to the identification of the webpage according to the identification of the webpage;
the monitored operational events can be recorded into a memory space for use when the web page is reloaded. The specific storage space may be a local storage space of the terminal, and since a user may trigger a large number of operation events in a single web page, the requirement for the storage space capacity may be high.
In practical applications, the monitored operation events may be stored using a local storage space localstorage of a HyperText Markup Language (HTML 5) version five and/or a session storage space sessionstorage of HTML 5. The browser allocates 5-10M of storage space for each domain name in the localstorage and/or sessionstorage, and the requirement on the capacity of the storage space when a large number of operation events are stored can be well met. For convenience of description, the localstorage of HTML5 is hereinafter referred to simply as localstorage, and the sessionstorage of HTML5 is hereinafter referred to simply as sessionstorage.
Since the storage space is allocated to each website by taking the domain name of the website as a dimension in the localstorage and/or sessionstorage, when the monitored operation event is stored in the localstorage and/or sessionstorage, the storage space corresponding to the identifier of the webpage can be determined according to the identifier of the webpage. The identification of the web page as referred to herein may be a URL of the web page, and since the URL of the web page includes a domain name of the website, the storage space may be determined according to the domain name in the URL of the web page.
It should be noted that, if the URL of the web page includes a sub-domain name, the storage space may be determined according to the sub-domain name in the URL of the web page.
S103: and recording the monitored operation events as historical operation events in the storage space.
Specifically, when the monitored operation event is stored, there may be two ways: storing the monitored operation event into a localstorage or storing the monitored operation event into a sessionstorage. The method for storing data by using localStorage and sessionstorage is the same, and the difference between the localStorage and sessionstorage is that the time for storing the data is different, the data in sessionstorage is emptied after the page is closed, and the data in localStorage can also be stored after the page is closed. Then, if the content in the web page is related to the operation authority, the monitored operation event can be recorded into sessionstorage; if the content in the web page is not related to the operation authority, the monitored operation event can be recorded into the localstorage. Therefore, after the current user logs out, the historical operation events related to the operation authority of the user are not replayed in the page without the operation authority.
In practical application, what storage method is selected to store the monitored operation events can be preset by a developer. Specifically, if the content in the web page is related to the operation authority, the developer may set a storage manner in the front-end code as follows: recording the monitored operation event of the webpage into sessionstorage; if the content in the webpage is not related to the operation authority, recording the monitored operation event into a localstorage is set in the front-end code.
In practical application, what storage method is selected to store the monitored operation event can be preset by a user. That is, the user may preset a storage manner for a certain web page to determine whether to temporarily store or permanently store the operation event in the web page.
Before storing the monitored operation event, a preset storage mode of the monitored operation event is determined, and after determining which storage mode to store the monitored operation event, the monitored operation event can be stored. Since a single localstorage or sessionstorage stores all data under the same domain name (top-level domain name or sub-domain name), and there are often multiple web pages under the same domain name, in order to distinguish historical operation events of different web pages in a storage space, an identifier of a web page may be used as a key (key), and an operation event monitored as a value (value) may be recorded in the storage space.
First, the description will be made with "the identifier of the web page is taken as a key", and since the data stored in the same storage space is data in the same domain name, the distinguishing feature in the identifier of the web page may be taken as a key when recording the operation event. Since the web addresses under the same domain name have the same domain name, the distinguishing feature in the identification of the web page may be the data of the part behind the domain name in the URL, i.e. the relative URL. For example, for the web page address http:// www.a.com/b.html, the distinguishing feature in the web page address is the relative URL after the domain name www.a.com, i.e./b.html.
Next, a detailed description will be given of "the operation event to be monitored is a value". The operation event here refers to that a certain operation mode is executed on a certain DOM node, and then in order to completely record a certain operation event, the position of the DOM node when the operation event is triggered and a specific operation mode are recorded. The location of DOM nodes may be recorded in the path Language (XPath) of Extensible Markup Language (XML), and each DOM node may be represented by an XPath expression. For the operation mode, the name of the operation mode can be directly recorded, for example, for the click operation mode, the name of the operation mode can be directly recorded as "click".
When the operation event is recorded as value, all the monitored operation events can be recorded, so that all the previous operations can be restored when the webpage is displayed next time, and the webpage state can be restored to the state after all the historical operations are triggered.
In order to save the occupation of the storage space, the operation event which has no influence on the final state of the webpage can not be recorded. For example, when filling in a form, operation events such as getting focus and losing focus on the form may not be recorded, and only values input in the form may be recorded. Then, when the monitored operation event is an operation event for a form, the identifier of the web page, the value of the form and the identifier of the form may be directly saved in the storage space; when the monitored operation event is an operation event for other elements, the identifier of the web page, the operation mode of the monitored operation event, and the position of the DOM node corresponding to the operation event may be recorded in the storage space. The identification of the form may be the ID of the form in the web page or the location of the DOM node of the form.
For example, when the position of a Dom node is represented by Target Dom Element XPath, the operation mode of an Event is represented by Event Names, and the Value of a Form is represented by Form Element Value, a single operation Event can be represented in the following format:
{
"[ Target Dom Element XPath ]" [ Event Names ] or [ Form Element Value ]
}
Since a plurality of operation events are often triggered in a single web page, when the plurality of operation events triggered in the web page are stored, in a Json form, an identifier of the web page may be used as a key, and data of each monitored operation event may be combined to be a value and recorded in the storage space. When the monitored data of each operation event are combined, the data can be combined according to a certain preset format, so that the combined data can be analyzed according to the preset format during subsequent reading, and each operation event is obtained.
For example, when a plurality of operation events are to be recorded, a separator may be added between the recorded operation events ("[ Target Dom Element XPath ]" [ Event Names ] or [ Form Element Value ]), and then the operation events are sequentially recorded in an array Form according to the chronological order of the operation events.
According to the recording mode, the monitored operation events can be recorded into the storage space as historical operation events, and the webpage can be displayed in a state after the historical operation events are triggered according to the recorded historical operation events after a display instruction for the webpage is received subsequently.
The following will describe in detail how to display a web page as a state before the page is accidentally refreshed according to a historical operation event recorded before.
The schematic implementation flow diagram of the method is shown in fig. 2, and includes the following steps:
step S201: receiving a display instruction aiming at a webpage;
the display instruction refers to an instruction for triggering the browser to display the webpage.
When the browser receives a display instruction for a webpage, the browser acquires data to be displayed from a front-end server and a back-end server of the website. In this embodiment of the present application, when it is expected that the web page is displayed as a state after the historical operation event is triggered according to the historical operation event recorded before, the browser further executes the following steps:
step S202: determining a storage space corresponding to the webpage according to the identification of the webpage contained in the display instruction;
when the browser stores the historical operation events, the data under different domain names can be stored in different storage spaces. Then, before obtaining the historical operation record, a storage space for storing the historical operation event of the web page is first determined according to the domain name in the URL of the web page included in the presentation instruction.
Step S203: extracting the stored historical operation events corresponding to the webpage from the storage space;
when the historical operation event is stored in the localstorage and/or sessionstorage with the identifier of the web page as key and the monitored operation event as value, the value corresponding to the identifier can be extracted from the determined localstorage and/or sessionstorage with the identifier of the web page as key to serve as the extracted historical operation event. The identification of the web page as referred to herein may be a relative URL portion of the URL of the web page following the domain name.
Step S204: and displaying the webpage as a state after the historical operation event is triggered according to the extracted historical operation event.
Since the historical operation events stored in the storage space are stored according to a preset format, the extracted historical operation events can be restored to the events in the current webpage according to the preset format.
Specifically, the historical operation events recorded in the value for the table element are the values of the form and the corresponding identifiers of the form. Then, for the historical operation event of the form, the value of the form and the identifier of the form recorded in the historical operation event may be obtained, then the form corresponding to the identifier of the form is determined in the current webpage, and the value of the form is filled in the determined form;
the operation mode of the operation event is the name and the position of the DOM node due to the historical operation event for other elements recorded in the value. Then, for the historical operation events aiming at other elements, the corresponding DOM node in the current webpage can be determined according to the name of the operation mode of the recorded operation event and the position of the DOM node, and the operation corresponding to the operation mode is executed on the DOM node in the current webpage.
If a plurality of operation events are recorded in the value, the operation events recorded in the value can be sequentially triggered according to the chronological sequence of the operation events, and the webpage can be displayed in a state after the historical operation events are triggered.
Meanwhile, in order to monitor the operation event triggered in the current webpage, after receiving the display instruction for the webpage, an event processing function can be bound on a root node (Document) of a DOM tree corresponding to the webpage so as to monitor the subsequent operation event of the webpage after triggering the historical operation event, and then record the monitored operation event.
It should be noted that the historical operating events in the memory space are generally time-sensitive. For example, after a user submits data in a form of a certain web page, the data in the form is already stored in the database at the back end of the web site, and then when the user accesses the web page next time, the data in the form is not reloaded into the web page any more, and then the data can be removed.
That is, the historical operating event clear instruction may be triggered in certain scenarios to clear the historical operating record in the predetermined memory space. The historical operation event clearing instruction may be triggered by a form submission instruction, or may be triggered by a user through a preset control.
In the embodiment of the application, the positions of the elements in the web page can be determined according to the W3C standard specification, the event triggered in the web page is monitored by binding the event processing function, and the event is recorded in localstorage and/or sessionstorage of HTML 5. Then, when the web page is reloaded, the historical operation event stored in the localstorage and/or sessionstorage can be triggered again in the current web page, and the state before the web page is reloaded can be recovered.
In an application supporting HTML5, any web page that complies with the W3C standard specification can be exposed as a state after triggering the historical operational events by the methods provided herein. For example, for a jQuery front-end framework, a real front-end framework and an Angular front-end framework, recording and playback of operation events can be performed by the method provided by the application.
Based on the same idea, the operation event recording method and the web page display method provided in the embodiments of the present application further provide a corresponding web page display device, as shown in fig. 3, and the embodiments of the present application further provide a corresponding operation event recording device, as shown in fig. 4.
Fig. 3 is a schematic structural diagram of a web page display device provided in an embodiment of the present application, which specifically includes:
the receiving module 301 receives a display instruction for a webpage;
a first determining module 302, configured to determine, according to the identifier of the web page included in the display instruction, a storage space corresponding to the web page;
the extracting module 303 is configured to extract a stored historical operation event corresponding to the webpage from the storage space;
the displaying module 304 displays the webpage as a state after the historical operation event is triggered according to the extracted historical operation event.
The specific working flow of the embodiment of the apparatus is that the receiving module 301 first receives a display instruction for a web page, then the first determining module 302 determines a storage space corresponding to the web page according to an identifier of the web page included in the display instruction, then the extracting module 303 extracts a stored historical operation event corresponding to the web page from the storage space, and finally the displaying module 304 displays the web page as a state after the historical operation event is triggered according to the extracted historical operation event.
In an embodiment of the present application, in a real-time manner, the storage space includes at least one of the following: local storage space localstorage of a fifth version of hypertext markup language HTML 5; the session storage space sessionstorage of HTML 5.
In a real-time manner, the extracting module 303 extracts a value corresponding to the identifier from the localstorage and/or sessionstorage of the HTML5 as the extracted historical operation event, with the identifier of the web page as a key.
In a real-time manner, the presentation module acquires, for a historical operation event of a form, a value of the form and an identifier of the form recorded in the historical operation event, determines the form corresponding to the identifier of the form in the web page, and fills the value in the determined form; and for the historical operation events aiming at other elements, acquiring the operation modes recorded in the historical operation events and the positions of Document Object Model (DOM) nodes, and executing the operation corresponding to the operation modes at the positions in the webpage.
Fig. 4 is a schematic structural diagram of an operation event recording device according to an embodiment of the present application, which specifically includes:
the monitoring module 401 monitors an operation event triggered in a webpage;
a second determining module 402, configured to determine, according to the identifier of the web page, a storage space corresponding to the identifier of the web page when an operation event is monitored;
the recording module 403 records the monitored operation event as a historical operation event in the storage space, so that after receiving a display instruction for the web page, the web page is displayed as a state after the historical operation event is triggered according to the historical operation event.
The specific working flow of the embodiment of the apparatus is that, first, the monitoring module 401 monitors an operation event triggered in a web page, then the second determining module 402 determines a storage space corresponding to an identifier of the web page according to the identifier of the web page when the operation event is monitored, and finally the recording module 403 records the monitored operation event as a historical operation event in the storage space.
In the embodiments of the present application, there are many implementation methods for recording operation events, and in one implementation, the apparatus further includes: a binding module 404, which binds the event processing function on the root node of the document object model DOM tree corresponding to the webpage;
the monitoring module 401 monitors the operation event triggered in the web page through the event processing function.
In a real-time manner, when the monitored operation event is an operation event for a form, the recording module 403 stores the identifier of the web page, the value of the form, and the identifier of the form in the storage space;
and when the monitored operation event is an operation event aiming at other elements, recording the identification of the webpage, the operation mode of the monitored operation event and the position of the DOM node corresponding to the operation event into the storage space.
In one embodiment, the recording module 403 records the identifier of the web page as a key and combines the monitored data of the operation events as a value into the storage space.
In one embodiment, the storage space comprises: a local storage space localstorage and/or session storage space sessionstorage of a fifth version of hypertext markup language HTML 5;
the recording module 403 determines a preset storage mode for the monitored operation event;
if the determined preset storage mode is stored in the sessionstorage of the HTML5, recording the monitored operation event into the sessionstorage of the HTML 5;
and if the determined preset storage mode is stored in the localstorage of the HTML5, recording the monitored operation event in the localstorage of the HTML 5.
As will be appreciated by one skilled in the art, embodiments of the present invention may be provided as a method, system, or computer program product. Accordingly, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
The present invention is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
In a typical configuration, a computing device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory.
The memory may include forms of volatile memory in a computer readable medium, Random Access Memory (RAM) and/or non-volatile memory, such as Read Only Memory (ROM) or flash memory (flash RAM). Memory is an example of a computer-readable medium.
Computer-readable media, including both non-transitory and non-transitory, removable and non-removable media, may implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), Static Random Access Memory (SRAM), Dynamic Random Access Memory (DRAM), other types of Random Access Memory (RAM), Read Only Memory (ROM), Electrically Erasable Programmable Read Only Memory (EEPROM), flash memory or other memory technology, compact disc read only memory (CD-ROM), Digital Versatile Discs (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices, or any other non-transmission medium that can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include transitory computer readable media (transmyedia) such as modulated data signals and carrier waves.
It should also be noted that the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.
As will be appreciated by one skilled in the art, embodiments of the present application may be provided as a method, system, or computer program product. Accordingly, the present application may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present application may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
The above description is only an example of the present application and is not intended to limit the present application. Various modifications and changes may occur to those skilled in the art. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included in the scope of the claims of the present application.
Claims (17)
1. A webpage display method is characterized by comprising the following steps:
receiving a display instruction aiming at a webpage;
determining a storage space corresponding to the webpage according to the identification of the webpage contained in the display instruction;
extracting the stored historical operation events corresponding to the webpage from the storage space;
according to the extracted historical operation event, displaying the webpage state as a state after the historical operation event is triggered, and the method specifically comprises the following steps: and executing the operation corresponding to the extracted historical operation event.
2. The method of claim 1, wherein the historical operational events are operational events in the web page triggered by user operations that affect a final state of the web page.
3. The method of claim 1, wherein the storage space comprises at least one of:
local storage space localstorage of a fifth version of hypertext markup language HTML 5;
the session storage space sessionstorage of HTML 5.
4. The method of claim 3, wherein extracting the stored historical operating events corresponding to the web page specifically comprises:
and taking the identifier of the webpage as a key, and extracting a value corresponding to the identifier from the localstorage and/or sessionstorage of HTML5 as an extracted historical operation event.
5. The method of claim 1, wherein the executing the operation corresponding to the extracted historical operation event specifically comprises:
for a historical operation event aiming at a form, obtaining a value of the form and an identifier of the form recorded in the historical operation event, determining the form corresponding to the identifier of the form in the webpage, and filling the value in the determined form;
and for the historical operation events aiming at other elements, acquiring the operation modes recorded in the historical operation events and the positions of Document Object Model (DOM) nodes, and executing the operation corresponding to the operation modes at the positions in the webpage.
6. An operational event recording method, comprising:
monitoring an operation event triggered in a webpage;
when an operation event is monitored, determining a storage space corresponding to the identification of the webpage according to the identification of the webpage;
and recording the monitored operation events as historical operation events in the storage space, so that after a display instruction for the webpage is received, the operation corresponding to the extracted historical operation events is executed according to the historical operation events, and the webpage state is restored and displayed as a state after the historical operation events are triggered.
7. The method of claim 6, wherein prior to listening for an operational event triggered in a web page, the method further comprises:
binding an event processing function on a root node of a Document Object Model (DOM) tree corresponding to a webpage;
monitoring an operation event triggered in a webpage specifically comprises the following steps:
and monitoring the operation event triggered in the webpage through the event processing function.
8. The method of claim 6, wherein recording the monitored operational events as historical operational events in the storage space comprises:
and taking the identification of the webpage as a key, combining the monitored data of each operation event as a value, and recording the value into the storage space.
9. The method of claim 6, wherein recording the monitored operational events as historical operational events in the storage space comprises:
when the monitored operation event is an operation event aiming at a form, storing the identification of the webpage, the value of the form and the identification of the form into the storage space;
and when the monitored operation event is an operation event aiming at other elements, recording the identification of the webpage, the operation mode of the monitored operation event and the position of the DOM node corresponding to the operation event into the storage space.
10. The method of claim 6, wherein the storage space comprises: a local storage space localstorage and/or session storage space sessionstorage of a fifth edition hypertext markup language HTML 5;
recording the monitored operation events as historical operation events in the storage space, specifically comprising:
determining a preset storage mode of the monitored operation event;
if the determined preset storage mode is stored in the sessionstorage of the HTML5, recording the monitored operation event into the sessionstorage of the HTML 5;
and if the determined preset storage mode is stored in the localstorage of the HTML5, recording the monitored operation event in the localstorage of the HTML 5.
11. A web page presentation apparatus, comprising:
the receiving module is used for receiving a display instruction aiming at a webpage;
the first determining module is used for determining a storage space corresponding to the webpage according to the identification of the webpage contained in the display instruction;
the extraction module is used for extracting the stored historical operation events corresponding to the webpage from the storage space;
the display module is configured to display the webpage state as a state after the historical operation event is triggered according to the extracted historical operation event, and specifically includes: and executing the operation corresponding to the extracted historical operation event.
12. The apparatus of claim 11, wherein the storage space comprises at least one of:
local storage space localstorage of a fifth version of hypertext markup language HTML 5;
the session storage space sessionstorage of HTML 5.
13. The apparatus of claim 9, wherein the extracting module extracts a value corresponding to the identifier from a localstorage and/or sessionstorage of HTML5 as the extracted historical operation event, with the identifier of the web page as a key.
14. An operational event recording device, comprising:
the monitoring module is used for monitoring operation events triggered in the webpage;
the second determining module is used for determining a storage space corresponding to the identification of the webpage according to the identification of the webpage when an operation event is monitored;
and the recording module is used for recording the monitored operation events into the storage space as historical operation events so as to execute operations corresponding to the extracted historical operation events according to the historical operation events after receiving a display instruction for the webpage, thereby restoring the state of the webpage and displaying the webpage as a state after the historical operation events are triggered.
15. The apparatus of claim 14, wherein the apparatus further comprises:
the binding module is used for binding the event processing function on the root node of the Document Object Model (DOM) tree corresponding to the webpage;
and the monitoring module monitors the operation event triggered in the webpage through the event processing function.
16. The apparatus of claim 14, wherein the recording module records the identifier of the web page as a key and the monitored data of the operation events as a value in the storage space.
17. The apparatus of claim 14, wherein the storage space comprises: a local storage space localstorage and/or session storage space sessionstorage of a fifth version of hypertext markup language HTML 5;
the recording module is used for determining a preset storage mode of the monitored operation event;
if the determined preset storage mode is stored in the sessionstorage of the HTML5, recording the monitored operation event into the sessionstorage of the HTML 5;
and if the determined preset storage mode is stored in the localstorage of the HTML5, recording the monitored operation event in the localstorage of the HTML 5.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111670977.0A CN114519156A (en) | 2016-08-15 | 2016-08-15 | Webpage display method, operation event recording method and device |
Applications Claiming Priority (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610671782.0A CN106897347B (en) | 2016-08-15 | 2016-08-15 | Webpage display method, operation event recording method and device |
| CN202111670977.0A CN114519156A (en) | 2016-08-15 | 2016-08-15 | Webpage display method, operation event recording method and device |
Related Parent Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201610671782.0A Division CN106897347B (en) | 2016-08-15 | 2016-08-15 | Webpage display method, operation event recording method and device |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114519156A true CN114519156A (en) | 2022-05-20 |
Family
ID=59191657
Family Applications (2)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201610671782.0A Active CN106897347B (en) | 2016-08-15 | 2016-08-15 | Webpage display method, operation event recording method and device |
| CN202111670977.0A Pending CN114519156A (en) | 2016-08-15 | 2016-08-15 | Webpage display method, operation event recording method and device |
Family Applications Before (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201610671782.0A Active CN106897347B (en) | 2016-08-15 | 2016-08-15 | Webpage display method, operation event recording method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (2) | CN106897347B (en) |
Families Citing this family (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107341234B (en) * | 2017-06-30 | 2021-04-13 | 广州酷狗计算机科技有限公司 | Page display method and device and computer readable storage medium |
| CN107368580B (en) * | 2017-07-21 | 2019-11-05 | 维沃移动通信有限公司 | A kind of Webpage display process and mobile terminal |
| CN108519903A (en) * | 2018-04-09 | 2018-09-11 | 平安普惠企业管理有限公司 | Static resource adaptation method, device, computer equipment and storage medium |
| CN110502169B (en) * | 2018-05-18 | 2021-10-19 | 华为技术有限公司 | Display control method and terminal |
| CN109002495A (en) * | 2018-06-28 | 2018-12-14 | 郑州云海信息技术有限公司 | Date storage method and device |
| CN111104616A (en) * | 2018-10-26 | 2020-05-05 | 阿里巴巴集团控股有限公司 | Webpage processing method and device |
| CN109656704B (en) * | 2018-12-21 | 2023-07-04 | 北京天融信网络安全技术有限公司 | Information processing method and information processing device |
| CN110119336A (en) * | 2019-04-04 | 2019-08-13 | 微民保险代理有限公司 | Data processing method, device, computer readable storage medium and computer equipment |
| CN110209570A (en) * | 2019-04-18 | 2019-09-06 | 北京字节跳动网络技术有限公司 | Processing method, device, electronic equipment and the storage medium of event |
| CN111046317A (en) * | 2019-12-27 | 2020-04-21 | 北京奇艺世纪科技有限公司 | Page data acquisition method, device, equipment and computer readable storage medium |
| CN112148571A (en) * | 2020-07-08 | 2020-12-29 | 青岛窗外科技有限公司 | Method and device for recording and playing back webpage operation process |
| CN114547522A (en) * | 2022-02-28 | 2022-05-27 | 长沙朗源电子科技有限公司 | Webpage editing method, equipment and storage medium |
Family Cites Families (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1347036A (en) * | 2000-10-11 | 2002-05-01 | 吴志铭 | Web page activation recorder and reproducer |
| JP5089684B2 (en) * | 2007-04-06 | 2012-12-05 | インターナショナル・ビジネス・マシーンズ・コーポレーション | Technology for generating service programs |
| CN102622423A (en) * | 2012-02-22 | 2012-08-01 | 优视科技有限公司 | Method, device, browser and user terminal for displaying webpage |
| CN102799428A (en) * | 2012-06-28 | 2012-11-28 | 北京大学 | Operation recording and playback method for interactive software |
| CN103488507A (en) * | 2013-09-18 | 2014-01-01 | 北京思特奇信息技术股份有限公司 | User behavior trajectory playback method |
| CN104636374A (en) * | 2013-11-11 | 2015-05-20 | 腾讯科技（深圳）有限公司 | Browser webpage displaying method and browser |
| CN104714948A (en) * | 2013-12-11 | 2015-06-17 | 部落邦（北京）科技有限责任公司 | Method, system and thermodynamic diagram display device for replaying user web page operation behavior |
| CN105335404B (en) * | 2014-07-29 | 2019-05-28 | 北京奇虎科技有限公司 | Page info loading method and device |
| CN104484479A (en) * | 2014-12-31 | 2015-04-01 | 小米科技有限责任公司 | Webpage browsing processing method and device |
| CN104978385B (en) * | 2015-03-19 | 2018-06-19 | 腾讯科技（深圳）有限公司 | Information processing method, browser client and terminal |
| CN104991916B (en) * | 2015-06-24 | 2019-03-01 | 小米科技有限责任公司 | The loading method and device of webpage |
| CN104915461B (en) * | 2015-07-10 | 2017-03-22 | 广州神马移动信息科技有限公司 | Page presentation method and device |
-
2016
- 2016-08-15 CN CN201610671782.0A patent/CN106897347B/en active Active
- 2016-08-15 CN CN202111670977.0A patent/CN114519156A/en active Pending
Also Published As
| Publication number | Publication date |
|---|---|
| CN106897347B (en) | 2021-12-24 |
| CN106897347A (en) | 2017-06-27 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106897347B (en) | Webpage display method, operation event recording method and device | |
| US10699061B2 (en) | Application page quick access | |
| CN107729475B (en) | Webpage element acquisition method, device, terminal and computer-readable storage medium | |
| CN110968824B (en) | Page data processing method and device | |
| US20200357007A1 (en) | Page data acquisition method, apparatus, server, electronic device and computer readable medium | |
| WO2016173436A1 (en) | Information presentation method and apparatus | |
| CN106897251B (en) | Rich text display method and device | |
| CN109376291B (en) | Website fingerprint information scanning method and device based on web crawler | |
| CN110941500B (en) | Interface display method and device | |
| CN110020339B (en) | Webpage data acquisition method and device based on non-buried point | |
| CN107147645B (en) | Method and device for acquiring network security data | |
| US11262883B2 (en) | Associating browser with application | |
| US20170230474A1 (en) | Service component management methods and systems | |
| CN106649061B (en) | Method and equipment for recording operation log of user in web system | |
| CN105630792B (en) | Information display and push method and device | |
| CN107480117B (en) | Recovery method and device for automatic page table single data | |
| WO2017016408A1 (en) | Service invocation-based fault handling method, device and system | |
| JP2020107347A (en) | Methods and apparatuses for storing file path and accessing local file | |
| CN110249324B (en) | Maintaining session identifiers for content selection across multiple web pages | |
| CN106886545A (en) | The caching method and device of page display method, page resource | |
| CN107220260B (en) | Page display method and device | |
| CN113076501A (en) | Page processing method, storage medium and equipment | |
| CN110708270B (en) | Abnormal link detection method and device | |
| CN112579947A (en) | Webpage element graph intercepting method and device and electronic equipment | |
| CN111695060A (en) | Page switching method, device, equipment and storage medium |
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 | ||
| TA01 | Transfer of patent application right | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20240305 Address after: 128 Meizhi Road, Guohao Times City # 20-01, Singapore 189773 Applicant after: Advanced Nova Technology (Singapore) Holdings Ltd. Country or region after: Singapore Address before: 27 Hospital Road, George Town, Grand Cayman ky1-9008 Applicant before: Innovative advanced technology Co.,Ltd. Country or region before: Cayman Islands |