让浏览器支持 jquery ajax load 前进、后退 功能
BEGIN;
一般在做 ajax load 的时候,非常多人都不会考虑到须要浏览器支持前进后退功能,由于大部分人都不知道能够实现。
近期遇到这个问题,经过一小段研究,发现github已经有现成的开源工具使用,主要实现原理是利用html的锚点。即<a href="#xxx">。详情可查看https://github.com/balupton/jquery-history/tree/master
主要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值。
运行顺序:先运行特殊操作,再运行共用操作。
具体的源代码下载地址例如以下:
csdn资源下载地址:http://download.csdn.net/detail/cyzshenzhen/7487091
Git@OSC源代码托管地址:http://git.oschina.net/cyzshenzhen/jquery_history_demo
END;
让浏览器支持 jquery ajax load 前进、后退 功能的更多相关文章
- 让python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE等请求
这两天在用python的bottle框架开发后台管理系统,接口约定使用RESTful风格请求,前端使用jquery ajax与接口进行交互,使用POST与GET请求时都正常,而Request Meth ...
- jQuery ajax Load关闭缓存的方法
[导读] 在jQuery ajax Load关闭缓存的方法很简单,我们只要在$ ajaxSetup中把cache: false就楞以了,当然我们还可以使用一个随机参数来实例了.简单介绍load(url ...
- jQuery Ajax(load,post,get,ajax)
1.load(url, [data], [callback]) 载入远程 HTML 文件代码并插入至 DOM 中. 默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式.jQuery ...
- 让python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE等请求(新方法)
通过上篇博文的方法处理后,进入代码调试后发现ajax获取不了服务器端返回的数据,度娘后发现原来AJAX的OPTIONS请求方式是状态类型查询,即向服务器提交信息后不返回任何信息,只将执行状态(200状 ...
- jQuery Ajax(load,post,get,ajax)用法与详解
今天看到群里面有网友们问到Jquery Ajax的(load,post,get,ajax)之间的区别,现在整理了一篇文章出来,希望可以帮到网友们,首先我们先来看一些简单的方法, 这些方法都是对jQue ...
- jQuery – AJAX load() 方法
jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selector). ...
- 360chrome,google chrome浏览器使用jquery.ajax加载本地html文件
使用360chrome和google chrome浏览器加载本地html文件时,会报错,提示: XMLHttpRequest cannot load file:///Y:/jswg/code/html ...
- jquery ajax load
jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selector). ...
- jQuery AJAX load() 方法
jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selector). ...
随机推荐
- 【deep learning学习笔记】注释yusugomori的LR代码 --- LogisticRegression.cpp
模型实现代码,关键是train函数和predict函数,都很容易. #include <iostream> #include <string> #include <mat ...
- <摘录>详谈高性能TCP服务器的开发
对于开发一款高性能服务器程序,广大服务器开发人员在一直为之奋斗和努力.其中一个影响服务器的重要瓶颈就是服务器的网络处理模块.如果一款服务器程序不能及时的处理用户的数据.则服务器的上层业务逻辑再高效也是 ...
- [置顶] 关于redhat系统yum源的配置2
(二)配置yum源(官方) 1.在终端输入以下命令(RHEL6/CentOS6) wget http://lug.ustc.edu.cn/wiki/_export/code/mirrors/help/ ...
- MySQL 通配符学习总结
MySQL 通配符 SQL您同意使用模式匹配"_"无论单个字符相匹配,和"%"匹配随意数目字符(包含零个字符). 在 MySQL中.SQL的模式缺省是忽略大写和 ...
- 14.3.2.3 Consistent Nonlocking Reads 一致性非锁定读
14.3.2.3 Consistent Nonlocking Reads 一致性非锁定读 一致性读 意味着 InnoDB 使用多版本来保护查询一个数据库在当前时间点的快照. 查询看到被事务做出的修改, ...
- copy算法
copy------强化效率无所不用其极 copy(first,last,result)算法可将输入区间[first,last)内的元素拷贝到输出区间[result,result+(last-f ...
- jQuery EasyUI API 中文文档 - 布局(Layout)
<html> <head> <script src="jquery-easyui/jquery.min.js"></script> ...
- Graphviz 绘制流程图
凝视说明非常具体.不再详述. digraph G{ //dot 是一种画图语言,它能够方便你採用图形的方式高速.直观地表达一些想法, //比方描写叙述某个问题的解决方式,构思一个程序的流程,澄清一堆貌 ...
- UIImagePickerController本地化控件文字
在使用UIImagePickerController时候,你会发如今选择照片或者拍照的时候,界面的很多控件都是英文的,比方"Cancel","Choose"等. ...
- 在gem5的full system下运行 alpha编译的测试程序 running gem5 on ubuntu in full system mode in alpha
背景 先需要在full system下运行gem5,通过网上查找资料以及向别人请教,终于成功运行,网上大多是关于alpha指令集的,且都是英文的,为了方便大家学习,现在总结一下,希望对大家有所帮助. ...