异步刷新页面的前进与后退的实现--pushState replaceState
实现目标
- 页面的跳转(前进后退,点击等)不重新请求页面
- 页面URL与页面展现内容一致(符合人们对传统网页的认识)
- 在不支持的浏览器下降级成传统网页的方式
使用到的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的更多相关文章
- Python+Selenium自动化-设置浏览器大小、刷新页面、前进和后退
Python+Selenium自动化-设置浏览器大小.刷新页面.前进和后退 1.设置浏览器大小 maximize_window():设置浏览器大小为全屏 set_window_size(500,5 ...
- Ajax异步刷新地址栏url改变(利用Html5 history.pushState实现)
早些时候在博客园参阅了不少资料,然后决定入驻博客园分享自己的开发心得,最近准备转方向筹备着辞职交接工作,所以有点忙碌,搁置了一个月才匆匆写下这么一篇随笔,希望能给大家带来一点帮助吧,资料和学识有限,如 ...
- 利用 html的锚点(元素a)功能实现ajax单页面应用的浏览器后退前进功能
一.问题 随着AJax技术的普及,单页面web程序的应用越来越广泛. 所谓单页面应用程序,简单的说,就是应用只有一个主网页,第一次加载后,后续页面只会利用js和ajax到服务器获取数据进行页面的局部刷 ...
- Ajax+setInterval定时异步刷新页面
这个是之前一个项目中用到的功能,现在记录一下他的使用步骤. 现在讲解一下具体的关键代码: 1. window.onload:是指等待页面html和css都执行完毕以后才开始执行js文件,因为我这个 ...
- WPF 异步刷新页面,创建定时器
#region 异步,刷新页面 /// <summary> /// 页面加载事件 /// </summary> /// <param name="sender& ...
- [JavaScript] iframe更改了src后,父页面history.back只能后退iframe而不能使自己后退解决办法
浏览器的机制如此,在iframe导航变化后手动点击浏览器的后退按钮也依然只是后退iframe中的导航. 有一种解决方案是不要修改iframe.src,而是删除旧iframe元素,新建一个iframe元 ...
- vue 异步刷新页面,
入口文件vue.app中 <div id="app"> <router-view v-if="isRouterAlive" /> < ...
- js异步刷新局部页面
真不想说博客园的Markdown编辑器,我发表到我的个人博客上多好看的一篇文章,发到博客园上格式就成这个鸟样了,哎,不发现到博客首页了,就个人存个档吧 最近在做一个异步刷新页面中的局部,这样做可以防出 ...
- vue 移动端禁止浏览器后退,禁止安卓和ios点击后退操作乱跳页面
开发微信公众号网页,页面登录成功之后,是禁止再次返回到登录页. 我在页面设置了让禁止跳到登录页,可是在手机上有自带的微信浏览器后退按钮,所以必须要禁止浏览器后退,才能禁止后退到登录页. 刚开始百度,查 ...
随机推荐
- java心跳发送
java心跳发送: 大家都知道.如果你在互联网公司,并且开发的是产品那你一定接触不到.心跳机制.心跳包 那什么是心跳机制呢? 心跳机制就是定时发送一个自定义的结构体(心跳包).确保连接的有效的机制. ...
- Android Studio中常用设置
参考资料: 1.http://blog.csdn.net/itdada/article/details/43375893 常用设置: 1.Tab不用4个空格Code Style->Java-&g ...
- YUM安装(卸载)KDE和GNOME
YUM安装(卸载)KDE和GNOME显示系统已经安装的组件,和可以安装的组件:#yum grouplist 如果系统安装之初采用最小化安装,没有安装xwindow,那么先安装:#yum groupin ...
- 在Linux下搭建Git服务器步骤
环境: 服务器 CentOS6.6 + git(version 1.7.1) 客户端 Windows10 + git(version 2.8.4.windows.1) ① 安装 Git Linux ...
- requestFullscreen实现全屏展示
requestFullscreen实现全屏展示. var fullContainer = document.getElementById('fullScreenContainer'); //先把元素展 ...
- iOS开发 Xcode8 问题
一.证书管理 用Xcode8打开工程后,比较明显的就是下图了,这个是苹果的新特性,可以帮助我们自动管理证书.建议大家勾选这个Automatically manage signing(Ps.但是在b ...
- 解决ubuntu中文乱码问题
方法一: Ubuntu默认的中文字符编码为zh_CN.UTF-8,这个可以在 /etc/environment中看到:sudo gedit /etc/environment可以看到如下内容:PATH= ...
- C语言合并两个集合(L,L1) 将L1中不在L中的元素插入到L线性表中
void main(){ Sqlist L,L1; InitList(&L); InitList(&L1); ListInsert(&L, 1, 2); ListInsert( ...
- 网络编程------socketserver模块以及socket模块的更多用法.
socketserver模块 内置模块 (其实现原理为并发) socketserver这个模块主要是为了解决: TCP协议中,服务器不能同时连接多个客户端的问题 是处于socket抽象层和应用层之间的 ...
- Ajax 中的高级请求和响应
一.概述 在本文中,重点介绍这个请求对象的 3 个关键部分的内容: 1.HTTP 就绪状态 2.HTTP 状态代码 3.可以生成的请求类型 这三部分内容都是在构造一个请求时所要考虑的因素:但是介绍这些 ...