如何让浏览器支持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 相关文章推荐
Array.prototype.slice 使用扩展
Jun 09 Javascript
html超链接打开窗口大小的方法
Mar 05 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
Nov 02 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
基于JQuery实现分隔条的功能
Jun 17 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
jQuery实现键盘回车搜索功能
Jul 25 jQuery
React.js绑定this的5种方法(小结)
Jun 05 Javascript
详解vue-router传参的两种方式
Sep 10 Javascript
JS内置对象和Math对象知识点详解
Apr 03 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中读取和写入WORD文档的代码
2008/04/09 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
php利用ffmpeg提取视频中音频与视频画面的方法详解
2017/06/07 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
2016/01/27 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
微信小程序 wxapp视图容器 view详解
2016/10/31 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
利用python如何处理nc数据详解
2018/05/23 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
关于是否需要写商业计划书
2014/02/07 职场文书
幼儿园户外活动总结
2014/07/04 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
煤矿百日安全活动总结
2015/05/07 职场文书
初中班长竞选稿
2015/11/20 职场文书
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers