當前位置：首頁 >

location的hash部分和使用window.onhashchange实现ajax请求内容时使用浏览器后退和前进功能...

發布時間：2025/3/17 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 location的hash部分和使用window.onhashchange实现ajax请求内容时使用浏览器后退和前进功能... 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

在js跨域雙向數據傳遞時可以用iframe加上location.hash來實現，在研究這個的時候深入學習了一下hash的特性。

? hash就是uri中#及后面的部分，例如：www.google.com.hk#123的#123。當只有hash部分發生變化時，瀏覽器的歷史記錄會產生記錄，但不會向服務器發出請求，這時按后退鍵地址欄的uri會變化但頁面內容不變。

? 而hash變化但不發出請求就是js跨域雙向數據傳遞的基礎啦。

? 下面就講述一下hash結合ajax的使用，ajax每次取數據時頁面更新后瀏覽器并不產生歷史記錄，也就是說后退和前進按鈕失去應用的效用，這時可以結合hash和window.onhashchange來使用，注意ie6、7均不支持onhashchange，但可以用setInterval定期檢查 hash的改變，或者onload中檢查的方法。

? 具體實現：

<body><div id="div1"></div><input type="button" value="click" onclick="GetT()" /> </body> </html> <script type="text/javascript" src="js/AjaxHasPool.js"> </script> <script type="text/javascript"> var ajax = new AjaxHasPool(); var method="get"; var url ="Handler.ashx"; var i = 1; var obj = new Object(); function GetT() {document.getElementById("div1").innerHTML=i; ajax.Startup(null,url,method,ep); } function ep(xmlobj){eval("obj['"+i+"']="+i+";");location.hash="#"+i; ++i; }window.onhashchange=function(){ var hashStr = location.hash.replace("#",""); if(typeof(eval("obj['"+hashStr+"']"))!="undefined") document.getElementById("div1").innerHTML=eval("obj['"+hashStr+"']"); } </script> 1.AjaxHasPool是自己封裝的ajax類，其中的ajax.Startup()就是發送ajax請求； 2.Object對象保存歷史記錄，如果對象屬性為數字的話，要用obj["1"]的方式來實例化，否者會違反命名規范。

3.在使用window.onhashchange檢測hash值獲取歷史數據。

總結

以上是生活随笔為你收集整理的location的hash部分和使用window.onhashchange实现ajax请求内容时使用浏览器后退和前进功能...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： JavaScript instanceo
下一篇：第6章系统数据文件和信息总结

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

location的hash部分和使用window.onhashchange实现ajax请求内容时使用浏览器后退和前进功能...

總結