有趣的API: history pushState/popstate 无刷新跳转(pjax)
API介绍
首先看看API如何使用:
history.pushState(state, title, url)
: 无刷新的向浏览器 历史最前方 加入一条记录。state
(any) 需要保存的数据,这个数据在触发popstate
事件时保存在event.state
上。title
(string):
Firefox 目前忽略了這個參數,雖然他以後有可能會採用。如果以後改變了這個作法,傳送空白的字串應該還會是安全的。另外,你可以傳送一個短的標題來敘述你想要到的state。
目前没有发现有地方保存这个title
,推测是state
的说明?url
(string) 需要更改的url
地址。ps:
pushState
需要至少两个参数。
popstate
: 浏览器点击前进后退时触发的事件。event.state
可以获取当前url下设置的state
。
另外获取pushState
中设置的state
不一定要在popstate
事件中获取,直接history.state
也可以拿到。
补充内容
pjax
pjax
,利用ajax
和 pushState
做成的和多页应用体验一致的SPA。github项目地址
现代路由框架的H5模式。
路由器的无刷新跳转也是利用该api
完成的。另外,由于url
变化,在用户复制分享时候由于路由未定义会出错,所以还需要服务端进行重定向处理。
引用资料:
有趣的API: history pushState/popstate 无刷新跳转(pjax)的更多相关文章
- 利用HTML5的History API实现无刷新跳转页面初探
HTML4中的History API history这个东西大家应该都不陌生,我们经常使用history.back(-1)来实现后退功能,具体的属性和方法如下: 属性 length 历史的项数.Jav ...
- history.js 一个无刷新就可改变浏览器栏地址的插件(不依赖jquery)
示例: http://browserstate.github.io/history.js/demo/ 简介 HTML4有一些对浏览历史的前进后退API的支持如: window.hist ...
- 利用history实现无刷新跳转界面
看标题是不是感觉很拽的样子,其实没什么啦,也就是时下常说的单页面应用.这种web形式在如今的移动端十分流行,毕竟在移动端频繁得去刷新界面不是很友好,而且还费流量.今天我们要做一个小的app(移动端), ...
- ajax与HTML5 history API实现无刷新跳转
一.ajax载入与浏览器历史的前进与后退 ajax可以实现页面的无刷新操作,但是无法前进与后退,淡出使用Ajax不利于SEO.如今,HTML5让事情变得简单.当执行ajax操作时,往浏览器histor ...
- HTML5 History API 实现无刷新跳转
在HTML5中, 1. 新增了通过JS在浏览器历史记录中添加项目的功能. 2. 在不刷新页面的前提下显示改变浏览器地址栏中的URL. 3. 添加了当用户单击浏览器的后退按钮时触发的事件. 通过以上三 ...
- HTML5 History API实现无刷新跳转
在HTML5中, 新增了通过JS在浏览器历史记录中添加项目的功能. 在不刷新页面的前提下显示改变浏览器地址栏中的URL. 添加了当用户单击浏览器的后退按钮时触发的事件. 通过以上三点,可以实现在不刷新 ...
- 黄聪:Pjax无刷新跳转页面实现,支持超链接与表单提交
什么是pjax? 当你点击一个站内的链接的时候,不是做页面跳转,而是只是站内页面刷新.这样的用户体验,比起整个页面都闪一下来说, 好很多. 其中有一个很重要的组成部分, 这些网站的ajax刷新是支持浏 ...
- Pjax无刷新跳转页面实现,支持超链接与表单提交
什么是pjax? 当你点击一个站内的链接的时候,不是做页面跳转,而是只是站内页面刷新.这样的用户体验,比起整个页面都闪一下来说, 好很多. 其中有一个很重要的组成部分, 这些网站的ajax刷新是支持浏 ...
- Ajax技术实现页面无刷新跳转
Ajax实现无刷新显示新的页面 <!DOCTYPE html> <html> <head> <script src="/jquery/jquery- ...
随机推荐
- 修改ORACLE实例名
修改数据库的SID 举例说明,我的数据库的SID叫testdb,现在要改成oral.更改ORACLE数据库的sid,涉及到的用东西比较多,但是大概来说就以下六步. 1.停止所有的Oracle服务. ...
- 【转】Python IDE for Eclipse
原文地址 PyDev is a plugin that enables Eclipse to be used as a Python IDE (supporting also Jython and I ...
- 【redis】2.redis可视化工具安装使用
redis可视化工具:Redis Desktop Manager 1.redis桌面管理工具[可视化工具]下载 下载地址:https://redisdesktop.com/download 2.点击安 ...
- java中jar命令打包一个文件夹下的所有文件
(1)首先,必须保证java的所有路径都设置好,在dos提示符下输入jar -help出现C:\Documents and Settings\dly>jar -help非法选项:h用法:jar ...
- 流畅的python第十四章可迭代的对象,迭代器和生成器学习记录
在python中,所有集合都可以迭代,在python语言内部,迭代器用于支持 for循环 构建和扩展集合类型 逐行遍历文本文件 列表推导,字典推导和集合推导 元组拆包 调用函数时,使用*拆包实参 本章 ...
- 摄像头模组 PDAF对焦(Phase Detection Auto Focus)
本文主要是最近看的两个文档的总结,相对零散的笔记,包括<imx298 software reference PDAF>与<PDAF Truly>. 1.PDAF功能的实现需要使 ...
- Java笔记19:Java匿名内部类
匿名内部类也就是没有名字的内部类.正因为没有名字,所以匿名内部类只能使用一次,它通常用来简化代码编写.但使用匿名内部类还有个前提条件:必须继承一个父类或实现一个接口 例1:不使用匿名内部类来实现抽象方 ...
- 【转】go语言的字节序
原文:http://lihaoquan.me/2016/11/5/golang-byteorder.html 这个人的博客写的不错,品质也比较高. 我应该也要有这种精神,这种态度.深入到计算机的世界中 ...
- in_array() 和array_search的区别
在判断字符串是否在某个数组里面的时候,我们会经常用到in_array()和array_search这两个函数. 他们的用法都是在数组中搜索给定的值,但是不同的是, in_array()给定的值 val ...
- 配置项目启动的时候就加载 servlet
load-on-startup值为0 就是在项目启动的时候自动加载该servlet