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.