本文章提供的教程是一款js ajax 解決瀏覽器的【前進】【後退】按鈕失效問題哦，在ajax開發中，前進後退網頁是一個難題，現在我們提供一個完整理的解決方案來處理此事情。
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>new document</title>
</head>
<body>
<br/><br/><br/>
<a href="網頁特效: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>
</html>
<script language="javascript" type="text/javascript">
<!--
//prototype-1.3.1架構中為函數對象定義的bind方法，下面有介紹
function.prototype.bind = function(object) {
var __method = this;
return function() {
__method.apply(object, arguments);
}
}
//定義前進後退處理類及建構函式
function backbuttonfixer(){
//用於儲存需要進行狀態記錄的函數
this.actions={};
//qs用於儲存變化前的狀態，以備比較哪些函數發生了變化，需要重新調用
this.qs="";
//設定定時器用於檢測隱藏架構的url是否變化
window.setinterval(this.load.bind(this),100);
}//註冊一個需要實現前進後退按鈕的動作
backbuttonfixer.prototype.register=function(s,doaction,undoaction){
//將一對函數記錄下來
this.actions[s]={doaction:doaction,undoaction:undoaction}
}//每個註冊的方法在調用時都需要改變隱藏架構的url地址，以被瀏覽器記錄
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);
//改變隱藏架構的url
this.qs=window.frames.hframe.location.search="?"+arrqs.join(".");
}//根據架構頁的查詢字串資料來進行調用
backbuttonfixer.prototype.load=function(){
//擷取架構也表示的查詢字串
var qs1=window.frames.hframe.location.search;
//判斷架構內的qs地址是否發生變化，如果沒變則直接返回
if(this.qs==qs1)return;
//擷取當前的狀態，以函數調用軌跡的形式表示
qs1=qs1.slice(1,qs1.length);
var arrqs1=qs1.split(".");
if(qs1.length==0)arrqs1=[];
//將函數標識符做成雜湊表的形式，方便後面的比較
var objqs1={};
for(var i=0;i<arrqs1.length;i++)objqs1[arrqs1[i]]=true;//擷取新的狀態
var qs2=this.qs.slice(1,this.qs.length);
var arrqs2=qs2.split(".");
if(qs2.length==0)arrqs2=[];
//將函數標識符做成雜湊表的形式，方便後面的比較
var objqs2={};
for(var i=0;i<arrqs2.length;i++)objqs2[arrqs2[i]]=true;
//比較兩個狀態，找出新增加的函數，調用doaction中儲存的函數
for(var i=0;i<arrqs1.length;i++){
//如果新增加了函數，則調用doaction
if(!objqs2[arrqs1[i]])this.actions[arrqs1[i]].doaction();
}//比較兩個狀態，找出減少的函數，調用undoaction中儲存的函數
for(var i=0;i<arrqs2.length;i++){
//如果是減少了函數，則調用undoaction
if(!objqs1[arrqs2[i]])this.actions[arrqs2[i]].undoaction();
}//將切換完成的狀態設定為目前狀態
this.qs="?"+qs1;
}
//建立對象
var bbf=new backbuttonfixer();
//註冊函數
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;
}
//設定p1結點的內容
function setp1(){
setcontent("p1","here is p1 content");
//將狀態儲存到url中
bbf.toqs("p1");
}
//取消設定p1結點的內容
function undosetp1(){
setcontent("p1","p1");
}//設定p2結點的內容
function setp2(){
setcontent("p2","here is p2 content");
bbf.toqs("p2");
}
//取消設定p2結點的內容
function undosetp2(){
setcontent("p2","p2");
}//設定p3結點的內容
function setp3(){
setcontent("p3","here is p3 content");
bbf.toqs("p3");
}
//取消設定p3結點的內容
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
