如何让浏览器支持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 计算当天是本年本月的第几周
Mar 22 Javascript
显示js对象所有属性和方法的函数
Oct 16 Javascript
Javascript的闭包
Dec 31 Javascript
JavaScript动态添加列的方法
Mar 25 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 Javascript
JS中sort函数排序用法实例分析
Jun 16 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
Jun 26 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
js控制台输出的方法(详解)
Nov 26 Javascript
AngularJS实现select的ng-options功能示例
Jul 12 Javascript
vue实现页面加载动画效果
Sep 19 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/10/09 PHP
php 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
php文件缓存类用法实例分析
2015/04/22 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
javascript Excel操作知识点
2009/04/24 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
jQuery插件ContextMenu自定义图标
2017/03/15 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
vue实现文章内容过长点击阅读全文功能的实例
2017/12/28 Javascript
Vue.directive 自定义指令的问题小结
2018/03/04 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
详解Python中time()方法的使用的教程
2015/05/22 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
详解Python正则表达式re模块
2019/03/19 Python
python实现简单日期工具类
2019/04/24 Python
python使用turtle绘制国际象棋棋盘
2019/05/23 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
魔幻般冒泡背景的CSS3按钮动画
2016/02/27 HTML / CSS
德国家具在线:Fashion For Home
2017/03/11 全球购物
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
营业员个人总结的自我评价
2013/10/25 职场文书
小学竞选班干部演讲稿
2014/08/20 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
mysql数据库入门第一步之创建表
2021/05/14 MySQL
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android