文档章节

利用pushState开发无刷页面切换

muyu
 muyu
发布于 2015/04/09 23:44
字数 597
阅读 18
收藏 0
点赞 0
评论 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

共有 人打赏支持
muyu

muyu

粉丝 35
博文 35
码字总数 3632
作品 0
海淀
程序员
使用pushState实现微信“返回”按钮控制单页应用页面的无刷新跳转

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

Simon_ITer ⋅ 2016/10/17 ⋅ 7

浅谈移动端页面无刷新跳转问题的解决方案

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

祈澈姑娘 ⋅ 2017/12/22 ⋅ 0

轻量级web端单页面框架--mobile-router.js

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

匿名 ⋅ 2016/09/17 ⋅ 0

「前端」History API与浏览器历史堆栈管理

本文由尚妆前端开发工程师欲休撰写 本文发表于尚妆博客,欢迎订阅! 移动端开发在某些场景中有着特殊需求,如为了提高用户体验和加快响应速度,常常在部分工程采用SPA架构。传统的单页应用基...

尚妆产品技术刊读 ⋅ 2017/03/01 ⋅ 0

基于 jquery 的片段异步加载--jquery-fjax

jquery-fjax 页面片段异步加载 基于锚点技术,支持所有浏览器,不需要浏览支持 history.pushState 如果支持客户浏览器都支持 history.pushState ,建议使用 pjax 需要引入 jquery 库,开发版...

无夜 ⋅ 2017/07/03 ⋅ 0

Pjax是什么?

什么是Pjax? Pjax = ajax + history.pushState Pjax就是Ajax,不同点只有一个:就是会利用html5改变url地址而无需刷新页面,而Ajax只会利用url hash地址来改变url:在url后面加#或者#! jque...

爬墙 ⋅ 2016/09/17 ⋅ 0

HTML5 History API

引言 HTML5 History API 为开发者提供在不刷新浏览器页面的情况下修改 URL 的能力,在这之前,如果开发者修改 url 就会全页面刷新。History API 可以让我们灵活控制浏览器地址栏线上的内容,...

musishui ⋅ 2016/11/29 ⋅ 0

使用 pushState 更改 Rails link_to 帮助方法 remote:true Ajax 请求 URL

当我们使用 Rails link_to 帮助方法生成 a 标签时,并且 remote 赋值为 true,那么点击请求将是 Ajax 的形式。有时候我们需要改变 URL ,那么我们可以利用 HTML5 的 pushState 方法。 例如我...

已销号 ⋅ 2016/01/13 ⋅ 0

history API 和锚点链接在单页应用页面切换中的应用

Ajax的流行和前端MVVM框架的快速发展给Web开发带来了极大的便利,也让Web应用体验越来越好,近些年单页应用也随之流行起来。Ajax的应用可以让网页实现无刷新更新数据,但其也会造成浏览器无法...

深海鱼在掘金 ⋅ 2017/11/30 ⋅ 0

Hash, PushState 和微信 JSSDK 授权

最近将 riot.js 升级到了 3.0,并用上了新版本的 riot-route,原先用了一年多的 2.2.4 版本内置的 riot.route 只支持 hash 形式的 SPA 单页面应用,riot-route 则支持 pushState。 Hash 方式...

XiongLiding ⋅ 2016/12/17 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Netweaver和SAP云平台的quota管理

Netweaver 以需要为一个用户上下文(User Context)能够在SAP extended memory区域中分配内存尺寸创建quota为例。 对于Dialog工作进程,使用事务码修改参数 ztta/roll_extension_dia. 对于非D...

JerryWang_SAP ⋅ 24分钟前 ⋅ 0

IDEA提示编码速度

焦点移动 将焦点冲代码编辑窗口移动到菜单栏:Alt+菜单栏带下划线字母 将焦点从工具窗口移动到代码编辑窗口 Esc或Shift+Esc 将焦点从代码编辑移动到最近使用的工具窗口 F12 模板提示 Ctrl+J...

bithup ⋅ 32分钟前 ⋅ 0

180623-SpringBoot之logback配置文件

SpringBoot配置logback 项目的日志配置属于比较常见的case了,之前接触和使用的都是Spring结合xml的方式,引入几个依赖,然后写个 logback.xml 配置文件即可,那么在SpringBoot中可以怎么做?...

小灰灰Blog ⋅ 56分钟前 ⋅ 0

冒泡排序

原理:比较两个相邻的元素,将值大的元素交换至右端。 思路:依次比较相邻的两个数,将小数放在前面,大数放在后面。即在第一趟:首先比较第1个和第2个数,将小数放前,大数放后。然后比较第...

人觉非常君 ⋅ 今天 ⋅ 0

Vagrant setup

安装软件 brew cask install virtualboxbrew cask install vagrant 创建project mkdir -p mst/vmcd mst/vmvagrant init hashicorp/precise64vagrant up hashicorp/precise64是一个box......

遥借东风 ⋅ 今天 ⋅ 0

python3.6 安装pyhook_3

我的是在win下的,忙了半天老是安装不了, pip install 也不行。 那么可以看出自己的版本是32bit 一脸懵逼 没办法 只好下载32版本的来安装 我一直以为 是 对应32 位的 。 下面是 小例子 http...

之渊 ⋅ 今天 ⋅ 0

004、location正则表达式

1、location的作用 location指令的作用是根据用户请求的URI来执行不同的应用,也就是根据用户请求的网站URL进行匹配,匹配成功即进行相关的操作。 2、location的语法 = 开头表示精确匹配 ^~...

北岩 ⋅ 今天 ⋅ 0

CentOS7 静默安装 Oracle 12c

环境 CentOS7.5 最小安装 数据库软件 linuxx64_12201_database.zip 操作系统配置 关闭 SELinux sed -i '/^SELINUX=/cSELINUX=disabled' /etc/selinux/config 关闭防火墙 systemctl disable ......

Colben ⋅ 今天 ⋅ 0

Yii2中findAll()的正确使用姿势/返回为空的处理办法

从一次错误的操作开始 $buildingObject = Building::findAll("status=1"); 1 这个调用看着没有任何毛病,但是在使用时返回的结果却是一个空数组。再回过头来看看数据表中: 按照套路来讲,查...

dragon_tech ⋅ 今天 ⋅ 0

如何优雅的编程——C语言界面的一点小建议

我们鼓励在编程时应有清晰的哲学思维,而不是给予硬性规则。我并不希望你们能认可所有的东西,因为它们只是观点,观点会随着时间的变化而变化。可是,如果不是直到现在把它们写在纸上,长久以...

柳猫 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部