First, the use of IFRAME, through the document.write to produce history
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title>0</title>
<body>
<input type= "button" value= "plus 1" onclick= "Add ()"/>
<div id= "Info" style= "border:red 1px solid;width:200px;padding:10px;margin:5px;" >0</div>
</body>
<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>
When you click on the button to update the page DOM (simulate AJAX submission), you will find that the browser Back button is available. Click Back to return to the previous state.
The disadvantage of this approach is that only IE and Firefox are supported.
Ajax fallback Solution (ii)
Second, the use of IFRAME, through the modification of IFRAME.SRC to produce history
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title>0</title>
<body>
<input type= "button" value= "plus 1" onclick= "Add ()"/>
<div id= "Info" style= "border:red 1px solid;width:200px;padding:10px;margin:5px;" >0</div>
</body>
<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>
More than a blank.html, is an empty HTML frame, no JS logic code, as follows
Copy Code code as follows:
<! DOCTYPE html>
<title>blank.html</title>
<body>
</body>
Each AJAX operation appends a number to the IFRAME.SRC question mark to record history. Click the Back button, iframe in the OnLoad event to obtain the URL of the IFRAME, according to the number after the question mark to fetch records.
All browsers support this method. The disadvantage is that if there are other IFrame in the main page, and the SRC is modified. Historical management can be confusing.
Third, the use of IFRAME, by modifying iframe.src to produce history, callback written in the IFRAME corresponding HTML page
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title>0</title>
<body>
<input type= "button" value= "plus 1" onclick= "Add ()"/>
<div id= "Info" style= "border:red 1px solid;width:200px;padding:10px;" >0</div>
</body>
<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>
As with Scenario 2, IFRAME.SRC is used to generate history, and a separate HTML page (IFRAME) is also required. The difference is that the callback logic is not written in the Iframe.onload, but is written directly in the HTML page (the previous one is an empty HTML shelf). Blank.html is as follows
Copy Code code as follows:
<! DOCTYPE html>
<title>blank.html</title>
<body>
<script>
var url= location.href;
if (Url.indexof ('? ') >-1) {
var idx = url.substr (Url.indexof ('? ') +1);
Parent. History.get (IDX);
}
</script>
</body>
As with scenario 2, all browsers are supported.
Four, through the modification Location.hash produces the history, Hashchange event processing backward
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title>0</title>
<body>
<input type= "button" value= "plus 1" onclick= "Add ()"/>
<div id= "Info" style= "border:red 1px solid;width:200px;padding:10px;" >0</div>
</body>
<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 time the Ajax operation to change the value of the Location.hash, each change in the address bar will be reflected. Listen for this event in Window.onhashchange. Take the value of the hash to the corresponding history.
The advantage of an IFRAME is that you can copy the URL of the address bar directly into the history, and the disadvantage is that IE6/7 does not support it.
Code package download in the text
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
