如何让浏览器支持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 02 Javascript
JS关键字变色实现思路及代码
Feb 21 Javascript
jquery插件jquery倒计时插件分享
Dec 27 Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
使用yeoman构建angular应用的方法
Aug 14 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 Javascript
手把手带你封装一个vue component第三方库
Feb 14 Javascript
vue+moment实现倒计时效果
Aug 26 Javascript
layui动态加载多表头的实例
Sep 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入门速成(2)
2006/10/09 PHP
文件系统基本操作类
2006/11/23 PHP
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
完善CodeIgniter在IDE中代码提示功能的方法
2014/07/19 PHP
PHP中防止SQL注入方法详解
2014/12/25 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
checkbox 多选框 联动实现代码
2008/10/22 Javascript
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
JavaScript中的replace()方法使用详解
2015/06/06 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
BootStrap入门教程(一)之可视化布局
2016/09/19 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
js中时间格式化的几种方法
2018/07/22 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
2020/02/12 Javascript
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
Pytorch反向求导更新网络参数的方法
2019/08/17 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
Python networkx包的实现
2020/02/14 Python
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
计算机专业个人求职自荐信
2013/09/21 职场文书
办护照工作证明范本
2014/01/14 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
2015年财务科工作总结范文
2015/05/13 职场文书
律政俏佳人观后感
2015/06/09 职场文书
保护地球的宣传语
2015/07/13 职场文书
周一给客户的问候语
2015/11/10 职场文书