當(dāng)前位置：首頁 > 运维知识 > windows >内容正文

windows

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

發(fā)布時(shí)間：2025/3/17 windows 35 豆豆

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

在js跨域雙向數(shù)據(jù)傳遞時(shí)可以用iframe加上location.hash來實(shí)現(xiàn)，在研究這個(gè)的時(shí)候深入學(xué)習(xí)了一下hash的特性。

? hash就是uri中#及后面的部分，例如：www.google.com.hk#123的#123。當(dāng)只有hash部分發(fā)生變化時(shí)，瀏覽器的歷史記錄會(huì)產(chǎn)生記錄，但不會(huì)向服務(wù)器發(fā)出請求，這時(shí)按后退鍵地址欄的uri會(huì)變化但頁面內(nèi)容不變。

? 而hash變化但不發(fā)出請求就是js跨域雙向數(shù)據(jù)傳遞的基礎(chǔ)啦。

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

? 具體實(shí)現(xiàn)：

<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()就是發(fā)送ajax請求； 2.Object對象保存歷史記錄，如果對象屬性為數(shù)字的話，要用obj["1"]的方式來實(shí)例化，否者會(huì)違反命名規(guī)范。

3.在使用window.onhashchange檢測hash值獲取歷史數(shù)據(jù)。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

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