文档章节

利用pushState开发无刷页面切换

muyu
 muyu
发布于 2015/04/09 23:44
字数 597
阅读 21
收藏 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

粉丝 35
博文 35
码字总数 3632
作品 0
海淀
程序员
私信 提问
微信前端框架设计讨论【取消】

针对目前微信端的开发,butterfly 显得吃力。 特别是结合微信登录认证的情况下,更加难搞。 目前需要设计一个针对微信的前端框架,可以自主研发或者使用第三方开源来做。 对于这个框架,我希...

Chris
2015/04/09
2
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
Vue 单页应用(spa)前端路由实现原理

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

前端攻城小牛
12/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

js和OC交互

0.html+js 0.1html 代码 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #colordv{ width: 100px;......

walking_yxf
2分钟前
0
0
点播转码相关常见问题及排查方式

概述: 点播转码目前涉及用户上传自动触发转码、通过SubmitTranscodeJobs接口触发转码等方式,会出现用户转码失败的情况,这当中有用户源片的问题、也有用户设置转码参数的原因以及相关资源性...

阿里云官方博客
4分钟前
0
0
工作笔记

Oracle锁表 查找被锁的表 select l.session_id,o.owner,o.object_namefrom v$locked_object l,dba_objects owhere l.object_id=o.object_id; 查找引发锁表的会话 select s.username,s.si......

呼呼南风
6分钟前
0
0
并发工具优于wati、notify(69)

现在几乎没有理由在使用wait 和 notify,使用高级工具代替 java.util.concurrent 包并发工具分三类: Executor 框架 并发集合(concurrent Collection) 同步器(synchronizer) 并发集合 对...

Java搬砖工程师
13分钟前
0
0
AutoCAD_系统变量

https://baike.sogou.com/v53561514.htm?fromTitle=cad%E5%8F%98%E9%87%8F lunits 设置线性单位。1 科学 2 小数 3 工程 4 建筑 5 分数 6 windesk...

一个小妞
20分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部