js ajax 解決瀏覽器的【前進】【後退】按鈕失效問題

來源:互聯網
上載者:User

本文章提供的教程是一款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>

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.