如何让浏览器支持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 面向对象 命名空间
May 13 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
Jun 08 Javascript
js调用后台servlet方法实例
Jun 09 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 Javascript
原生js实现tab选项卡切换
Mar 23 Javascript
Node.js常用工具之util模块
Mar 09 Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
vue自定义正在加载动画的例子
Nov 14 Javascript
JavaScript逻辑运算符相关总结
Sep 04 Javascript
Openlayers+EasyUI Tree动态实现图层控制
Sep 28 Javascript
小程序实现密码输入框
Nov 16 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
咖啡的植物学知识
2021/03/03 咖啡文化
十天学会php之第三天
2006/10/09 PHP
基于mysql的bbs设计(四)
2006/10/09 PHP
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
xss文件页面内容读取(解决)
2010/11/28 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
基于jquery的一个拖拽到指定区域内的效果
2011/09/21 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
用jquery存取照片的具体实现方法
2013/06/30 Javascript
Nodejs关于gzip/deflate压缩详解
2015/03/04 NodeJs
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
JavaScript设计模式之单体模式全面解析
2016/09/09 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
Vue 框架之键盘事件、健值修饰符、双向数据绑定
2018/11/14 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
Python3之读取连接过的网络并定位的方法
2018/04/22 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
艺术应用与设计个人的自我评价
2013/11/23 职场文书
数控机械专业个人的自我评价
2014/01/02 职场文书
总经理任命书范本
2014/06/05 职场文书
团代会闭幕词
2015/01/28 职场文书
《打电话》教学反思
2016/02/22 职场文书
Python上下文管理器Content Manager
2021/06/26 Python
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers