ajax后退解决方案_AJAX相关

一、使用iframe,通过document.write产生历史

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>0</title>
</head>
<body>
<input type="button" value="加1" onclick="add()" />
<div id="info" style="border:red 1px solid;width:200px;padding:10px;margin:5px;">0</div>
</body>
</html>
<script src="history-0.1.js"></script>
<script>
var info = document.getElementById('info');
var i = 1;
function add() {
info.innerHTML = i;
document.title = i;
var data = {
param : i,
func : func
};
History.push(data);
i++;
}
History.push({param:0, func: func});
function func(i) {
info.innerHTML = i;
document.title = i;
}
</script>

点击按钮后更新页面DOM(模拟ajax提交),会发现浏览器后退按钮可用了。点击后退,可返回到前一个状态。
这种方式缺点是只支持IE和Firefox。
ajax后退解决方案(二)
二、使用iframe,通过修改iframe.src产生历史

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>0</title>
</head>
<body>
<input type="button" value="加1" onclick="add()" />
<div id="info" style="border:red 1px solid;width:200px;padding:10px;margin:5px;">0</div>
</body>
</html>
<script src="history-0.2.js"></script>
<script>
var info = document.getElementById('info');
var i = 1;
function add() {
info.innerHTML = i;
document.title = i;
var data = {
param : i,
func : func
};
History.push(data);
i++;
}
History.push({param:0, func: func});
function func(i) {
info.innerHTML = i;
document.title = i;
}
</script>

较上一篇多了个blank.html,是一个空html架子,没有JS逻辑代码,如下

复制代码 代码如下:

<!DOCTYPE HTML>
<html>
<head>
<title>blank.html</title>
</head>
<body>
</body>
</html>

每次ajax操作会往iframe.src的问号后附加一个数字以记录历史。点击后退按钮,iframe的onload事件中获取iframe的url,根据问号后的数字去取记录。
所有浏览器均支持该方式。缺点是如果主页面中存在其它iframe,且修改了其src。历史管理会混乱。
三、使用iframe,通过修改iframe.src产生历史,回调写在iframe对应的html页面中

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>0</title>
</head>
<body>
<input type="button" value="加1" onclick="add()" />
<div id="info" style="border:red 1px solid;width:200px;padding:10px;">0</div>
</body>
</html>
<script src="history-0.3.js"></script>
<script>
var info = document.getElementById('info');
var i = 1;
function add() {
var data = {
param : i,
func : func
};
History.push(data);
i++;
}
History.push({param:0, func: func});
function func(i) {
info.innerHTML = i;
document.title = i;
}
</script>

与方案2相同也是使用iframe.src来产生历史,也需要一个单独的html页面(iframe)。不同的是回调逻辑不是写在iframe.onload中,而直接写在html页面中(上一篇则是空的html架子)。blank.html如下

复制代码 代码如下:

<!DOCTYPE HTML>
<html>
<head>
<title>blank.html</title>
</head>
<body>
<script>
var url= location.href;
if(url.indexOf('?')>-1) {
var idx = url.substr(url.indexOf('?')+1);
parent.History.get(idx);
}
</script>
</body>
</html>

和方案2一样所有浏览器均支持。
四、通过修改location.hash产生历史,hashchange事件处理后退

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>0</title>
</head>
<body>
<input type="button" value="加1" onclick="add()" />
<div id="info" style="border:red 1px solid;width:200px;padding:10px;">0</div>
</body>
</html>
<script src="history-0.4.js"></script>
<script>
var info = document.getElementById('info');
var i = 1;
function add() {
var data = {
param : i,
func : func
};
History.push(data);
i++;
}
History.push({param:0, func: func});
function func(i) {
info.innerHTML = i;
document.title = i;
}
</script>

每次ajax操作去改变location.hash的值,每次修改后地址栏均会有所体现。在window.onhashchange中监听该事件。通过hash的值取对应的历史。
较iframe的好处是可以复制地址栏的url直接进入该历史记录,缺点是IE6/7不支持。
文中代码打包下载

相关:

http://msdn.microsoft.com/en-us/library/cc288209(v=vs.85).aspx

https://developer.mozilla.org/en/DOM/window.onhashchange

http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html

时间: 2024-12-24 21:06:13

ajax后退解决方案_AJAX相关的相关文章

ajax后退解决方案

一.使用iframe,通过document.write产生历史 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>0</title> </head> <body> <input type="button" value="加1" onclick="

Ajax实现文件下载_AJAX相关

