I. Use iframe to generate history through document. write
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Title> 0 </title>
</Head>
<Body>
<Input type = "button" value = "add 1" onclick = "add ()"/>
<Div id = "info" style = "border: red 1px solid; width: 200px; padding: 10px; margin: 5px;"> 0 </div>
</Body>
</Html>
<Script src = "history-0.1.js"> </script>
<Script>
Var info = document. getElementById ('info ');
Var I = 1;
Function add (){
Info. innerHTML = I;
Document. title = I;
Var data = {
Param: I,
Func: func
};
History. push (data );
I ++;
}
History. push ({param: 0, func: func });
Function func (I ){
Info. innerHTML = I;
Document. title = I;
}
</Script>
Click the button to update the page DOM (simulate ajax submission). the browser's back button is available. Click Back to return to the previous status.
This method only supports IE and Firefox.
Ajax backend solution (2)
Ii. Use iframe to generate a history by modifying iframe. src
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Title> 0 </title>
</Head>
<Body>
<Input type = "button" value = "add 1" onclick = "add ()"/>
<Div id = "info" style = "border: red 1px solid; width: 200px; padding: 10px; margin: 5px;"> 0 </div>
</Body>
</Html>
<Script src = "history-0.2.js"> </script>
<Script>
Var info = document. getElementById ('info ');
Var I = 1;
Function add (){
Info. innerHTML = I;
Document. title = I;
Var data = {
Param: I,
Func: func
};
History. push (data );
I ++;
}
History. push ({param: 0, func: func });
Function func (I ){
Info. innerHTML = I;
Document. title = I;
}
</Script>
An empty html shelf with no JS logic code.
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Title> blank.html </title>
</Head>
<Body>
</Body>
</Html>
Each ajax operation adds a number to the question mark of iframe. src to record the history. Click the back button to obtain the iframe url from the onload event of iframe, and retrieve the record according to the number after the question mark.
All browsers support this method. The disadvantage is that if another iframe exists on the home page and Its src is modified. History Management is messy.
3. Use iframe to generate a history by modifying iframe. src, and write the callback in the html page corresponding to iframe.
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Title> 0 </title>
</Head>
<Body>
<Input type = "button" value = "add 1" onclick = "add ()"/>
<Div id = "info" style = "border: red 1px solid; width: 200px; padding: 10px;"> 0 </div>
</Body>
</Html>
<Script src = "history-0.3.js"> </script>
<Script>
Var info = document. getElementById ('info ');
Var I = 1;
Function add (){
Var data = {
Param: I,
Func: func
};
History. push (data );
I ++;
}
History. push ({param: 0, func: func });
Function func (I ){
Info. innerHTML = I;
Document. title = I;
}
</Script>
Similar to solution 2, iframe. src is also used to generate history. A separate html page (iframe) is also required ). The difference is that the callback logic is not written in iframe. onload, but directly written in the html page (the previous article is an empty html shelf ). Blance.html is as follows:
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Title> blank.html </title>
</Head>
<Body>
<Script>
Var url = location. href;
If (url. indexOf ('? ')>-1 ){
Var idx = url. substr (url. indexOf ('? ') + 1 );
Parent. History. get (idx );
}
</Script>
</Body>
</Html>
Like solution 2, all browsers support this feature.
4. Generate a history by modifying location. hash, And the hashchange event is processed back.
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Title> 0 </title>
</Head>
<Body>
<Input type = "button" value = "add 1" onclick = "add ()"/>
<Div id = "info" style = "border: red 1px solid; width: 200px; padding: 10px;"> 0 </div>
</Body>
</Html>
<Script src = "history-0.4.js"> </script>
<Script>
Var info = document. getElementById ('info ');
Var I = 1;
Function add (){
Var data = {
Param: I,
Func: func
};
History. push (data );
I ++;
}
History. push ({param: 0, func: func });
Function func (I ){
Info. innerHTML = I;
Document. title = I;
}
</Script>
Each ajax operation changes the location. hash value, and the address bar is displayed after each modification. Listen for this event in window. onhashchange. Use the hash value to obtain the corresponding history.
The advantage of iframe is that you can copy the url in the address bar to directly access this historical record. The disadvantage is that IE6/7 does not support this record.
Package and download the code in this article
Related:
Http://msdn.microsoft.com/en-us/library/cc288209 (v = vs.85). aspx
Https://developer.mozilla.org/en/DOM/window.onhashchange
Http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-hashchange
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
