This article provides the tutorial is a JS Ajax solution browser "forward" "Back" button invalidation problem oh, in AJAX development, the forward back page is a difficult problem, now we provide a complete solution to deal with this matter.
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<title>new document</title>
<body>
<br/><br/><br/>
<a href= "Web effects: void (0)" onclick= "SETP1 ()" >link1</a>
<a href= "javascript:void (0)" onclick= "SETP2 ()" >link2</a>
<a href= "javascript:void (0)" onclick= "SETP3 ()" >link3</a>
<p id= "P1" >p1</p>
<p id= "P2" >p2</p>
<p id= "P3" >p3</p>
<iframe name= "Hframe" src= "history.html" style= "Display:none" ></iframe>
</body>
<script language= "javascript" type= "Text/javascript" >
<!--
The Bind method defined for the function object in the prototype-1.3.1 framework, described below
Function.prototype.bind = function (object) {
var __method = this;
return function () {
__method.apply (object, arguments);
}
}
Define forward back processing classes and constructors
function Backbuttonfixer () {
Functions for storing state records that need to be logged
this.actions={};
QS is used to store the changed state before it can be compared which functions have changed and needs to be called back
This.qs= "";
Sets the timer used to detect whether the URL of the hidden frame changes
Window.setinterval (This.load.bind (this), 100);
}Register an action that requires the forward back button to be implemented
Backbuttonfixer.prototype.register=function (s,doaction,undoaction) {
Record a pair of functions
This.actions[s]={doaction:doaction,undoaction:undoaction}
}//Each registered method needs to change the URL address of the hidden frame to be logged by the browser
Backbuttonfixer.prototype.toqs=function (s) {
var qs= Window.frames.hframe.location.search;
qs=qs.slice (1,qs.length);
var arrqs=qs.split (".");
if (qs.length==0) arrqs=[];
var Exist=false;
for (var i=0;i<arrqs.length;i++) {
if (arrqs[i]==s) {
exist=true;
break;
}
}
if (!exist) Arrqs.push (s);
//Change the URL of the hidden frame
this.qs=window.frames.hframe.location.search= "?" +arrqs.join (".");
}//Call based on the query string data for the frames page
Backbuttonfixer.prototype.load=function () {
//get the query string that the framework also represents
var qs1 =window.frames.hframe.location.search;
//to determine if the QS address in the frame has changed, and if not, return directly to
if (THIS.QS==QS1) returns;
//get the current state. Represents the
qs1=qs1.slice (1,qs1.length) in the form of a function call trajectory;
var arrqs1=qs1.split (".");
if (qs1.length==0) arrqs1=[];
//The function identifier in the form of a hash table to facilitate subsequent comparisons
var objqs1={};
for (var i=0;i<arrqs1.length;i++) objqs1[ Arrqs1[i]]=true;Get a new state
var qs2=this.qs.slice (1,this.qs.length);
var arrqs2=qs2.split (".");
if (qs2.length==0) arrqs2=[];
The function identifier is made into a hash table to facilitate the comparison in the following way
var objqs2={};
for (var i=0;i<arrqs2.length;i++) objqs2[arrqs2[i]]=true;
Compare two states, find newly added functions, and invoke functions stored in doaction
for (Var i=0;i<arrqs1.length;i++) {
If a new function is added, call doaction
if (!objqs2[arrqs1[i]]) this.actions[arrqs1[i]].doaction ();
}Compare two states, find the reduced function, and call the function stored in the UndoAction
for (Var i=0;i<arrqs2.length;i++) {
If the function is reduced, call the UndoAction
if (!objqs1[arrqs2[i]]) this.actions[arrqs2[i]].undoaction ();
}Sets the state of the switch completion to the current state
This.qs= "?" +QS1;
}
Creating objects
var bbf=new backbuttonfixer ();
Registration function
Bbf.register ("P1", SETP1,UNDOSETP1);
Bbf.register ("P2", SETP2,UNDOSETP2);
Bbf.register ("P3", SETP3,UNDOSETP3);
function SetContent (containerid,content) {
Container=document.getelementbyid (Containerid);
Container.innerhtml=content;
}
Set the contents of the P1 node
function Setp1 () {
SetContent ("P1", "Here is P1 content");
Store the state in a URL
Bbf.toqs ("P1");
}
Cancel setting the contents of the P1 node
function Undosetp1 () {
SetContent ("P1", "P1");
}Set the contents of the P2 node
function SETP2 () {
SetContent ("P2", "Here is P2 content");
Bbf.toqs ("P2");
}
Cancel setting the contents of the P2 node
function UNDOSETP2 () {
SetContent ("P2", "P2");
}//Set contents of P3 node
function setp3 () {
setcontent ("P3", "Here is P3 content");
bbf.toqs ("P3");
}
//P3 node content
Function Undosetp3 () {
setcontent ("P3", "P3");
}
//-->
</script>
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
