让浏览器支持 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). ...
随机推荐
- [黑马程序员] I/O
---------------------- ASP.Net+Android+IO开发..Net培训.期待与您交流! ---------------------- 0. IO流概述: Java对数据的 ...
- 怎样使用jsp实现header和footer与网页内容的分离
好多显示层框架都自带这样的功能JSF,Wicket,页面布局取决于项目使用的显示层框架. 前台即客户端的布局,通常用在无需跳转的页面.比如同样是用户管理页面,增删改查的操作都希望停留在同一个页面.这时 ...
- System.getProperty("catalina.home")
System.getProperty("catalina.base"),服务器配置目录
- Mac与Window之间的共享文件
Mac访问Window: Finder 菜单 “前往” ,然后“连接服务器”,在服务器地址输入 smb://windows主机名或ip地址/共享名(前提window已设置共享文件) Windows访问 ...
- css js 优化工具
我知道国内很多网页制作人员都还在制作table式网页,这样的网页打开速度很慢.如果要想网站打开速度快,就要学会使用DIV+CSS,将图片写进CSS,这样如果网站内容很多的时候,也不会影响网页的浏览.它 ...
- jsp 中对jar 包的引用
<%@ page language="java" import="你需要的带包名的类" pageEncoding="gb2312"%& ...
- 第二章排错的工具:调试器Windbg(下)
感谢博主 http://book.51cto.com/art/200711/59874.htm 2.2 读懂机器的语言:汇编,CPU执行指令的最小单元2.2.1 需要用汇编来排错的常见情况 汇编是 ...
- JavaScript之面向对象1
学习过Java程序的开发人员都知道面向对象是怎么回事. 面向对象无非就是封装.多态.继承 比如: 声明一个类: class Person{ //私有成员 private String name; pr ...
- Linux Shell 之 我的第一个Shell程序
这里我首先会介绍一个Shell是什么,再介绍我的第一个Shell程序和从中总结的经验. 一.Shell是什么 在说我的这个Shell程序之前,还是先跟大家说说什么是Shell吧,相信Shell这个 ...
- Pyocr 0.2 发布,Python 的 OCR 库 - 开源中国社区
Pyocr 0.2 发布,Python 的 OCR 库 - 开源中国社区 Pyocr 0.2 发布,Python 的 OCR 库