利用pushState开发无刷页面切换
相关文档:https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulatingthebrowser_history
实现目标
- 页面的跳转(前进后退,点击等)不重新请求页面
- 页面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。示意图如下。
相关文章
- 《Objective-C开发经典教程》
- SQL 横转竖 、竖专横 (转载) 使用Dapper.Contrib 开发.net core程序,兼容多种数据库 C# 读取PDF多级书签 Json.net日期格式化设置 ASPNET 下载共享文件 ASPNET 文件批量下载 递归,循环,尾递归 利用IDisposable接口构建包含非托管资源对象 《.NET 进阶指南》读书笔记2------定义不可改变类型
- C#设计模式总结 C#设计模式(22)——访问者模式(Vistor Pattern) C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】:利用Swagger调试WebApi
- 利用WiFi模块实现MicroPython远程开发
- 全栈开发工程师微信小程序-中(下)
- iOS 9音频应用开发基础教程
- 利用 filter 机制 给 静态资源 url 加上时间戳,来防止js和css文件的缓存,利于开发调试
- 《Android 应用案例开发大全(第二版)》——6.5节Android系统的过滤机制大揭秘
- 《Visual C++ 开发从入门到精通》——1.3 利用Visual C++ 6.0编写C++程序
- 《树莓派开发实战(第2版)》——2.8 利用VNC远程控制树莓派
- 20+ 个JavaScript技术 -- 善于利用,可提升自己的开发效率(ES7-ES12新特性1w+字汇总,总有你需要的)
- Android的NDK开发(2)————利用Android NDK编写一个简单的HelloWorld
- iOS开发UI-利用Quartz2D 实现基本绘图(画三角形、矩形、圆、圆弧)
- 利用Qt开发跨平台APP(二)(iOS,使用Qt5.9,很详细,有截图)
- 《Swift iOS应用开发实战》——第2章 搭建计算器的界面
- 《Core Data应用开发实践指南》一3.6 小结
- 微信公众号开发之回复消息的模板
- Modbus库开发笔记之十:利用协议栈开发Mosbus RTU Slave应用
- Modbus库开发笔记之九:利用协议栈开发Modbus TCP Server应用
- 日本将开发光伏安全技术及电池板再利用技术
- 网工中级系统开发与项目管理
- 【正点原子MP157连载】第八章 STM32CubeIDE工程模板分析-摘自【正点原子】STM32MP1 M4裸机CubeIDE开发指南
- 【正点原子MP157连载】第二章 STM32MP1简介-摘自【正点原子】STM32MP1 M4裸机CubeIDE开发指南
- ASP.NET综合管理ERP系统100%源代码+所有开发文档
- [Phonegap+Sencha Touch] 移动开发77 Cordova Hot Code Push插件实现自己主动更新App的Web内容
- 利用JasperReport+iReport进行Web报表开发