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


Posted in Javascript onJune 12, 2014

一般在做 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值。

执行顺序:先执行特殊操作,再执行共用操作。

Javascript 相关文章推荐
JavaScript使用cookie
Feb 02 Javascript
使用prototype.js进行异步操作
Feb 07 Javascript
javascript new一个对象的实质
Jan 07 Javascript
js各种验证文本框输入格式(正则表达式)
Oct 22 Javascript
firefox下input type=&quot;file&quot;的size是多大
Oct 24 Javascript
详解AngularJS中的作用域
Jun 17 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 Javascript
js实现将json数组显示前台table中
Jan 10 Javascript
Vue动态获取width的方法
Aug 22 Javascript
如何使用pm2快速将项目部署到远程服务器
Mar 12 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
Nov 05 Javascript
js创建一个input数组并绑定click事件的方法
Jun 12 #Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 #Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 #Javascript
深入理解javascript中的立即执行函数(function(){…})()
Jun 12 #Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 #Javascript
自己封装的javascript事件队列函数版
Jun 12 #Javascript
jquery动态添加删除一行数据示例
Jun 12 #Javascript
You might like
PHP 编程请选择正确的文本编辑软件
2006/12/21 PHP
PHP实现多条件查询实例代码
2010/07/17 PHP
php列出mysql表所有行和列的方法
2015/03/13 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
laravel 实现用户登录注销并限制功能
2019/10/24 PHP
如何通过Apache在本地配置多个虚拟主机
2020/07/29 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
jQuery live
2009/05/15 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
2012/12/12 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
js使用心得分享
2015/01/13 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
D3.js实现文本的换行详解
2016/10/14 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
vue el-table实现行内编辑功能
2019/12/11 Javascript
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
Python itertools模块详解
2015/05/09 Python
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
《问银河》教学反思
2014/02/19 职场文书
安全标兵事迹材料
2014/08/17 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
辞职信的写法
2015/02/27 职场文书
入党介绍人考察意见
2015/06/01 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
vue+element ui实现锚点定位
2021/06/29 Vue.js
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技