JQuery的ajax函数的返回类型只有xml.text.json.html等类型,没有"流"类型,所以我们要实现ajax下载,不能够使用相应的ajax函数进行文件下载.但可以用js生成一个form,用这个form提交参数,并返回"流"类型的数据.在实现过程中,页面也没有进行刷新. 1. 使用ajax,ajax的返回值类型是json,text,html,xml类型,或者可以说ajax的发送,接受都只能是string字符串,不能流类型,所以无法实现文件下载,强用会出现

基于Jquery.history解决ajax的前进后退问题_AJAX相关

以下内容是关于Jquery.history解决ajax的前进后退问题,具体详情请看下文. 本文的前提是基于后台的,所以这里不会考虑seo的问题.同时,基于后台的管理系统,也不需要被收藏,所以也不会考虑刷新的这种类似直接敲网址的情况!!! 这里使用的是html5中的history.state 来解决. 网上已经有了js的开源解决方案pushState.详见pjax 但是这个方案不适合我的项目(后台项目),尤其是主要的方法有点不够用. 我使用的是  jquery.history.js  可以参考这个

ajax session过期问题的几个解决方案_AJAX相关

如处理不当会影响用户体验,也有可能产生莫名的问题. 结合自己的思考和网上相关内容的参考,给出如下解决方案.每个方案都有不同的优缺点,欢迎 大家指正. 方案1:检查AJAX返回的返回的内容是否有<html>标签 在web系统中,当session过期时,当用户有操作的时候,此时系统一般会返回登陆界面. 让用户重新输入用户名和密码.当session过期的时候,AJAX请求返回的内容应该是登陆界面的页面 内容(即登陆界面的页面的html代码).通过判断返回内容是否用<html>来判断ses

Ajax请求WebService跨域问题的解决方案_AJAX相关

1.背景 用Jquery中Ajax方式在asp.net开发环境中WebService接口的调用 2.出现的问题 原因分析:浏览器同源策略的影响(即JavaScript或Cookie只能访问同域下的内容); 3.解决方案: (1) JSONP:只支持GET方式 (2) CROS:跨域资源共享 以下为CROS解决方案: a.在WebService接口加上响应头信息: b.在web.config文件中加上相关配置节信息: 运用a或者b的解决方案后,浏览器头信息中变动如下: 最终问题得以较好的解决,但对

pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新_AJAX相关

使用Ajax可以异步获取数据,可以更高效地渲染页面. 但也存在这一些问题: 再刷新页面,页面就会变成初始的状态 浏览器的前进后退功能无效 对搜索引擎的爬虫抓取不友好 1. 早前会使用浏览器的 hash锚点 来解决 不同的hash标记着页面不同的部分,能修正页面刷新数据不正确的问题 再通过 onhashchange 事件监听hash锚点的变化,手动进行前进后退操作,浏览器支持度 2. 随后出现一种 hashbang 的技术,即在url后加上标记 #!/myPath 来解决上述的问题 通过一个路径定

关于Ajax请求中传输中文乱码问题的解决方案_AJAX相关

今天遇到一个问题,有关ajax 请求中传输中文,遇到乱码的问题. 如下代码: function UpdateFolderInfoByCustId(folderId, folderName, custId) { $.ajax({ type: "Post", contentType: "application/x-www-form-urlencoded; charset=utf-8", url: "http://localhost/CRM/Ashx/HandK

防止重复发送Ajax请求的解决方案_AJAX相关

在页面中有多个按钮,点击该按钮可以异步的去服务端读取数据,然后在前端将数据展示出来. 每个按钮点击请求的页面都是同一个,但是请求的参数不同,所以返回的内容就不同. 在连续点击多个按钮的时候就会发出多个异步请求.那么根据请求返回的快慢(因为不同按钮参数不同,返回内容不同,所以会有快慢之分),数据会依次的展示出来,那么就会出现一个先点击的按钮,由于他请求的数据量比较大,导致数据被后显示出来. 一.问题解决 解决这种问题有两种方式: 1.当连续进行多个请求,并且请求的url地址相同时.放弃前面的所有请

ajax获取数据中文乱码问题最简单的完美解决方案_AJAX相关

使用scriptCharset即可解决问题,用contentType就不一定可以了. 复制代码 代码如下: $.ajax({       url: testUrl,       dataType: 'jsonp',       type: 'post',       scriptCharset: 'utf-8'     }); 上面的解决方案是最完美的,另外也附上网上的解决方式吧,是用contentType来处理的 复制代码 代码如下: jQuery(form).ajaxSubmit({ url