文档章节

利用pushState开发无刷页面切换

muyu
 muyu
发布于 2015/04/09 23:44
字数 597
阅读 20
收藏 0

相关文档:https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulatingthebrowser_history

实现目标

  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。示意图如下。 


本文转载自:http://www.cnblogs.com/flash3d/archive/2013/10/23/3384823.html

共有 人打赏支持
上一篇: MongoDB条件操作符
下一篇: bootstrap内容浮动
muyu

muyu

粉丝 36
博文 35
码字总数 3632
作品 0
海淀
程序员
私信 提问
前端单页面富应用(SPA)的实现

一、 什么是单页面富应用? 单页面应用:Single Page Application 概念:Web应用即使不刷新也在不同的页面间切换,解决浏览器前进、后退等机制被破坏等问题。并且页面访问会被浏览器保存。 实现方...

xiaobiB
08/21
0
0
原生开发移动web单页面(step by step)8——History对象

增加了页面切换效果后,再配合手势以及按键,让单页面app更像一个原生app, 然而却引来了一个新的问题, 通过浏览器自带的前进后退无法有选择的采取动画效果。因为在popstate的时候,都是采用...

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

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

Simon_ITer
2016/10/17
2.8K
7
浅谈移动端页面无刷新跳转问题的解决方案

浅谈移动端页面无刷新跳转问题的解决方案 2017-12-22 祈澈姑娘 最近开发微信公众号,用的框架是 一般的 UI,但是涉及到多页面之间的相互跳转的问题,降低了浏览器的性能,用户体验特别不好,...

祈澈姑娘
2017/12/22
0
0
轻量级web端单页面框架--mobile-router.js

mobile-router.js 是轻量级web端单页面框架。 优势: 使用简单、方便、轻量,基于 history、window.onpopstate。 支持路由视图嵌套 (1.5.0+)。 无依赖,可与其他框架(库)搭配自由使用,例如...

匿名
2016/09/17
714
0

没有更多内容

加载失败,请刷新页面

加载更多

WebSocketdemo

WebSocket是html5提供的一种在单个tcp连接上进行全双工通讯的协议。 Http协议是无状态、无连接的、单向的应用层协议,采用了请求响应模型,通信请求智能有客户端发起,服务端对请求做出应答处...

qiang123
24分钟前
0
0
谷歌推迟公布Google+漏洞遭参议员不满

参议院商务委员会主席约翰·图恩和另外两位参议员杰瑞·莫兰和罗杰·维克发出信函,要求谷歌解释推迟披露此问题的原因。信中称:“谷歌如果要保持或重获用户对其服务的信任,就必须在公众和立...

linuxCool
31分钟前
0
0
最重要的是做什么,而不是怎么做。

最重要的是做什么,而不是怎么做。 做什么是战略,怎么做是战术。将军下令说,天黑前拿下这座山头,这是战略。手下的士兵可以不知道为什么要拿下这座山头,还非得是天黑之前,但士兵必须知道...

我是菜鸟我骄傲
今天
6
0
w, vmstat, top, sar, nload命令查看系统状态信息

w/uptime 查看系统负载 cat /proc/cpuinfo 查看cpu核数 vmstat 监控系统状态,用法 vmstat 1,关键的几列: r, b, swpd, si, so, bi, bo, us, wa top 查看进程使用资源情况 top -c 显示详细的...

野雪球
今天
2
0
小白创建一个spring boot项目

进入 https://start.spring.io/

lilugirl
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部