ajax 浏览器后退,全站Ajax浏览器后退方法

全站Ajax后退有两种方法,浏览器后退按钮加入历史链接。其中一种是常规的Ajax后退,这种后退是带有ajax效果的,要重新请求历史链接页面。另一种是将历史数据保存,后退时取出缓存的数据即可。后者比前者效率要高,所以速度也快,就跟平常无ajax的页面后退一样。

下面就是介绍这种方法,与此同时我们还要解决Chrome浏览器首次载入网站时出现的AJAX效果重载(reload)的现象。

我们需要两个函数,以及对其中一个函数进行全局变量初始化,要添加进入js的主要代码如下:

// 初始化载入-全局变量

$(document).ready(function(){

bind_popstate_once(); // 页面载入初始一次(解决Chrome首次载入出现ajax效果的问题)

});

//函数:更新浏览器历史缓存(用于浏览器后退)

function update_page_historyState(){

history.replaceState( // 刷新历史点保存的数据,给state填入正确的内容

{    url: window.document.location.href,

title: window.document.title,

html: $('#left').prop('outerHTML'), // 抓取主体部分outerHTML用于呈现新的主体。也可以用这句 html: $(document).find('#left').html()

}, window.document.title, document.location.href);

}

//函数:页面载入初始一次,解决Chrome浏览器初始载入时产生ajax效果的问题

function bind_popstate_once(){

window.addEventListener( 'popstate', function( e ){  //监听浏览器后退事件

if( e.state ){

document.title = e.state.title;

$('#left').html( e.state.html ); //也可以用replaceWith ,最后这个html就是上面替换State后里面的html值

$.featureList($("#sl-posts li a"),$("#output li"), {start_item:0});// 重载幻灯片-1

//返回锚点(顶部)

//var anchor = location.hash.indexOf('#'); // 用indexOf检查location.href中是否含有'#'号,如果没有则返回值为-1

//if (anchor == -1) { // 若不含#号

//    body_am(0); // 直接返回顶部

//} else {

//    anchor = window.location.hash.substring(anchor + 1);

//    body_am(anchor);

//}

}

});

}

接下来是ajax事件内success: function(data){ ... }内利用到html5的API —— pushState提交链接到历史中,一般添加到success的最后:

if (msg != 'back' && msg != 'comment') { //  不为后退 也 不为评论回复时

var state = { // 设置state参数

url: paraUrl,

title: $(data).filter("title").text(),

html: $(data).find("#left").html(),

};

// 将当前url和历史url添加到浏览器当中,用于后退。里面三个值分别是: state, title, url

window.history.pushState(state, $(data).filter("title").text(), historyUrl);

}

(若少了这个或window.history.pushState的三个值有误,有可能无法后退或无法前进)

上面是两个函数,update_page_historyState()函数用在ajax加载时,因为它是更新历史页面缓存的,要放在pushState事件之前,这样也可以加入 beforesend 里面。 以上基本上就全部OK了,当然,返回顶部事件随个人喜好加,上面注释位置里已经有返回锚点了。

2014-10-14补充:值得注意的是,如果#left里面加载有其他js的插件效果,比如幻灯片,那么就需要在bind_popstate_once()函数里面重载一遍,和ajax的重载一个道理。

2014-10-15补充:点击侧栏的评论切换页面后发现点击其他链接时地址栏不会变,只有页面改变,这是由于返回锚点函数引起的,检查链接中带有#号的问题,将返回锚点放在complete里面即可,也就是window.history.pushState的后面。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/365027.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java基础day11---空指针异常----引用类型--自定义类型赋值--封装

day111.空指针异常-----属于运行错误-java.long.NullPointerException--原因:当引用名称的值为null时,就不能访问某个对象中的属性或方法热锅非要访问这就出现空指针异常--解决办法:在访问某个对象中的属性或方法之前必须保证该引用名称中存放…

CentOS 7下安装Python3.6

•安装python3.6可能使用的依赖 yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sqlite-devel •到python官网找到下载路径, 用wget下载 wget https://www.python.org/ftp/python/3.6.4/Python-3.6.4.tgz •解压tgz包 tar -zxvf Python-3.6.4.t…

非常酷!10个基于 HTML5 的字体应用演示网站

HTML5 是现在Web开发领域的热点,更多的开发人员开始使用HTML5来开发交互性强、效果出众的网站和各种应用。这是 HTML5 网站大观系列第四篇,本文与大家分享5个非常酷的基于 HTML5 的字体应用演示网站,一起欣赏。 Web Typography For The Lone…

ntp如何确认与服务器偏差_LED电子时钟显示屏如何实现时间同步统一校时?

LED电子时钟显示屏采用一体式铝合金边框设计,更坚固美观节能环保,更以其简单的操作和稳定的性能,广泛应用于学校、考场、医院、金融、移动通信、石油、电力、交通、工业以及国防等同步时钟系统的显示终端,LED电子时钟显示屏已成为…

jquery ajax下拉联动,基于jQuery Ajax实现下拉框无刷新联动

