AJAX 网页保留浏览器前进后退等功能

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了AJAX 网页保留浏览器前进后退等功能，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1713字，纯文字阅读大概需要3分钟。

内容图文

在一些AJAX被大量使用的页面，有时都不太敢刷新，因为刷新以后可能看到的是和原来有很大不同的页面。暂不讨论在某些页面内容大量更新的情况下是否该使用AJAX的问题，本文简单说一下保留浏览器前进、后退、刷新等功能。
这里假设一个有两个Tabs的页面，每个Tab中含有大量文字，可能还有图片。如果现在觉得Tab2的内容很好，把它加入收藏夹或发送给朋友。下次通过收藏夹打开或者朋友点开这个链接的时候很有可能看到的是Tab1的内容，然后需要鼠标再次点击Tab2才看到想要看的内容。如果页面逻辑更为复杂，则可能要进行多步操作才能回到希望看的内容，这样的体验不太好。
要使刷新、加入收藏夹等功能正常使用，需要让当前的操作在URI上有所体现。但是改变URI的同时又不能引起页面的刷新，因此可以通过改变URI中的片段(fragment)来实现。例如，点击Tab1后将URI改为http://www.example.com/example.html#tab1，点击Tab2则将URI改为http://www.example.com/example.html#tab2。
代码如下:

function ShowTab1() { 
$("#tab2").hide(); 
$("#tab1").show(); 
window.location.hash = "#tab1"; 
}; 
function ShowTab2() { 
$("#tab1").hide(); 
$("#tab2").show(); 
window.location.hash = "#tab2"; 
}; 
 
这样做已经使得URI产生了变化，但是无论通过http://www.example.com/example.html#tab1还是http://www.example.com/example.html#tab2访问页面都是显示Tab1的内容，所以还需要在页面载入时读取#后的内容。 
 代码如下:

$(document).ready(ShowTab()); 
function ShowTab() { 
if (window.location.hash == "#tab2") 
ShowTab2(); 
else 
ShowTab1(); 
} 
 
这样，刷新和加入收藏夹等功能都已经可以使用了，不过前进和后退还是会有麻烦。虽然这两个按钮已经变得可用，但是点击时网页的内容并没有发生变化。我们需要用到body的onhashchange事件。onhashchange事件并不是所有浏览器都支持的，如果要使不支持该事件的浏览器也检测#后内容的变化，可能需要写一个函数定期检测window.location.hash的变化或者自己实现onhashchange事件。
示例代码打包下载 (Visual Studio 2010)
            
            


           
                
                                                

内容总结

以上是互联网集市为您收集整理的AJAX 网页保留浏览器前进后退等功能全部内容，希望文章能够帮你解决AJAX 网页保留浏览器前进后退等功能所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---