如何让浏览器支持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 &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
Jun 02 Javascript
用js查找法实现当前栏目的高亮显示的代码
Nov 24 Javascript
两个DIV等高的JS的实现代码
Dec 23 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
jQuery下的动画处理总结
Oct 10 Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 Javascript
JavaScript简单计算人的年龄示例
Apr 15 Javascript
将 vue 生成的 js 上传到七牛的实例
Jul 28 Javascript
layer提示框添加多个按钮选择的实例
Sep 12 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 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
Function eregi is deprecated (解决方法)
2013/06/21 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
JS之if语句对接事件动作逻辑(详解)
2017/06/28 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
2018/02/23 Javascript
webpack4.x开发环境配置详解
2018/08/04 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
通过vue-cli3构建一个SSR应用程序的方法
2018/09/13 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)
2014/08/25 Python
在Python中使用PIL模块处理图像的教程
2015/04/29 Python
详解supervisor使用教程
2017/11/21 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
django 消息框架 message使用详解
2019/07/22 Python
python实现计算器功能
2019/10/31 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
浅谈Python中的异常和JSON读写数据的实现
2020/02/27 Python
如何利用Python识别图片中的文字
2020/05/31 Python
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
英国领先的餐饮折扣俱乐部:Gourmet Society
2020/07/26 全球购物
活动总结怎么写啊
2014/05/07 职场文书
工商管理专业自荐信
2014/06/03 职场文书
流动人口婚育证明范本
2014/09/26 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python
java泛型通配符详解
2021/07/25 Java/Android