如何让浏览器支持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 相关文章推荐
js option删除代码集合
Nov 12 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 Javascript
在jQuery中处理XML数据的大致方法
Aug 14 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
浅谈js中子页面父页面方法 变量相互调用
Aug 04 Javascript
微信小程序 toast 详解及实例代码
Nov 09 Javascript
浅谈React和Redux的连接react-redux
Dec 04 Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 Javascript
jquery操作select常见方法大全【7种情况】
May 28 jQuery
Javascript设计模式之原型模式详细
Oct 05 Javascript
pnpm对npm及yarn降维打击详解
Aug 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 addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
Js+Flash实现访问剪切板操作
2012/11/20 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
2015/05/07 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
python实现简单颜色识别程序
2020/02/19 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
解决Python中报错TypeError: must be str, not bytes问题
2020/04/07 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
python 基于opencv实现图像增强
2020/12/23 Python
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
小学英语教学反思案例
2014/02/04 职场文书
电子商务个人职业生涯规划范文
2014/02/12 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript