如何让浏览器支持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 相关文章推荐
jquery插件珍藏(图片局部放大/信息提示框)
Jan 08 Javascript
js正则表达式的使用详解
Jul 09 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
JS扩展方法实例分析
Apr 15 Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 Javascript
js 函数式编程学习笔记
Mar 25 Javascript
Angularjs的键盘事件的绑定
Jul 27 Javascript
vue实现导航栏效果(选中状态刷新不消失)
Dec 13 Javascript
JavaScript门道之标准库
May 26 Javascript
Vue自定义toast组件的实例代码
Aug 15 Javascript
vue 解决异步数据更新问题
Oct 29 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 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/11/26 PHP
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
js拦截alert对话框另类应用
2013/01/16 Javascript
js判断checkbox是否选中个数的方法(超简单)
2016/08/19 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
Vue兼容ie9的问题全面解决方案
2018/06/19 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
Python基本语法经典教程
2016/03/11 Python
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
django连接oracle时setting 配置方法
2019/08/29 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
jupyter 导入csv文件方式
2020/04/21 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
资产经营总监岗位职责范文
2013/12/01 职场文书
领班岗位职责范文
2014/02/06 职场文书
自动一体化专业求职信
2014/03/15 职场文书
总经理岗位职责范本
2015/04/01 职场文书
诚实守信主题班会
2015/08/13 职场文书
温馨祝福晨语:美丽的一天从我的问候开始
2019/11/28 职场文书