CN106897347A - A kind of web page display method, Action Events recording method and device - Google Patents

A kind of web page display method, Action Events recording method and device Download PDF

Info

Publication number
CN106897347A
CN106897347A CN201610671782.0A CN201610671782A CN106897347A CN 106897347 A CN106897347 A CN 106897347A CN 201610671782 A CN201610671782 A CN 201610671782A CN 106897347 A CN106897347 A CN 106897347A
Authority
CN
China
Prior art keywords
webpage
action events
memory space
historical operation
mark
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.)
Granted
Application number
CN201610671782.0A
Other languages
Chinese (zh)
Other versions
CN106897347B (en
Inventor
唐帅佶
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Advanced Nova Technology Singapore Holdings Ltd
Original Assignee
Alibaba Group Holding Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Alibaba Group Holding Ltd filed Critical Alibaba Group Holding Ltd
Priority to CN201610671782.0A priority Critical patent/CN106897347B/en
Priority to CN202111670977.0A priority patent/CN114519156A/en
Publication of CN106897347A publication Critical patent/CN106897347A/en
Application granted granted Critical
Publication of CN106897347B publication Critical patent/CN106897347B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing 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

This application discloses a kind of web page display method, it is used to solve webpage in the prior art and after being refreshed, recovers convenience relatively low problem during the state before refreshing.The method includes:The displaying received for webpage is instructed;According to the mark of the webpage included in the displaying instruction, it is determined that memory space corresponding with the webpage;In the memory space, the corresponding historical operation event of the webpage of storage is extracted;It is the state after the triggering historical operation event by the web page display according to the historical operation event for extracting.Disclosed herein as well is a kind of web page display device, Action Events recording method and device.

Description

A kind of web page display method, Action Events recording method and device
Technical field
The application is related to field of computer technology, more particularly to a kind of web page display method, Action Events recording method and Device.
Background technology
With the development of Internet technology, website is very easy to the life of people, and in the web2.0 epoch, website is Folk prescription user oriented exhibition information is not limited solely to, while various interaction can also be carried out with user.
When website and user interact, website can receive the operation of user by the control that is arranged on interface Instruction, then triggers corresponding Action Events.Such as, user can be carried out by the control to each node in the tree menu of website Operation, website just can realize the expansion of menu or pack up after the operation is received;Website can provide list service, User is entered data into list, after then clicking on submission, just the data of input can be committed into server.
After user's operation is received, the state at the interface for being shown often just is loaded Website page different from the page Complete original state.If after user performs substantial amounts of operation in current web page, because some accidental causes cause currently The page is refreshed, then the webpage will be initialized as original state, the state before user after various operations all without presence, So user needs to perform the operation before a refreshing again again, the state of webpage could be changed into the state before refreshing.
For single-page application, its can be carried out with user in the single page it is various interact, if single-page After by unexpected refreshing, user will failure in all operations that the page is performed before.I.e. in the prior art, in page quilt , it is necessary to user re-executes the operation before being refreshed after unexpected refreshing, so that the state of webpage is changed into the state before refreshing, just Profit is relatively low.
The content of the invention
The embodiment of the present application provides a kind of web page display method, is used to solve webpage in the prior art extensive after being refreshed It is multiple refresh before state when the relatively low problem of convenience.
The embodiment of the present application also provides a kind of web page display device, be used to solve in the prior art webpage after being refreshed, Recover convenience relatively low problem during the state before refreshing.
The embodiment of the present application also provides a kind of Action Events recording method, is used to solve webpage in the prior art and is being refreshed Afterwards, convenience relatively low problem during the state before refreshing is recovered.
The embodiment of the present application also provides a kind of Action Events tape deck, is used to solve webpage in the prior art and is being refreshed Afterwards, convenience relatively low problem during the state before refreshing is recovered.
The embodiment of the present application uses following technical proposals:
A kind of web page display method, including:
The displaying received for webpage is instructed;
According to the mark of the webpage included in the displaying instruction, it is determined that memory space corresponding with the webpage;
In the memory space, the corresponding historical operation event of the webpage of storage is extracted;
It is the shape after the triggering historical operation event by the web page display according to the historical operation event for extracting State.
A kind of Action Events recording method, including:
Monitor the Action Events triggered in webpage;
When Action Events are listened to, according to the mark of the webpage, it is determined that storage corresponding with the mark of the webpage Space;
During the Action Events that will be listened to are as historical operation logout to the memory space, to receive pin After to the displaying instruction of the webpage, according to the historical operation event, the web page display is grasped to trigger the history Make the state after event.
A kind of web page display device, including:
Receiver module, the displaying received for webpage is instructed;
First determining module, according to the mark of the webpage included in the displaying instruction, it is determined that with the webpage pair The memory space answered;
Extraction module, in the memory space, extracts the corresponding historical operation event of the webpage of storage;
Display module, is the triggering historical operation thing by the web page display according to the historical operation event for extracting State after part.
A kind of Action Events tape deck, including:
Module is monitored, the Action Events triggered in webpage are monitored;
Second determining module, when Action Events are listened to, according to the mark of the webpage, it is determined that the mark with the webpage Know corresponding memory space;
Logging modle, during the Action Events that will be listened to are as historical operation logout to the memory space, so as to It is to trigger by the web page display according to the historical operation event after the displaying instruction for the webpage is received State after the historical operation event.
Above-mentioned at least one technical scheme that the embodiment of the present application is used can reach following beneficial effect:
By monitoring the Action Events triggered in webpage, and during the Action Events that will be listened to recorded memory space, that When webpage is reloaded, the historical operation event that just will can be stored in memory space is triggered in current web page again, The state before webpage is reloaded can be recovered.Solve in the prior art, webpage recovers the state before refreshing after being refreshed When the relatively low problem of convenience.
Brief description of the drawings
Accompanying drawing described herein is used for providing further understanding of the present application, constitutes the part of the application, this Shen Schematic description and description please does not constitute the improper restriction to the application for explaining the application.In the accompanying drawings:
A kind of idiographic flow schematic diagram of web page display method that Fig. 1 is provided for the embodiment of the present application;
A kind of idiographic flow schematic diagram of Action Events recording method that Fig. 2 is provided for the embodiment of the present application;
A kind of structural representation of web page display device that Fig. 3 is provided for the embodiment of the present application;
A kind of structural representation of Action Events tape deck that Fig. 4 is provided for the embodiment of the present application.
Specific embodiment
To make the purpose, technical scheme and advantage of the application clearer, below in conjunction with the application specific embodiment and Corresponding accompanying drawing is clearly and completely described to technical scheme.Obviously, described embodiment is only the application one Section Example, rather than whole embodiments.Based on the embodiment in the application, those of ordinary skill in the art are not doing Go out the every other embodiment obtained under the premise of creative work, belong to the scope of the application protection.
Below in conjunction with accompanying drawing, the technical scheme that each embodiment of the application is provided is described in detail.
After by unexpected refreshing, recover the relatively low problem of the state convenience before refreshing to solve webpage in the prior art, The embodiment of the present application provides a kind of web page display method.The executive agent of the web page display method that the embodiment of the present application is provided can be with It is terminal device, for example, personal computer, smart mobile phone, panel computer, etc..Additionally, the executive agent of the method can be with It is web page display application, for example, browser etc..Additionally, the executive agent of the method can also be webpage in itself.
For ease of description, as a example by hereafter executive agent in this way is browser, the implementation method to the method is carried out Introduce.It is appreciated that the executive agent of the method is a kind of exemplary explanation for browser, it is not construed as to the party The restriction of method.
After the displaying instruction that browser receives for certain webpage, it will according to the webpage included in displaying instruction URL (Uniform Resource Locator, URL), the number of the webpage is obtained from Website server According to the data of webpage include the web page display framework obtained from Website front-end server, and are obtained from website back-end server Business datum.Browser carries out parsing and renders to these data for getting, and webpage finally is presented into user, in user not Before being operated to the webpage that browser is presented, the state of webpage is the original state of webpage.
After be shown for the original state of webpage by browser, user just can be come in webpage by various operations The various functions provided using the webpage.As described in the background art, it is increasing in the function of single webpage realization Meanwhile, when the page is surprisingly refreshed, the problem that the convenience of single-page is relatively low is also increasingly highlighted.Especially user is in the page Before by unexpected refreshing, performed in the page for largely operating.
In order to solve the problem, the application is by recording the Action Events triggered by the operation of user in webpage, then After the page is surprisingly refreshed, webpage can be returned into the page and is surprisingly refreshed according to the historical operation event for recording before Preceding state.
Description how the historical operation event recorded before basis, webpage is returned into the page by the shape before unexpected refreshing Before state, first to being described in detail to the method that the Action Events in webpage are recorded in the application.
The method realizes schematic flow sheet as shown in figure 1, comprising the steps:
Step S101:Monitor the Action Events triggered in webpage;
Because the Action Events in webpage are triggered after browser is shown to webpage, then, in webpage Action Events monitored before, first, browser can be entered by receiving for showing the operational order of the webpage to webpage Row displaying.
In actual applications, the Action Events triggered in webpage can be monitored by event handling function.Event handling Function, is to refer to capture Action Events, and the function that is processed of Action Events to capturing.Supervised using event handling function Listen the principle of Action Events in webpage as follows:
According in World Wide Web Consortium (World Wide Web Consortium, W3C) standard to DOM Document Object Model The specification of (Document Object Model, DOM), can regard the element of each in webpage as one by one object, so, Element in whole webpage just can build a dom tree, and each element is the DOM node of dom tree.Action Events in webpage Trigger process, follow event bubbling mechanism, i.e., after the Action Events for certain DOM node in webpage are triggered, should Action Events can be transferred to the father node of the DOM node first, and the root node of dom tree is then transferred to successively.
Because event handling function can be captured to the Action Events passed through in DOM node, then, if it is desired to it is right The Action Events of the part DOM node in full page are monitored, and DOM node or the his father for monitoring can be expected in webpage Event handling function is bound on node;If it is desire to the Action Events of all DOM nodes in full page are monitored, Before Action Events to being triggered in webpage are monitored, can be tied up on the root node (Document) of the corresponding dom tree of webpage Determine event handling function.
For the webpage realized using different frames, its event handling function is often different.For the net of JQuery frameworks For page, its event handling function specifically includes " bind " function, " live " function, " delegate " function and " on " function Deng, the specific embodiment of those functions, here is omitted.
Based on the event handling function bound on the root node of the dom tree of webpage, just can be by the event handling letter Number, monitors the Action Events of all DOM nodes in webpage.
Step S102:When Action Events are listened to, according to the mark of the webpage, it is determined that right with the mark of the webpage The memory space answered;
For the Action Events for listening to, in being recorded memory space, to make when webpage is reloaded With.Specific memory space can be the memory space of terminal local, because user can trigger substantial amounts of operation in single webpage Event, the requirement to storage space volume can be higher.
So, in actual applications, it is possible to use the 5th edition HTML (HyperText Markup Language, HTML5) local storage space localstorage and/or HTML5 session memory space Sessionstorage, to be stored to the Action Events for listening to.Browser can in localstorage and/or The memory space of 5-10M is distributed in sessionstorage for each domain name, can be met well to a large amount of Action Events When being stored, the requirement to storage space volume.For the ease of describing, hereinafter by the localstorage of HTML5 referred to as It is localstorage, the sessionstorage of HTML5 is referred to as sessionstorage.
With the domain name of website it is dimension to each net due in localstorage and/or sessionstorage, being Stand distribution memory space, then, in the Action Events storage that will be listened to localstorage and/or When in sessionstorage, can determine that storage corresponding with the mark of the webpage is empty according to the mark of the webpage Between.The mark of described webpage can be the URL of webpage herein, due to being the domain name comprising website in the URL of webpage, then Memory space can be determined according to the domain name in the URL of webpage.
If it should be noted that including subdomain name in the URL of webpage, then then can be according to the subdomain in webpage URL Name determines memory space.
S103:During the Action Events that will be listened to are as historical operation logout to the memory space.
Specifically when the Action Events to listening to are stored, there can be following two ways:The operation that will be listened to Event storage is in localstorage or the Action Events storage that will listen to is in sessionstorage.Utilize Localstorage is identical with the method that sessionstorage carries out data storage, and both differences are that data are preserved Time is different, and the data in sessionstorage are cleared after the page is closed, and data in localStorage are then Can also be preserved after page close.So, if the content in webpage is relevant with operating right, the behaviour that will can be listened to Make logout in sessionstorage;If the content in webpage is unrelated with operating right, will can listen to Action Events recorded in localstorage.So, after active user logs off, the operating right with the user is relevant Historical operation event, just will not be played out in the page without the operating right.
In actual applications, the Action Events for listening to are stored from which kind of storage mode, can be by exploit person Member presets.Specifically, if the content in webpage is relevant with operating right, developer can set in front-end code Putting storage mode is:The Action Events of the webpage that will be listened to recorded in sessionstorage;If interior in webpage Hold unrelated with operating right, then set in front-end code during the Action Events that will be listened to recorded localstorage.
In actual applications, the Action Events for listening to are stored from which kind of storage mode, can also be by user Preset.That is, user can pre-set storage mode for certain webpage, to determine to carry out the Action Events in the webpage It is interim to preserve or persistence.
So, before the Action Events for listening to are stored, first have to determine to the pre- of the Action Events that listen to If storage mode, after it is determined that being stored to the Action Events for listening to which kind of storage mode, just can be to listening to Action Events are stored.Due to same domain name (TLD can be preserved in single localstorage or sessionstorage Name or subdomain name) under all data, and often there are multiple webpages under same domain name, then, in order in memory space The historical operation event of different web pages is made a distinction, can be using the mark of webpage as key (key), the operation thing that will be listened to Part as value (value), in recorded memory space.
First, " using the mark of webpage as key " is illustrated, because the data stored in same memory space are same Data under one domain name, then, when being recorded to Action Events, can using the distinguishing characteristics in the mark of webpage as key.Due to the network address under same domain name, its domain name is identical, then the distinguishing characteristics in the mark of webpage, can be URL Part data, i.e. relative URL behind middle domain name.Such as, for web page address http://www.a.com/b.html, then should Distinguishing characteristics in network address is the relative URL after domain name www.a.com, as/b.html.
Secondly, " Action Events that will be listened to as value " are described in detail.Action Events mentioned here refer to Certain mode of operation is performed to certain DOM node, then for certain Action Events of complete documentation, the Action Events can be recorded The position of DOM node during triggering, and specific mode of operation.For the position of DOM node, extensible markup language can be used Say the path language (XPath) of (Extensible Markup Language, XML) to record, each DOM node can Represented with an XPath expression formula.For mode of operation, directly can be recorded with the title of mode of operation, such as Clicking operation mode, then can be directly recorded as " click ".
When being recorded as value to Action Events, all Action Events that will can be listened to are recorded, this Sample can reduce all operations of last time when being shown to webpage next time, just, like clockwork by webpage state reduction extremely Trigger the state after all historical operations.
In order to save the occupancy to memory space, can not record and not have influential Action Events to webpage end-state. Such as, when list is filled in, focus is obtained for list, the Action Events such as focus is lost and can not be recorded, and only recorded The value being input into list.So, when the Action Events for listening to are directed to the Action Events of list, can directly by the webpage Mark, the value of the list and the list mark, be saved in memory space;When the Action Events for listening to are directed to other During the Action Events of element, then can be by the mark of webpage, the mode of operation of the Action Events for listening to and the Action Events pair The position of the DOM node answered, in recorded the memory space.The mark of list can be the ID of list in webpage, it is also possible to It is the position of the DOM node of list.
For example, when the position that DOM node is represented with Target Dom Element XPath, being represented with Event Names The mode of operation of event, when representing the value of list with Form Element Value, can represent single according to following forms Action Events:
{
“[Target Dom Element XPath]”:[Event Names] or [Form Element Value]
}
Due to often triggering multiple Action Events in single webpage, then in the multiple operations that will be triggered in the webpage When event is preserved, can in the form of Json, using the mark of webpage as key, each Action Events that will be listened to Data are combined as value, in recorded the memory space.The data of each Action Events that will be listened to carry out group During conjunction, can be combined according to certain default form, can be according to default form to combination during so as to subsequent read Data are parsed, and obtain each Action Events.
For example, when to record multiple Action Events, then can be in each Action Events (" [Target Dom of record Element XPath]”:[Event Names] or [Form Element Value]) between be subject to separator and distinguish, then According to the sequencing that each Action Events occurs in time, each Action Events is recorded successively in the form of array.
According to above-mentioned recording mode, the Action Events that just will can be listened to are as historical operation logout to the storage In space, subsequently after the displaying instruction for webpage is received, can be according to the historical operation event of record, by web page display To trigger the state after historical operation event.
A kind of web page display method of the application offer is described more fully below, i.e., how the history of record was grasped according to before Make event, be the state before the page is surprisingly refreshed by web page display.
The method realizes schematic flow sheet as shown in Fig. 2 comprising the steps:
Step S201:The displaying received for webpage is instructed;
Wherein, the displaying refers to the instruction for triggering browser-presented webpage.
When browser receives the displaying instruction for webpage, will be from Website front-end server and back-end server The data that acquisition will show.In the embodiment of the present application, the historical operation event for being recorded before basis is expected, by webpage exhibition When being shown as triggering the state after historical operation event, browser can also perform subsequent step:
Step S202:According to the mark of the webpage included in the displaying instruction, it is determined that corresponding with the webpage Memory space;
Due to when browser is stored to historical operation event, for the data under different domain names, can be stored in In different memory spaces.So, before historical operation record is obtained, first have to according to the webpage included in displaying instruction Domain name in URL determines the memory space of the historical operation event for storing the webpage.
Step S203:In the memory space, the corresponding historical operation event of the webpage of storage is extracted;
When historical operation event is stored as value with the be designated key, the Action Events to listen to of webpage When in localstorage and/or sessionstorage, then key can be designated with webpage, from what is determined In localstorage and/or sessionstorage, value corresponding with the mark is extracted, as the historical operation extracted Event.The mark of webpage mentioned here, can be the relative URL part in webpage URL after domain name.
Step S204:It is the triggering historical operation thing by the web page display according to the historical operation event for extracting State after part.
Because the historical operation event preserved in memory space is stored according to default form, then can be according to Default form, the historical operation event that will be extracted is reduced to the event in current web page.
Specifically, it is the value and list pair of list due to the historical operation event for Form Element recorded in value The mark answered.So, for the historical operation event for list, the list of record in historical operation event can be obtained The mark of value and the list, then determines corresponding with the mark of list list in current web page, and it is determined that list In insert the value of the list;
It is the name of the mode of operation of Action Events due to the historical operation event for other elements recorded in value Claim the position with DOM node.So, for the historical operation event for other elements, can be according to the Action Events of record Mode of operation title and the position of DOM node, determine corresponding DOM node in current web page, and in current web page Upper, the execution operation corresponding with the mode of operation of the DOM node.
If have recorded multiple Action Events in value, the elder generation that can in time occur according to each Action Events Afterwards order order, successively trigger value in record each Action Events, you can by the web page display for triggering historical operation State after event.
Meanwhile, in order to monitor the Action Events triggered in current web page, after the displaying instruction for webpage is received, also Event handling function can be bound on the root node (Document) of the corresponding dom tree of webpage, so as to triggering historical operation The subsequent operation event of the webpage after event is monitored, and then the Action Events for listening to are recorded.
It should be noted that the historical operation event in memory space can typically have it is ageing.Such as, when user is carrying After having handed over the data in certain web form, the data in list have just been saved in the back-end data base of website, then User accesses the webpage next time when, no longer the data in list can be re-loaded in the webpage, then just can be by The partial data is removed.
I.e., it is possible to historical operation event clearance order is triggered in some scenarios, to remove going through in predetermined memory space History operation note.Historical operation event clearance order such as can be to submit instruction triggers to by list, or can also be User is triggered by default control.
In the embodiment of the present application, the position of each element in webpage according to W3C standard criterions, can be determined, by binding The mode of event handling function monitors the event triggered in webpage, and recorded HTML5 localstorage and/or In sessionstorage.So when the webpage is reloaded, just can by localstorage and/or The historical operation event stored in sessionstorage is triggered in current web page again, you can before recovery webpage is reloaded State.
In the application for supporting HTML5, any webpage for following W3C standard criterions can be provided by the application Method, is the state after the triggering historical operation event by web page display.Such as, before for jQuery front end frames, React End frame and Angular front end frames, the method that can be provided by the application, carry out record and the playback of Action Events.
The Action Events recording method for providing for the embodiment of the present application above and web page display method, based on same think of Road, the embodiment of the present application also provides corresponding web page display device, as shown in figure 3, the embodiment of the present application also provides corresponding behaviour Make accident recording apparatus, as shown in Figure 4.
The web page display apparatus structure schematic diagram that Fig. 3 is provided for the embodiment of the present application, specifically includes:
Receiver module 301, the displaying received for webpage is instructed;
First determining module 302, according to the mark of the webpage included in the displaying instruction, it is determined that with the webpage Corresponding memory space;
Extraction module 303, in the memory space, extracts the corresponding historical operation event of the webpage of storage;
Display module 304, is the triggering historical operation by the web page display according to the historical operation event for extracting State after event.
The specific workflow of said apparatus embodiment is that receiver module 301 receives the displaying instruction for webpage first, Then the first determining module 302 can according to the mark of the webpage included in the displaying instruction, it is determined that with the webpage pair The memory space answered, then extraction module 303 can be in the memory space, the corresponding history behaviour of the webpage of extraction storage Make event, the web page display, according to the historical operation event for extracting, is the triggering history behaviour by last display module 304 Make the state after event.
In the embodiment of the present application, the implementation of web page display has many kinds, in one embodiment, a kind of real-time In mode, the memory space includes following at least one:The 5th edition local storage space of HTML HTML5 localstorage;The session memory space sessionstorage of HTML5.
In a kind of real-time mode, the extraction module 303 is designated key with the webpage, from HTML5's In localstorage and/or sessionstorage, extract and the corresponding value of the mark, as extraction historical operation thing Part.
In a kind of real-time mode, the display module, for the historical operation event for list, obtains the history The value and the mark of the list of the list recorded in Action Events, determine the mark with the list in the webpage Corresponding list, and it is determined that list in insert described value;For the historical operation event for other elements, obtain described The mode of operation recorded in historical operation event and the position of DOM Document Object Model DOM node, the institute's rheme in the webpage Put, perform operation corresponding with the mode of operation.
The Action Events recording device structure schematic diagram that Fig. 4 is provided for the embodiment of the present application, specifically includes:
Module 401 is monitored, the Action Events triggered in webpage are monitored;
Second determining module 402, when Action Events are listened to, according to the mark of the webpage, it is determined that with the webpage The corresponding memory space of mark;
Logging modle 403, during the Action Events that will be listened to are as historical operation logout to the memory space, with Just it is triggering by the web page display according to the historical operation event after the displaying instruction for the webpage is received State after the historical operation event.
The specific workflow of said apparatus embodiment is first, to monitor module 401 and monitor the operation thing triggered in webpage Part, then the second determining module 402 when Action Events are listened to, can according to the mark of the webpage, it is determined that with the webpage The corresponding memory space of mark, last logging modle 403, the Action Events that will be listened to arrive as historical operation logout In the memory space.
In the embodiment of the present application, the implementation of Action Events record has many kinds, in one embodiment, the dress Putting also includes:Binding module 404, event handling function is bound on the root node of the corresponding DOM Document Object Model dom tree of webpage;
The monitoring module 401, by the event handling function, monitors the Action Events triggered in the webpage.
In a kind of real-time mode, the logging modle 403, when the Action Events for listening to are directed to the operation thing of list During part, the mark of the mark of the webpage, the value of the list and the list is saved in the memory space;
When the Action Events for listening to are directed to the Action Events of other elements, by the mark of the webpage, listen to Action Events mode of operation DOM node corresponding with the Action Events position, in recorded the memory space.
In one embodiment, the logging modle 403, it is each by what is listened to using the mark of the webpage as key The data of individual Action Events are combined as value, in recorded the memory space.
In one embodiment, the memory space includes:5th edition HTML HTML5's is locally stored Space localstorage and/or session memory space sessionstorage;
The logging modle 403, it is determined that the default storage mode of the Action Events to listening to;
If it is determined that default storage mode be storage in the sessionstorage of HTML5, then the operation that will be listened to Logout is in the sessionstorage of HTML5;
If it is determined that default storage mode be storage in the localstorage of HTML5, then the operation thing that will be listened to Part recorded in the localstorage of HTML5.
It should be understood by those skilled in the art that, embodiments of the invention can be provided as method, system or computer program Product.Therefore, the present invention can be using the reality in terms of complete hardware embodiment, complete software embodiment or combination software and hardware Apply the form of example.And, the present invention can be used and wherein include the computer of computer usable program code at one or more The computer program implemented in usable storage medium (including but not limited to magnetic disk storage, CD-ROM, optical memory etc.) is produced The form of product.
The present invention is the flow with reference to method according to embodiments of the present invention, equipment (system) and computer program product Figure and/or block diagram are described.It should be understood that every first-class during flow chart and/or block diagram can be realized by computer program instructions The combination of flow and/or square frame in journey and/or square frame and flow chart and/or block diagram.These computer programs can be provided The processor of all-purpose computer, special-purpose computer, Embedded Processor or other programmable data processing devices is instructed to produce A raw machine so that produced for reality by the instruction of computer or the computing device of other programmable data processing devices The device of the function of being specified in present one flow of flow chart or multiple one square frame of flow and/or block diagram or multiple square frames.
These computer program instructions may be alternatively stored in can guide computer or other programmable data processing devices with spy In determining the computer-readable memory that mode works so that instruction of the storage in the computer-readable memory is produced and include finger Make the manufacture of device, the command device realize in one flow of flow chart or multiple one square frame of flow and/or block diagram or The function of being specified in multiple square frames.
These computer program instructions can be also loaded into computer or other programmable data processing devices so that in meter Series of operation steps is performed on calculation machine or other programmable devices to produce computer implemented treatment, so as in computer or The instruction performed on other programmable devices is provided for realizing in one flow of flow chart or multiple flows and/or block diagram one The step of function of being specified in individual square frame or multiple square frames.
In a typical configuration, computing device includes one or more processors (CPU), input/output interface, net Network interface and internal memory.
Internal memory potentially includes the volatile memory in computer-readable medium, random access memory (RAM) and/or The forms such as Nonvolatile memory, such as read-only storage (ROM) or flash memory (flash RAM).Internal memory is computer-readable medium Example.
Computer-readable medium includes that permanent and non-permanent, removable and non-removable media can be by any method Or technology realizes information Store.Information can be computer-readable instruction, data structure, the module of program or other data. The example of the storage medium of computer includes, but are not limited to phase transition internal memory (PRAM), static RAM (SRAM), moves State random access memory (DRAM), other kinds of random access memory (RAM), read-only storage (ROM), electric erasable Programmable read only memory (EEPROM), fast flash memory bank or other memory techniques, read-only optical disc read-only storage (CD-ROM), Digital versatile disc (DVD) or other optical storages, magnetic cassette tape, the storage of tape magnetic rigid disk or other magnetic storage apparatus Or any other non-transmission medium, can be used to store the information that can be accessed by a computing device.Defined according to herein, calculated Machine computer-readable recording medium does not include temporary computer readable media (transitory media), such as data-signal and carrier wave of modulation.
Also, it should be noted that term " including ", "comprising" or its any other variant be intended to nonexcludability Comprising so that process, method, commodity or equipment including a series of key elements not only include those key elements, but also wrapping Include other key elements being not expressly set out, or also include for this process, method, commodity or equipment is intrinsic wants Element.In the absence of more restrictions, the key element limited by sentence "including a ...", it is not excluded that wanted including described Also there is other identical element in process, method, commodity or the equipment of element.
It will be understood by those skilled in the art that embodiments herein can be provided as method, system or computer program product. Therefore, the application can be using the embodiment in terms of complete hardware embodiment, complete software embodiment or combination software and hardware Form.And, the application can be used to be can use in one or more computers for wherein including computer usable program code and deposited The shape of the computer program product implemented on storage media (including but not limited to magnetic disk storage, CD-ROM, optical memory etc.) Formula.
Embodiments herein is the foregoing is only, the application is not limited to.For those skilled in the art For, the application can have various modifications and variations.It is all any modifications made within spirit herein and principle, equivalent Replace, improve etc., within the scope of should be included in claims hereof.

Claims (18)

1. a kind of web page display method, it is characterised in that including:
The displaying received for webpage is instructed;
According to the mark of the webpage included in the displaying instruction, it is determined that memory space corresponding with the webpage;
In the memory space, the corresponding historical operation event of the webpage of storage is extracted;
It is the state after the triggering historical operation event by the web page display according to the historical operation event for extracting.
2. method as claimed in claim 1, it is characterised in that the memory space includes following at least one:
The 5th edition local storage space localstorage of HTML HTML5;
The session memory space sessionstorage of HTML5.
3. method as claimed in claim 2, it is characterised in that extract the corresponding historical operation event of the webpage of storage, tool Body includes:
Key is designated with the webpage, from the localstorage and/or sessionstorage of HTML5, is extracted and institute The corresponding value of mark is stated, as the historical operation event extracted.
4. method as claimed in claim 1, it is characterised in that according to the historical operation event for extracting, by the web page display To trigger the state after the historical operation event, specifically include:
For the historical operation event for list, the value of the list recorded in the historical operation event and described is obtained The mark of list, determines list corresponding with the mark of the list in the webpage, and it is determined that list in insert institute State value;
For the historical operation event for other elements, the mode of operation and document recorded in the historical operation event are obtained The position of object model DOM node, on the position in the webpage, performs operation corresponding with the mode of operation.
5. a kind of Action Events recording method, it is characterised in that including:
Monitor the Action Events triggered in webpage;
When Action Events are listened to, according to the mark of the webpage, it is determined that memory space corresponding with the mark of the webpage;
During the Action Events that will be listened to are as historical operation logout to the memory space, to receive for institute It is to trigger the historical operation thing by the web page display according to the historical operation event after stating the displaying instruction of webpage State after part.
6. method as claimed in claim 5, it is characterised in that before the Action Events triggered in monitoring webpage, methods described Also include:
Event handling function is bound on the root node of the corresponding DOM Document Object Model dom tree of webpage;
The Action Events triggered in webpage are monitored, is specifically included:
By the event handling function, the Action Events triggered in the webpage are monitored.
7. method as claimed in claim 5, it is characterised in that the Action Events that will be listened to are arrived as historical operation logout In the memory space, specifically include:
When the Action Events for listening to are directed to the Action Events of list, by the mark of the webpage, the value of the list and The mark of the list, is saved in the memory space;
When the Action Events for listening to are directed to the Action Events of other elements, by the mark of the webpage, the behaviour for listening to Make the position of the mode of operation DOM node corresponding with the Action Events of event, in recorded the memory space.
8. method as claimed in claim 7, it is characterised in that the Action Events that will be listened to are arrived as historical operation logout In the memory space, specifically include:
Using the mark of the webpage as key, the data of each Action Events that will be listened to are combined as value, be recorded In the memory space.
9. method as claimed in claim 5, it is characterised in that the memory space includes:5th edition HTML The local storage space localstorage and/or session memory space sessionstorage of HTML5;
During the Action Events that will be listened to are as historical operation logout to the memory space, specifically include:
It is determined that the default storage mode of the Action Events to listening to;
If it is determined that default storage mode be storage in the sessionstorage of HTML5, then the Action Events that will be listened to In recorded the sessionstorage of HTML5;
If it is determined that default storage mode be storage to the Action Events note that in the localstorage of HTML5, then will be listened to In recording the localstorage of HTML5.
10. a kind of web page display device, it is characterised in that including:
Receiver module, the displaying received for webpage is instructed;
First determining module, according to the mark of the webpage included in the displaying instruction, it is determined that corresponding with the webpage Memory space;
Extraction module, in the memory space, extracts the corresponding historical operation event of the webpage of storage;
Display module, is after triggering the historical operation event by the web page display according to the historical operation event for extracting State.
11. devices as claimed in claim 10, it is characterised in that the memory space includes following at least one:
The 5th edition local storage space localstorage of HTML HTML5;
The session memory space sessionstorage of HTML5.
12. devices as claimed in claim 11, it is characterised in that the extraction module, key is designated with the webpage, from In the localstorage and/or sessionstorage of HTML5, extract and the corresponding value of the mark, as extraction go through History Action Events.
13. devices as claimed in claim 10, it is characterised in that the display module, for the historical operation thing for list Part, obtains the value and the mark of the list of the list recorded in the historical operation event, determines in the webpage List corresponding with the mark of the list, and it is determined that list in insert described value;
For the historical operation event for other elements, the mode of operation and document recorded in the historical operation event are obtained The position of object model DOM node, on the position in the webpage, performs operation corresponding with the mode of operation.
A kind of 14. Action Events tape decks, it is characterised in that including:
Module is monitored, the Action Events triggered in webpage are monitored;
Second determining module, when Action Events are listened to, according to the mark of the webpage, it is determined that right with the mark of the webpage The memory space answered;
Logging modle, during the Action Events that will be listened to are as historical operation logout to the memory space, to connect It is according to the historical operation event, the web page display is described to trigger after receiving the displaying instruction for the webpage State after historical operation event.
15. devices as claimed in claim 14, it is characterised in that described device also includes:
Binding module, event handling function is bound on the root node of the corresponding DOM Document Object Model dom tree of webpage;
The monitoring module, by the event handling function, monitors the Action Events triggered in the webpage.
16. devices as claimed in claim 14, it is characterised in that the logging modle, when the Action Events for listening to are directed to During the Action Events of list, by the mark of the mark of the webpage, the value of the list and the list, the storage is saved in In space;
When the Action Events for listening to are directed to the Action Events of other elements, by the mark of the webpage, the behaviour for listening to Make the position of the mode of operation DOM node corresponding with the Action Events of event, in recorded the memory space.
17. devices as claimed in claim 16, it is characterised in that the logging modle, using the mark of the webpage as key, will The data of each Action Events for listening to are combined as value, in recorded the memory space.
18. devices as claimed in claim 14, it is characterised in that the memory space includes:5th edition HTML The local storage space localstorage and/or session memory space sessionstorage of HTML5;
The logging modle, it is determined that the default storage mode of the Action Events to listening to;
If it is determined that default storage mode be storage in the sessionstorage of HTML5, then the Action Events that will be listened to In recorded the sessionstorage of HTML5;
If it is determined that default storage mode be storage to the Action Events note that in the localstorage of HTML5, then will be listened to In recording the localstorage of HTML5.
CN201610671782.0A 2016-08-15 2016-08-15 Webpage display method, operation event recording method and device Active CN106897347B (en)

Priority Applications (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

Applications Claiming Priority (1)

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

Related Child Applications (1)

Application Number Title Priority Date Filing Date
CN202111670977.0A Division CN114519156A (en) 2016-08-15 2016-08-15 Webpage display method, operation event recording method and device

Publications (2)

Publication Number Publication Date
CN106897347A true CN106897347A (en) 2017-06-27
CN106897347B CN106897347B (en) 2021-12-24

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 After (1)

Application Number Title Priority Date Filing Date
CN202111670977.0A Pending CN114519156A (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)

Cited By (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107341234A (en) * 2017-06-30 2017-11-10 广州酷狗计算机科技有限公司 Display methods, device and the computer-readable recording medium of the page
CN107368580A (en) * 2017-07-21 2017-11-21 维沃移动通信有限公司 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
CN109002495A (en) * 2018-06-28 2018-12-14 郑州云海信息技术有限公司 Date storage method and device
CN109656704A (en) * 2018-12-21 2019-04-19 北京天融信网络安全技术有限公司 A kind of information processing method and information processing unit
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
CN110502169A (en) * 2018-05-18 2019-11-26 华为技术有限公司 A kind of display control method and terminal
CN111046317A (en) * 2019-12-27 2020-04-21 北京奇艺世纪科技有限公司 Page data acquisition method, device, equipment and computer readable storage medium
CN111104616A (en) * 2018-10-26 2020-05-05 阿里巴巴集团控股有限公司 Webpage processing method and device
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

Citations (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1347036A (en) * 2000-10-11 2002-05-01 吴志铭 Web page activation recorder and reproducer
CN101652748A (en) * 2007-04-06 2010-02-17 国际商业机器公司 Service program generation technology
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
CN104484479A (en) * 2014-12-31 2015-04-01 小米科技有限责任公司 Webpage browsing processing method and device
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
CN104915461A (en) * 2015-07-10 2015-09-16 广州神马移动信息科技有限公司 Page presentation method and device
CN104978385A (en) * 2015-03-19 2015-10-14 腾讯科技(深圳)有限公司 Information processing method, browser client and terminal
CN104991916A (en) * 2015-06-24 2015-10-21 小米科技有限责任公司 Webpage loading method and apparatus
CN105335404A (en) * 2014-07-29 2016-02-17 北京奇虎科技有限公司 Page information loading method and device

Patent Citations (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1347036A (en) * 2000-10-11 2002-05-01 吴志铭 Web page activation recorder and reproducer
CN101652748A (en) * 2007-04-06 2010-02-17 国际商业机器公司 Service program generation technology
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
CN105335404A (en) * 2014-07-29 2016-02-17 北京奇虎科技有限公司 Page information loading method and device
CN104484479A (en) * 2014-12-31 2015-04-01 小米科技有限责任公司 Webpage browsing processing method and device
CN104978385A (en) * 2015-03-19 2015-10-14 腾讯科技(深圳)有限公司 Information processing method, browser client and terminal
CN104991916A (en) * 2015-06-24 2015-10-21 小米科技有限责任公司 Webpage loading method and apparatus
CN104915461A (en) * 2015-07-10 2015-09-16 广州神马移动信息科技有限公司 Page presentation method and device

Cited By (14)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107341234A (en) * 2017-06-30 2017-11-10 广州酷狗计算机科技有限公司 Display methods, device and the computer-readable recording medium of the page
CN107341234B (en) * 2017-06-30 2021-04-13 广州酷狗计算机科技有限公司 Page display method and device and computer readable storage medium
CN107368580A (en) * 2017-07-21 2017-11-21 维沃移动通信有限公司 A kind of Webpage display process and mobile terminal
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
CN110502169A (en) * 2018-05-18 2019-11-26 华为技术有限公司 A kind of 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
CN109656704A (en) * 2018-12-21 2019-04-19 北京天融信网络安全技术有限公司 A kind of information processing method and information processing unit
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

Also Published As

Publication number Publication date
CN106897347B (en) 2021-12-24
CN114519156A (en) 2022-05-20

Similar Documents

Publication Publication Date Title
CN106897347A (en) A kind of web page display method, Action Events recording method and device
CN107729475B (en) Webpage element acquisition method, device, terminal and computer-readable storage medium
CN103268361B (en) Extracting method, the device and system of URL are hidden in webpage
US20180052809A1 (en) Inferring user interaction with an iframe
CN107295050A (en) Front end user behavioral statisticses method and device
CN105243159A (en) Visual script editor-based distributed web crawler system
CN106897251B (en) Rich text display method and device
CN109376291B (en) Website fingerprint information scanning method and device based on web crawler
CN104408204A (en) Method and device for obtaining webpage page link address
CN104063401B (en) The method and apparatus that a kind of webpage pattern address merges
CN110020339B (en) Webpage data acquisition method and device based on non-buried point
US8639560B2 (en) Brand analysis using interactions with search result items
CN106126693A (en) The sending method of the related data of a kind of webpage and device
CN106126747A (en) Data capture method based on reptile and device
CN103678343B (en) The method and apparatus of prompting webpage load progress
CN107147645A (en) The acquisition methods and device of network security data
CN110275705A (en) Generate method, apparatus, equipment and the storage medium for preloading page code
CN104166545B (en) The sniff method and device of a kind of web page resources
CN107391534A (en) The page is shown, pagefile return method and device, computer-readable storage medium
CN107798051A (en) Document dbject model affairs crawl device
US20170118134A1 (en) Array Generation in a Resource Management System
US20160103799A1 (en) Methods and systems for automated detection of pagination
US9104573B1 (en) Providing relevant diagnostic information using ontology rules
CN105975395A (en) Website state reconnaissance method and device
US8606773B2 (en) Method for combining and processing web data using tables and programming-by-demonstration

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
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: 20201015

Address after: Cayman Enterprise Centre, 27 Hospital Road, George Town, Grand Cayman Islands

Applicant after: Innovative advanced technology Co.,Ltd.

Address before: Cayman Enterprise Centre, 27 Hospital Road, George Town, Grand Cayman Islands

Applicant before: Advanced innovation technology Co.,Ltd.

Effective date of registration: 20201015

Address after: Cayman Enterprise Centre, 27 Hospital Road, George Town, Grand Cayman Islands

Applicant after: Advanced innovation technology Co.,Ltd.

Address before: A four-storey 847 mailbox in Grand Cayman Capital Building, British Cayman Islands

Applicant before: Alibaba Group Holding Ltd.

GR01 Patent grant
GR01 Patent grant
TR01 Transfer of patent right
TR01 Transfer of patent right

Effective date of registration: 20240228

Address after: 128 Meizhi Road, Guohao Times City # 20-01, Singapore 189773

Patentee after: Advanced Nova Technology (Singapore) Holdings Ltd.

Country or region after: Singapore

Address before: Cayman Enterprise Centre, 27 Hospital Road, George Town, Grand Cayman Islands

Patentee before: Innovative advanced technology Co.,Ltd.

Country or region before: Cayman Islands