相关文档: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。示意图如下。

利用pushState开发无刷页面切换(转)的更多相关文章

  1. 利用pushState开发无刷页面切换

    转载:http://www.cnblogs.com/flash3d/archive/2013/10/23/3384823.html 实现目标 页面的跳转(前进后退,点击等)不重新请求页面 页面URL与 ...

  2. 只需要4步就可以将asp.net mvc变成SPA(单页面)应用,实现无刷新页面切换!

    SENNA.js Senna.js是一个超快速的单页面应用程序引擎,轻松构建基于Web的现代应用程序,只有大约8KB的JavaScript而没有任何依赖性.还提供非常酷炫的动画效果.想要详细了解的朋友 ...

  3. 利用HttpModule开发asp.net页面、ashx等访问时session失效的统一处理入口

    web程序时,当使用session时总会出现失效而报“未将对象引用设置到对象的实例”的http 500错误,本人比较懒,不想每个地方都用try catch处理,就找到个用httpModule统一处理的 ...

  4. ViewPager (下)-- 利用 Fragment 实现美丽的 页面切换

    之前用的ViewPager适用于简单的广告切换,但实现页面间的切换最好是用官方推荐的Fragment来处理. 本人力争做到最简单.最有用,是想以后用到的时候能够方便的拿过来复制就能够了. 效果图: w ...

  5. Qt学习笔记(2)-利用StackWidget实现选项卡式页面

    学习笔记第二篇,利用Qt实现选项卡式的页面,效果如图1.1-图1.3所示.程序实现的功能是通过点击状态栏实现不同页面的切换,实际上Qt中自带有Tab选项卡式的控件,本文利用StackWidge实现类似 ...

  6. iOS开发之——从零开始完成页面切换形变动画

    前言 某天我接到了UI发给我的两张图: 需求图.png 看到图的时候我一脸懵逼,显然我需要做一个页面切换的指示动画.老实说,从大三暑假开始做iOS开发也一年有余了,但是遇到复杂动画总是唯恐避之不及,只 ...

  7. iOS开发 横向分页样式 可左右滑动或点击头部栏按钮进行页面切换

    iOS开发 横向分页样式 可左右滑动或点击头部栏按钮进行页面切换 不多说直接上效果图和代码 1.设置RootViewController为一个导航试图控制器 //  Copyright © 2016年 ...

  8. Python图形界面开发—wxPython库的布局管理及页面切换

    前言 wxPython是基于Python的跨平台GUI扩展库,对wxWidgets( C++ 编写)封装实现.GUI程序的开发中界面布局是很重要的一个部分,合理的页面布局能够给予用户良好使用体验.虽然 ...

  9. EasyNVR H5无插件摄像机直播解决方案前端解析之:关于直播页面和视频列表页面切换的问题

    关于直播页面和视频列表页面切换 为了给用户更好的用户体验,并且更好的让用户快速简洁的了解实时的视频直播信息.一般多会分为列表展示和实时的视频直播展示. 表面上只是两个视图之间的随意切换,其实切换的两个 ...

随机推荐

  1. python中的归并排序

    本来在博客上看到用python写的归并排序的程序,然后自己跟着他写了一下,结果发现是错的,不得不自己操作.而自己对python不是非常了解所以就变百度边写,最终在花了半个小时之后就写好了. def m ...

  2. Linux监听进程是否存在,并加入定时任务

    前言 我们在linux主机上可能需要一直运行某一服务,如果关机后或者误杀,使得服务停止,从而影响日常的任务.比如一BI项目数据库的抽取,使用Taskctl调度,在每天固定时间进行数据的抽取,如果主机上 ...

  3. iOS开发-DatePicker控件

    时间控件不管是Android还是iOS中都是必然存在的一个控件,具体的效果大同小异,显示日期,时间,iOS中有四种方式可以选择,Time, Date,Date and Time  , Count Do ...

  4. Faster\Slower 快慢指针的应用

    leetcode很多题目都是利用快慢指针来解决题目,下面具体讲解下快慢指针. 概念: 快指针在每一步走的步长要比慢指针一步走的步长要多.快指针通常的步速是慢指针的2倍.在循环中的指针移动通常为:fas ...

  5. maven 将jar 下载到工程当前目录下

    在 pom.xml 的目录下,运行cmd命令 : call mvn -f pom.xml dependency:copy-dependencies 然后在同一目录下出现文件夹target,内容就是ja ...

  6. jquery获得select option的值和对select option的操作

    <body> <select name="month" id="selMonth" onchange="set()"> ...

  7. IOS基本数据类型之枚举

    枚举是C语言中的一种基本数据类型,通过枚举可以声明一组常数,来代表不同的含义,它实际上就是一组整型常量的集合. 枚举是非常常用的一种类型,在现实生活中也很常见.比如有四个季节,在不同的季节需要显示不同 ...

  8. tp 生成静态页

    $this->fetch()返回的是html 可以直接写入到HTML文件内生成静态页

  9. C# 中奇妙的函数–8. String Remove() 和 Replace()

    http://www.cnblogs.com/multiplesoftware/archive/2011/09/27/2192710.html 当对字符串进行操作时,我们经常要删除或者是替换一部分子字 ...

  10. OAuth 2.0 Authorization Framework RFC

    Internet Engineering Task Force (IETF) D. Hardt, Ed.Request for Comments: 6749 MicrosoftObsoletes: 5 ...