实现目标

  1. 页面的跳转(前进后退,点击等)不重新请求页面
  2. 页面URL与页面展现内容一致(符合人们对传统网页的认识)
  3. 在不支持的浏览器下降级成传统网页的方式

使用到的API

history.state

当前URL下对应的状态信息。如果当前URL不是通过pushState或者replaceState产生的,那么history.state是null。

history.pushState(state, title, url)

将当前URL和history.state加入到history中,并用新的state和URL替换当前。不会造成页面刷新。

state:与要跳转到的URL对应的状态信息。

title:不知道干啥用,传空字符串就行了。

url:要跳转到的URL地址,不能跨域。

history.replaceState

用新的state和URL替换当前。不会造成页面刷新。

state:与要跳转到的URL对应的状态信息。

title:不知道干啥用,传空字符串就行了。

url:要跳转到的URL地址,不能跨域。

window.onpopstate

history.go和history.back(包括用户按浏览器历史前进后退按钮)触发,并且页面无刷的时候(由于使用pushState修改了history)会触发popstate事件,事件发生时浏览器会从history中取出URL和对应的state对象替换当前的URL和history.state。通过event.state也可以获取history.state。

支持性判断

if ('pushState' in history) {...}

实现思路

用户通过“点击触发”,“操作历史”,“直接访问URL”的方式修改当前URL。这三种触发方式会使浏览器做出不同的行为。如果页面做无刷跳转,那么页面具体显示什么内容需要js来控制,js则需要根据一些信息来知道当前应该显示什么内容,这个信息就是history.state。这样我们只要保持URL和history.state一一对应,就能保证URL和内容一一对应。大部分情况下URL和history.state都是一一对应的,但通过直接URL访问页面的方式进入页面,history.state是null,所以我们需要把URL转换成对应的history.state写入。我们不能直接写入history.state,需要通过replaceState的方式写入。对于不支持pushstate的浏览器,一律修改href跳转页面,等同于直接访问URL。示意图如下。 

异步刷新页面的前进与后退的实现--pushState replaceState的更多相关文章

  1. Python+Selenium自动化-设置浏览器大小、刷新页面、前进和后退

    Python+Selenium自动化-设置浏览器大小.刷新页面.前进和后退   1.设置浏览器大小 maximize_window():设置浏览器大小为全屏 set_window_size(500,5 ...

  2. Ajax异步刷新地址栏url改变(利用Html5 history.pushState实现)

    早些时候在博客园参阅了不少资料,然后决定入驻博客园分享自己的开发心得,最近准备转方向筹备着辞职交接工作,所以有点忙碌,搁置了一个月才匆匆写下这么一篇随笔,希望能给大家带来一点帮助吧,资料和学识有限,如 ...

  3. 利用 html的锚点(元素a)功能实现ajax单页面应用的浏览器后退前进功能

    一.问题 随着AJax技术的普及,单页面web程序的应用越来越广泛. 所谓单页面应用程序,简单的说,就是应用只有一个主网页,第一次加载后,后续页面只会利用js和ajax到服务器获取数据进行页面的局部刷 ...

  4. Ajax+setInterval定时异步刷新页面

    这个是之前一个项目中用到的功能,现在记录一下他的使用步骤. 现在讲解一下具体的关键代码: 1.   window.onload:是指等待页面html和css都执行完毕以后才开始执行js文件,因为我这个 ...

  5. WPF 异步刷新页面,创建定时器

    #region 异步,刷新页面 /// <summary> /// 页面加载事件 /// </summary> /// <param name="sender& ...

  6. [JavaScript] iframe更改了src后,父页面history.back只能后退iframe而不能使自己后退解决办法

    浏览器的机制如此,在iframe导航变化后手动点击浏览器的后退按钮也依然只是后退iframe中的导航. 有一种解决方案是不要修改iframe.src,而是删除旧iframe元素,新建一个iframe元 ...

  7. vue 异步刷新页面,

    入口文件vue.app中 <div id="app"> <router-view v-if="isRouterAlive" /> < ...

  8. js异步刷新局部页面

    真不想说博客园的Markdown编辑器,我发表到我的个人博客上多好看的一篇文章,发到博客园上格式就成这个鸟样了,哎,不发现到博客首页了,就个人存个档吧 最近在做一个异步刷新页面中的局部,这样做可以防出 ...

  9. vue 移动端禁止浏览器后退,禁止安卓和ios点击后退操作乱跳页面

    开发微信公众号网页,页面登录成功之后,是禁止再次返回到登录页. 我在页面设置了让禁止跳到登录页,可是在手机上有自带的微信浏览器后退按钮,所以必须要禁止浏览器后退,才能禁止后退到登录页. 刚开始百度,查 ...

随机推荐

  1. Android开发和Android Studio使用教程

    Android studio安装和简单介绍http://www.jianshu.com/p/36cfa1614d23 是时候把Android 项目切换到Android Studio http://ww ...

  2. mongodb中批量将时间戳转变通用日期格式

    1,官网提供的mongodb遍历脚本: 官方文档地址:https://docs.mongodb.org/manual/tutorial/remove-documents/ >var arr = ...

  3. 《TomCat与Java Web开发技术详解》(第二版) 第六章节对应CD附带的helloapp无法启动的问题解决

    首先记录一下如何解决此章节CD中附带的helloapp无法启动的问题 我用的tomcat版本是:7.0.47:为了便于控制,针对此章节的helloapp,我在tomcat/conf/Catalina/ ...

  4. UFLDL深度学习笔记 (五)自编码线性解码器

    UFLDL深度学习笔记 (五)自编码线性解码器 1. 基本问题 在第一篇 UFLDL深度学习笔记 (一)基本知识与稀疏自编码中讨论了激活函数为\(sigmoid\)函数的系数自编码网络,本文要讨论&q ...

  5. 在mac上独立安装PHP环境

    1.http://dditblog.com/blog_418.html 2.http://www.jianshu.com/p/0456dd3cc78b

  6. 【logback】认识logback

    一. Reference:http://www.cnblogs.com/yongze103/archive/2012/05/05/2484753.html 1. Logback为取代log4j而生,l ...

  7. 第12条:不要在for和while循环后面写else块

    核心知识点: (1)一般的if/else是前面不执行,后面才执行,循环下面的else是前面执行完后面才会执行,如果是break打断也不会执行.循环为空或False也不执行. (2)try/expect ...

  8. Android SDK上手指南 2:用户界面设计

    http://mobile.51cto.com/ahot-419184.htm 内容简介 我们将为应用程序项目添加布局方案,在这方面XML与Eclipse ADT接口将成为工作中的得力助手——不过在后 ...

  9. linux操作系统使用中的一些总结

    VIM常用命令 gg   //到第一行 (N)G   //到第n行(N为整数) G    //到最后一行 0    //到行头 $  //到行尾 (N)dd  //删除N行,并将内容保存到粘贴板 p ...

  10. hbase shell-namespace(命名空间指令)

    hbase shell命名空间namespace篇: 1. alter_namespace (一般用于添加删除一个属性,很少使用) hbase(main)::> help 'alter_name ...