文档章节

history pushState 实现浏览器前进与后退

 永不停息的小河
发布于 2016/04/09 16:11
字数 709
阅读 120
收藏 0

今天做了个界面需要用到ajax进行页面跳转,当然使用ajax进行页面跳转有它的优点,比如降低服务器压力,缩短用户等待时间等,但是一个很明显的缺点就是浏览器的前进和后退按钮失效了,好在HTML5的history对象的出现比较好的解决了这个问题,所以去网上找一些pushState使用的文章,但是大多数都是只讲原理没有实现的实例,理解起来还是不太容易的。现在将我理解的一些内容说一下,不对的地方欢迎大家指出。

首先讲一下API:

     方法有两个history.pushState()和history.replaceState()

     事件有一个window.onpopstate

       pushState()方法,接收三个参数

       a state object, a title (which is currentlyignored), and (optionally) a URL

       state对象保存的是被pushState页面的信息的一个拷贝,也就是说以后你要用到的信息,都可以放到这个对象中。

       url是可选的,负责改变浏览器的地址栏中显示的url,如果没有指定url,你点击前进后退按钮页面还是会变化,只是浏览器的地址栏上显示的url会一直保持不变。

      replaceState()方法,与pushState方法相同,主要用于改变当前历史记录中记录的当前页面的state对象和url信息。

     onpopstate事件,每次点击浏览器的前进和后退按钮,就会触发window的Onpopstate事件。

      最后使用history.state获取当前所在页面的state对象,也就是在上面pushState中保存的。

 下面以一个例子具体说明。

         首先,我们一般做一个网站,刚进去的首页是没有pathname的,为了让浏览器能够后退到首页,我们对首页的url进行拦截,即改变首页的url。这里面history.replaceState只是改变网页的url地址,不会改变网页内容。这里面的state保存的是你要在将来获取到的任何信息。

var url = “blog/index.html”;
var state = {
        url:url
   }
history.replaceState(state,””,"blog/index.html");

       接下来,当调用ajax使页面内容发送变化之后,我们将这个变化的页面状态保存起来,如

 var url = “blog/index.html”;
 var state = {
        url:url
   }
 window.history.pushState(state,"",url);

      最后,给window添加监听,当popstate被触发之后,我们通过history.state获取到达页面的信息,通过.操作符获取该页面的信息,如我这里保存了该页面的url,就通过history.state.url获取,然后通过这个url加载页面。

window.addEventListener("popstate",function() {
    var currentUrl = history.state.url;
       $(".container").load(currentUrl +" #container");                                              });

   通过以上代码,即可实现使用ajax时浏览器前进后退按钮的功能。


© 著作权归作者所有

粉丝 0
博文 6
码字总数 3461
作品 0
沈阳
私信 提问
Vue 单页应用(spa)前端路由实现原理

一文搞懂单页应用原理Vue项目History模式路由机制 源码分析VueVueRouter Vue 单页应用(spa)前端路由实现原理 写在前面:通常 SPA 中前端路由有2种实现方式: window.history location.hash...

前端攻城小牛
2018/12/10
0
0
「前端」History API与浏览器历史堆栈管理

本文由尚妆前端开发工程师欲休撰写 本文发表于尚妆博客,欢迎订阅! 移动端开发在某些场景中有着特殊需求,如为了提高用户体验和加快响应速度,常常在部分工程采用SPA架构。传统的单页应用基...

尚妆产品技术刊读
2017/03/01
0
0
手摸手教你自己动手实现一个前端路由

前言 用过现代前端框架的同学,对前端路由一定不陌生, vue, react, angular 都有自己的 router, 那么你对 router 的工作原理了解吗? 如果还不了解, 那么请跟我一起来手写一个简单的前端路由...

Noahlam
2018/07/09
0
0
使用pushState实现微信“返回”按钮控制单页应用页面的无刷新跳转

相信很多微信开发者都会遇到过这样的问题:为了提高用户体验,把多个页面内容放在一个HTML页面进行展示,通过display属性以及transition动画来实现页面的跳转动画,但是点击微信顶部的“返回...

Simon_ITer
2016/10/17
5.2K
7
vue-router 源码:前端路由

前言 在学习 vue-router 的代码之前,先来简单了解一下前端路由。 前端路由主要有两种实现方法: Hash 路由 History 路由 先来看看这两种方法的实现原理。 接着我们将用它们来简单实现一个自...

cobish
2018/06/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
今天
4
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
今天
6
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
今天
4
0
Python机器学习之数据探索可视化库yellowbrick

背景介绍 从学sklearn时,除了算法的坎要过,还得学习matplotlib可视化,对我的实践应用而言,可视化更重要一些,然而matplotlib的易用性和美观性确实不敢恭维。陆续使用过plotly、seaborn,...

yeayee
今天
8
0
重读《学习JavaScript数据结构与算法-第三版》- 第5章 队列

定场诗 马瘦毛长蹄子肥,儿子偷爹不算贼,瞎大爷娶个瞎大奶奶,老两口过了多半辈,谁也没看见谁! 前言 本章为重读《学习JavaScript数据结构与算法-第三版》的系列文章,主要讲述队列数据结...

胡哥有话说
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部