如何让浏览器支持jquery ajax load 前进、后退功能

(编辑:jimmy 日期: 2026/4/30 浏览:2)

一般在做 ajax load 的时候,很多人都不会考虑到需要浏览器支持前进后退功能,因为大部分人都不知道可以实现。

最近遇到这个问题,经过一小段研究,发现github已经有现成的开源工具使用,主要实现原理是利用html的锚点,即<a href="#xxx">

主要demo代码如下:

html
复制代码 代码如下:
<ul>
<li><a href="#ttt">ttttttttttttttt</a></li>
<li><a href="#aaa">aaaaaaaaaaaaaaa</a></li>
<li><a href="#bbb">bbbbbbbbbbbbbbb</a></li>
<li><a href="#eee">eeeeeeeeeeeeeee</a></li>
<li><a href="#mmm">mmmmmmmmmmmmmmm</a></li>
</ul>
<div id="showdiv" style="width: 500px; height: 500px; border: 1px groove #e3e7ea;">default content</div>

js
复制代码 代码如下:
<script type="text/javascript">
$(function() {
// 这里是共用的位置,通过state参数做操作
$.History.bind(function(state){
$('#showdiv').load('action/'+state+'.html');
});
// 这里是对某个链接做特殊操作
$.History.bind('bbb',function(state){
alert('点击了 bbb 链接,这是对 bbb 链接特殊处理位置');
});
});
</script>

相关问题:

state 参数:即超链接标签href="#xxx"中的xxx值。

执行顺序:先执行特殊操作,再执行共用操作。
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。