如何让浏览器支持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 相关文章推荐
基于jquery的表头固定的若干方法
Jan 27 Javascript
gridpanel动态加载数据的实例代码
Jul 18 Javascript
JS获取各种浏览器窗口大小的方法
Jan 14 Javascript
对table和ul实现js分页示例分享
Feb 24 Javascript
javascript数字时钟示例分享
Apr 23 Javascript
利用fecha进行JS日期处理
Nov 21 Javascript
BootStrap modal实现拖拽功能
Dec 01 Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 Javascript
JavaScript JMap类定义与使用方法示例
Jan 22 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 Javascript
vue循环中点击选中再点击取消(单选)的实现
Sep 10 Javascript
vue自定义右键菜单之全局实现
Apr 09 Vue.js
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开发框架myqee新手快速入门教程
2014/07/14 PHP
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
基于Jquery的仿照flash放大图片效果代码
2011/03/16 Javascript
jquery validate在ie8下的bug解决方法
2013/11/13 Javascript
解析Javascript中中括号“[]”的多义性
2013/12/03 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
php析构函数的具体用法小结
2014/03/11 Javascript
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
理解JS绑定事件
2016/01/19 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
JS实现checkbox互斥(单选)功能示例
2019/05/04 Javascript
javascript前端和后台进行数据交互方法示例
2020/08/07 Javascript
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
Python 解析XML文件
2009/04/15 Python
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
对python3 Serial 串口助手的接收读取数据方法详解
2019/06/12 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
opencv python 图像轮廓/检测轮廓/绘制轮廓的方法
2019/07/03 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
浅谈react路由传参的几种方式
2021/03/23 Javascript
秋季运动会活动方案
2014/02/05 职场文书
文明寝室标语
2014/06/13 职场文书
推普标语口号大全
2015/12/26 职场文书
承诺书应该怎么写?
2019/09/10 职场文书