如何让浏览器支持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 相关文章推荐
父窗口获取弹出子窗口文本框的值
Jun 27 Javascript
使用JavaScript动态设置样式实现代码(2)
Jan 25 Javascript
js中的屏蔽的使用示例
Jul 30 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
Jan 15 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
Mar 09 Javascript
webpack配置的最佳实践分享
Apr 21 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 Javascript
vue 对axios get pust put delete封装的实例代码
Jan 05 Javascript
Vue如何循环提取对象数组中的值
Nov 18 Vue.js
在实例中重学JavaScript事件循环
Dec 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源码之explode使用说明
2011/08/05 PHP
php中echo()和print()、require()和include()等易混淆函数的区别
2012/02/22 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
cnblogs TagCloud基于jquery的实现代码
2010/06/11 Javascript
防止文件缓存的js代码
2013/01/10 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
jquery delay()介绍及使用指南
2014/09/02 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
jquery背景跟随鼠标滑动导航
2015/11/20 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
2017/01/03 Javascript
vue-cli构建项目使用 less的方法
2017/10/04 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
[08:40]Navi Vs Newbee
2018/06/07 DOTA
Python实现模拟登录及表单提交的方法
2015/07/25 Python
Python爬虫利用cookie实现模拟登陆实例详解
2017/01/12 Python
Python中装饰器学习总结
2018/02/10 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
django rest framework 过滤时间操作
2020/07/12 Python
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
廉价航班、机票和酒店:JustFly
2018/02/07 全球购物
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
写求职信要注意什么问题
2014/04/12 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
python可视化大屏库big_screen示例详解
2021/11/23 Python