如何让浏览器支持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 相关文章推荐
Three.js源码阅读笔记(基础的核心Core对象)
Dec 27 Javascript
jquery弹出框的用法示例(2)
Aug 26 Javascript
js window.open弹出新的网页窗口
Jan 16 Javascript
js操作滚动条事件实例
Jan 29 Javascript
JS上传图片前实现图片预览效果的方法
Mar 02 Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
May 10 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
基于JavaScript Array数组方法(新手必看篇)
Aug 20 Javascript
JS实现图片旋转动画效果封装与使用示例
Jul 09 Javascript
在vue中配置不同的代理同时访问不同的后台操作
Sep 11 Javascript
解决vant中 tab栏遇到的坑 van-tabs
Nov 04 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 email邮箱正则
2008/10/08 PHP
php 文章采集正则代码
2009/12/28 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
JoshChen_web格式编码UTF8-无BOM的小细节分析
2013/08/16 PHP
PHP根据key删除数组中指定的元素
2019/02/28 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
jQuery Mobile 和 Kendo UI 的比较
2016/05/05 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
pandas中apply和transform方法的性能比较及区别介绍
2018/10/30 Python
python实现三维拟合的方法
2018/12/29 Python
python遍历小写英文字母的方法
2019/01/02 Python
python下载微信公众号相关文章
2019/02/26 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
np.random.seed() 的使用详解
2020/01/14 Python
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
计算机本科生自荐信
2013/10/15 职场文书
会计学个人自荐信模板
2013/12/13 职场文书
户外活动总结范文
2014/04/30 职场文书
学雷锋标语
2014/06/25 职场文书
爱牙日活动总结
2014/08/29 职场文书
政风行风建设整改方案
2014/10/27 职场文书
学习党章的体会
2014/11/07 职场文书
《植树问题》教学反思
2016/03/03 职场文书