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

最新推荐文章于 2022-04-19 13:44:13 发布

weixin_34320724

最新推荐文章于 2022-04-19 13:44:13 发布

阅读量191

点赞数

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/31338

版权

在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值获取历史数据。

weixin_34320724

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
location的hash部分和使用window.onhashchange实现ajax请求内容时使用浏览器后退和前进功能...

在js跨域双向数据传递时可以用iframe加上location.hash来实现，在研究这个的时候深入学习了一下hash的特性。 hash就是uri中#及后面的部分，例如：www.google.com.hk#123的#123。当只有hash部分发生变化时，浏览器的历史记录会产生记录，但不会向服务器发出请求，这时按后退键地址栏的uri会变化但页面内容不变...
复制链接

扫一扫