`

jquery 处理后退AJAX的问题

阅读更多
大家都知道在画面上用JS处理的内容,点E后退后,原先画面上的操作都没有了.
例如通过点一个BUTTON在画面的某一个位置添加某些内容(计算总件数等),然后去了下一个画面,当点IE的后退回来时这一些信息就没有了.
为了解决这个问题,可以参考下记办法.
首先,用history这个JS
jquery.history.js 内容参考下面

jQuery.extend({
historyCurrentHash: undefined,
i
historyCallback: undefined,

historyInit: function(callback){
jQuery.historyCallback = callback;
var current_hash = location.hash;

jQuery.historyCurrentHash = current_hash;
if ((jQuery.browser.msie) && (jQuery.browser.version <) {
// To stop the callback firing twice during initilization if no hash present
if (jQuery.historyCurrentHash == '') {
jQuery.historyCurrentHash = '#';
}

// add hidden iframe for IE
$("body").prepend('<iframe id="jQuery_history" style="display: none;"></iframe>');
var ihistory = $("#jQuery_history")[0];
var iframe = ihistory.contentWindow.document;
iframe.open();
iframe.close();
iframe.location.hash = current_hash;
}
else if ($.browser.safari) {
// etablish back/forward stacks
jQuery.historyBackStack = [];
jQuery.historyBackStack.length = history.length;
jQuery.historyForwardStack = [];

jQuery.isFirst = true;
}
jQuery.historyCallback(current_hash.replace(/^#/, ''));
setInterval(jQuery.historyCheck, 100);
},

historyAddHistory: function(hash) {
// This makes the looping function do something
jQuery.historyBackStack.push(hash);

jQuery.historyForwardStack.length = 0; // clear forwardStack (true click occured)
this.isFirst = true;
},

historyCheck: function(){
if ((jQuery.browser.msie) && (jQuery.browser.version <) {
// On IE, check for location.hash of iframe
var ihistory = $("#jQuery_history")[0];
var iframe = ihistory.contentDocument || ihistory.contentWindow.document;
var current_hash = iframe.location.hash;
if(current_hash != jQuery.historyCurrentHash) {

location.hash = current_hash;
jQuery.historyCurrentHash = current_hash;
jQuery.historyCallback(current_hash.replace(/^#/, ''));

}
} else if ($.browser.safari) {
if (!jQuery.dontCheck) {
var historyDelta = history.length - jQuery.historyBackStack.length;

if (historyDelta) { // back or forward button has been pushed
jQuery.isFirst = false;
if (historyDelta < 0) { // back button has been pushed
// move items to forward stack
for (var i = 0; i < Math.abs(historyDelta); i++) jQuery.historyForwardStack.unshift(jQuery.historyBackStack.pop());
} else { // forward button has been pushed
// move items to back stack
for (var i = 0; i < historyDelta; i++) jQuery.historyBackStack.push(jQuery.historyForwardStack.shift());
}
var cachedHash = jQuery.historyBackStack[jQuery.historyBackStack.length - 1];
if (cachedHash != undefined) {
jQuery.historyCurrentHash = location.hash;
jQuery.historyCallback(cachedHash);
}
} else if (jQuery.historyBackStack[jQuery.historyBackStack.length - 1] == undefined && !jQuery.isFirst) {
// back button has been pushed to beginning and URL already pointed to hash (e.g. a bookmark)
// document.URL doesn't change in Safari
if (document.URL.indexOf('#') >= 0) {
jQuery.historyCallback(document.URL.split('#')[1]);
} else {
var current_hash = location.hash;
jQuery.historyCallback('');
}
jQuery.isFirst = true;
}
}
} else {
// otherwise, check for location.hash
var current_hash = location.hash;
if(current_hash != jQuery.historyCurrentHash) {
jQuery.historyCurrentHash = current_hash;
jQuery.historyCallback(current_hash.replace(/^#/, ''));
}
}
},
historyLoad: function(hash){
var newhash;

if (jQuery.browser.safari) {
newhash = hash;
}
else {
newhash = '#' + hash;
location.hash = newhash;
}
jQuery.historyCurrentHash = newhash;

if ((jQuery.browser.msie) && (jQuery.browser.version <) {
var ihistory = $("#jQuery_history")[0];
var iframe = ihistory.contentWindow.document;
iframe.open();
iframe.close();
iframe.location.hash = newhash;
jQuery.historyCallback(hash);
}
else if (jQuery.browser.safari) {
jQuery.dontCheck = true;
// Manually keep track of the history values for Safari
this.historyAddHistory(hash);

// Wait a while before allowing checking so that Safari has time to update the "history" object
// correctly (otherwise the check loop would detect a false change in hash).
var fn = function() {jQuery.dontCheck = false;};
window.setTimeout(fn, 200);
jQuery.historyCallback(hash);
// N.B. "location.hash=" must be the last line of code for Safari as execution stops afterwards.
//      By explicitly using the "location.hash" command (instead of using a variable set to "location.hash") the
//      URL in the browser and the "history" object are both updated correctly.
location.hash = newhash;
}
else {
  jQuery.historyCallback(hash);
}
}
});


然后在画面上写上下记代码:
先在画面上加一个HIDDEN框,
然后进行下面的操作.
$(function(){

$.historyInit(pageload);
})

下记可以在ONSUMBIT的时候处理的方法
function setHistoryInfo(info1Id,info2Id) {
要保存的内容...(把JS处理的HTML保存的HIDDEN框中)

$.historyLoad(1);
}

当后退返回时要处理的内容.
function pageload(hash) {
if(hash) {
要处理的内容...(从HIDDEN框中取出以前保存的内容)
       })


分享到:
评论

相关推荐

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

    本文主要给大家介绍基于Jquery.history解决ajax的前进后退问题,涉及到jquery前进后退相关方面的知识,本文内容经典,非常具有参考价值,特此把jquery前进后退相关知识分享在脚本之家网站供大家参考

    对ajax前进后退的处理

    本文将深入探讨如何处理AJAX前进后退的问题,主要涉及`hash`技术的应用。 `hash`是URL中的井号(#)后面的部分,它在不重新加载整个页面的情况下可以改变,这对于实现AJAX应用的历史记录管理非常有用。浏览器会为每个...

    Ajax_JQuery笔记.rar

    jQuery是一个轻量级的JavaScript库,它简化了JavaScript的DOM操作、事件处理和Ajax交互。在HTML文档中引入jQuery库后,可以使用其提供的便捷API进行Ajax操作。 1. **$.ajax()函数**:这是jQuery中最常用的Ajax函数...

    jQueryMobile Ajax开发

    ### jQueryMobile Ajax开发知识点概述 #### 一、版本特性 1. **Push State 支持**:jQuery Mobile (JQM) 在此版本中加入了对 `history.pushState` 的支持,这是一个 HTML5 API,允许开发者在不刷新页面的情况下...

    jquery_history_demo

    "jquery_history_demo"这个示例正是为了解决这个问题,它展示了如何通过一个开源的jQuery插件来实现Ajax加载时对浏览器历史记录的支持,从而恢复前进和后退功能。 **jQuery和Ajax Load** jQuery是一个流行的...

    JS 获取链接(url)参数以及锚链接(anchor)结合富ajax的应用(ajax前进/后退的问题)

    总结一下,本文主要介绍了如何使用JavaScript获取URL参数、处理锚链接以及解决富Ajax应用中的前进/后退问题。在实际开发中,可以结合jQuery和相关的History插件,配合服务器端脚本来实现更高效和流畅的Web应用。

    基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题

    在网页开发中,使用Ajax进行异步数据交互可以提供流畅的用户体验,但随之而来的问题是,当用户点击浏览器的刷新、后退或前进按钮时,由于页面没有整体刷新,Ajax请求加载的内容不会重新显示,导致浏览器的历史记录和...

    AjAX异步页面处理技术

    3. **前进/后退按钮问题**:默认情况下,Ajax操作不会更新浏览器历史记录,影响用户导航。 **在"WebSite3"这个项目中,可能涉及到的Ajax应用场景包括:** 1. **动态搜索**:用户输入关键词时,实时从服务器获取匹配...

    如何让浏览器支持jquery ajax load 前进、后退功能

    本例将介绍如何在使用jQuery进行AJAX内容加载时,让浏览器的前进和后退按钮能够正常使用。 首先需要了解的是,在传统页面跳转中,浏览器会保存浏览历史记录,用户可以通过前进或后退按钮返回到先前访问的页面。当...

    ajax基本资料ajax基本资料ajax基本资料

    3. **安全问题**:如果处理不当,Ajax请求可能暴露敏感信息或被恶意利用。 4. **页面历史和前进后退**:Ajax请求更新的页面部分,不会改变URL,导致前进后退功能失效。 综上所述,Ajax是一种强大的网页开发技术,它...

    jquery实现地址联动

    总结来说,"jquery实现地址联动"是一个涉及jQuery选择器、事件处理、Ajax通信和DOM操作的综合应用。通过合理组织代码,我们可以构建出一个流畅、响应式的地址选择系统,提升用户在网页上的操作体验。

    《Ajax高级程序设计》(中文版1-6章 电子书+源码打包)

    - **jQuery库**:jQuery简化了Ajax操作,提供了一套方便的API,使得开发者可以更高效地处理Ajax请求。 - **jQuery的Ajax方法**:如`$.ajax()`, `$.get()`, `$.post()`等,以及它们的使用场景和参数配置。 6. **...

    Ajax学习资料 Ajax

    3. **前进/后退按钮**:如果处理不当,用户可能无法正确使用浏览器的历史记录功能。 在实际应用中,为了简化Ajax的开发,我们可以使用jQuery、axios、fetch等库或API。例如,jQuery的$.ajax()或$.getJSON()方法提供...

    ajax 学习Ajax 必备的帮助文档

    在IT行业中,Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的...在实际项目中,开发者需要充分理解Ajax的工作原理,合理利用其优势,并妥善处理可能出现的问题,以提升Web应用的质量和用户体验。

    不使用flash播放器,使用jquery播放flv视频.zip

    4. **JavaScript/AJAX**:用于控制视频播放,例如播放/暂停、前进/后退、进度条控制等,这些都是通过JavaScript和Ajax技术实现的。 5. **服务器端支持**:由于HTML5不直接支持FLV,可能需要服务器端脚本(如PHP、...

    jQuery与Ajax以及序列化

    •破坏浏览器前进和后退按钮的正常功能 •对搜索引擎的支持不足 •开发和调试工具的 缺乏 好吧,这些都是几年前的不足。技术的发展很快,这些不足也会慢慢弥补,起码现在调试Ajax并不难。 Ajax的核心是...

    ajax信息资料

    在提供的文档`jquery_ajax.doc`和`jquery_ajax2.doc`中,可能会详细讲解jQuery如何使用Ajax,包括设置请求头、超时、错误处理、全局事件等。这些文档可以帮助你更深入地理解和使用jQuery的Ajax功能。 **四、Ajax的...

    四种流行的AJAX框架jQuery_Mootools_Dojo_ExtJS的对比

    ### 四种流行的AJAX框架对比分析:jQuery, Mootools, Dojo, ExtJS #### 一、jQuery **主页**: &lt;http://jquery.com/&gt; **设计思想**: - **简洁性**: 几乎所有操作都始于选择DOM元素,并对其进行操作(支持Chaining...

Global site tag (gtag.js) - Google Analytics