本文实例为大家分享了jQuery Ajax实现下拉框无刷新联动的具体代码,供大家参考,具体内容如下HTML代码:{Layout null;}using DAL;using System.Data;{AreaDal areaDal new AreaDal();string areaId ViewBag.areaId;DataRow drArea areaDal.…

Java 8新闻

Java 8, b128和Java 8 RC2的第一个候选版本于2月出现,修复了新Comparator API中的一个严重缺陷,该缺陷中其新的thenComparing()方法具有不必要的类型限制。 java.util.Comparator的thenComparing()方法不需要类型U扩展java.lang.Comparable &…

HDP 2.6 requires libtirpc-devel

HDP 2.6 requires libtirpc-devel 个问题,截止 Mustafa Kemal MAYUK 2017年06月30日 06:30 hadoopPowerSystemsHello, I am trying to install HDP 2.6 on RHEL 7.2 ppc64le. Installation over ambari fails due to "Error: Package: hadoop_2_6_0_3_8-hdfs-2…

推荐10款非常有用的 Ajax 插件

这篇文章与大家分享的是10款非常有用的 Ajax 插件,有用于图片的,用于分页的,还有用于导航的。这些作者的想法特别新颖,希望你能从中找到自己需要的插件。 1. AJAX-ZOOM 非常强大的一款插件,可用鼠标滚轮进行缩放&…

luogu P1083 借教室

传送门 小水题吧 二分能处理到的询问即可 用差分维护前x个订单之后的值 最后求一遍前缀和 如果爆负就是有不满足的 复杂度O((mn)lgm) 或者区间加和区间最小值线段树也行(常数略大) Code:(线段树) 1 #include<cstdio>2 #include<cstring>3 #include<cmath>4 #…

svgaps绘制时不能用中文命名吗_设计师需要了解的切图命名规范

2020年8月21日下午4点50分 黄河公园通常我们在界面设计完成之后要切图给到前端开发。初做UI设计时&#xff0c;把重点都放在设计效果图上&#xff0c;对之后的切图命名规范没有很注重。当时我会有一些疑惑&#xff0c;切图命名的原则是什么&#xff1f;直接命名为能表达清楚的名…

hdu-1728(贪心bfs的灵活运用吧)

链接 [https://vjudge.net/contest/256476#problem/D] 题意 给定一个m n (m行, n列)的迷宫&#xff0c;迷宫中有两个位置&#xff0c;gloria想从迷宫的一个位置走到另外一个位置&#xff0c;当然迷宫中有些地方是空地&#xff0c;gloria可以穿越&#xff0c;有些地方是障碍&am…

jquery ajax.then,jQuery动态AJAX Promise链

小编典典解决方案使用for&#xff1a;var array [One, Two, Three];var id array[0];var data getData(id);for (var i 1; i < array.length; i) {// Or only the last "i" will be used(function (i) {data data.then(function() {return getData(array[i])…

分享20个漂亮的DIV CSS标准化站点案例

看到有些网站的代码十分优雅&#xff0c;心想自己什么时候也能写出这么好的代码。其实&#xff0c;这不是一朝一夕能达到的&#xff0c;需要的实践中不断锤炼和提高。我们可以通过分析别人写得好的网页代码来更加快速的提高自己&#xff0c;下面向大家推荐20个基于DIV CSS标准布…

在单独的WAR组件中对SPA资源和API实现进行分区

单页应用程序正Swift吸引人们的注意力&#xff0c;以实现基于Web的丰富&#xff0c;健壮和移动友好的应用程序。 本质上&#xff0c;这需要改变应用程序体系结构&#xff0c;其中整个应用程序用户界面是使用JavaScript来实现的&#xff0c;而服务器端代码则为服务器端应用程序逻…

Centos7中安装多版本dotnet core sdk

新开发的项目使用了新的2.1.3由于sdk不兼容之前的2.0版本&#xff0c;所以需要安装两个版本的sdk&#xff0c;参考链接&#xff1a;https://ken.io/note/centos7-.netcore-multi-version-install&#xff0c;对Linux安装还是理解不够到位&#xff0c;这次就明白点了&#xff0c…

上传文件显示进度条_【技巧 】iOSamp;Windows互传文件?透过「文件」轻松解决~...

苹果家的隔空投送能做到手机、电脑间的无缝衔接&#xff1b;在iOS13的「文件」中加入了局域网的文件共享功能&#xff0c;电脑不需要安装任何软件&#xff0c;实现 iPhone 与 Windows 电脑间文件的共享、传输。注意&#xff1a;本文介绍的是基于局域网&#xff08;同一路由器&a…

HTTP简介

详细URL: http://www.cnblogs.com/ranyonsue/p/5984001.html 主要特点 1、简单快速&#xff1a;客户向服务器请求服务时&#xff0c;只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单&#xff0c;使得H…

在Window上使用Jenkins自动部署和上传快照Java工件

这篇文章将展示如何使用Jenkins Continuous Integration自动执行Java Web应用程序&#xff08;使用MYSQL DB和基于Hibernate ORM在基于REST的Jersey2 Spring环境中开发的学生申请应用程序&#xff09;的部署过程-生成项目&#xff0c;运行单元测试&#xff0c;上传构建的工件到…

10个在线Web设计开发工具介绍

1. 在线文本生成器 BlindTextGenerator&#xff1a;对设计师来说&#xff0c;这是一个简单又好用的文本生成小工具。内含许多种字体&#xff0c;可设置字符的大小&#xff0c;数量&#xff0c;样式&#xff0c;段落的数量及对齐方式等&#xff0c;还可以很方便且精确地调节文本…

获取clientheight为0_用10行python代码获取全国城市交通生活圈

今天在网上冲浪看到一个很花哨的数据&#xff0c;全国各城市主要商圈从早上6点到晚上10点的20min&#xff0c;30min,45min,60min,90min生活圈轮廓。1 获取思路按下F12按下F12&#xff0c;点击淮海路可以看到出现一个网站&#xff0c;他就是我们要找的接口接口内容是通过get请求…