HTML5 's Onhashchange and history management
Now the development, more and more inclined to jump in the page, in this case need to update their knowledge, to achieve the page jump. History is the solution to this problem.
There are two ways to HTML5 the solution:
1,onhashchange
Use of Window.loaction.hash object (save, Fetch)
2,history
(1) pushstate three parameters: data, title (empty), url (optional).
(2) Popstate is an event that reads Event.state data
Note: The URL is false. The user cannot actually find it.
Essentially: Both methods are stored value + value events. After simplification, it is:
Window.loaction.hash = Srcarr;
Window.onhashchange=function () {
var val = Window.loaction.hash;
}
And
History.pushstate = Srcarr;
Window.onpopstate=function (event) {
var val = event.state;
};
For details, refer to the following random number examples:
HTML code
- <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
- <HTML xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <Meta http-equiv= "content-type" content= "text/html; Charset=utf-8 " />
- <title> Untitled document </title>
- <script type="Text/javascript">
- window.onload=function () {
- var oinput = document.getElementById ("input1");
- oinput.onclick=function () {
- var odiv = document.getElementById ("Div1");
- var num = generatenum (6);
- Onhashchange
- window.location.hash = num;
- Window.onhashchange = function () {
- odiv.innerhtml = window.location.hash.substring (1);
- }
- History
- /*
- History.pushstate (num, ");
- window.onpopstate = Function (event) {
- odiv.innerhtml=event.state;
- }*/
- odiv.innerhtml=num;
- Generate random numbers
- function Generatenum (num) {
- var ret = [];
- for (var i = 0; I < num; i++) {
- Ret.push (Math.ceil (100*math.random ()));
- };
- return ret;
- }
- }
- }
- </Script>
- </head>
- <body>
- Winning number:
- <div id="Div1"></div>
- <input type="button" value="Generate random Number" id="input1" />
- </body>
- </HTML>
HTML5 's Onhashchange and history management