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- ...
随机推荐
-
升级xcode8之后出现报错提示,提示swift版本问题
最近Xcode升级了,出现了各种蛋疼的错误提示,今天遇到个导入框架出现了提示Swift版本的问题,具体如下: "Use Legacy Swift Language Version" ...
-
(转载)开始iOS 7中自动布局教程(一)
这篇教程的前半部分被翻译出来很久了,我也是通过这个教程学会的IOS自动布局.但是后半部分(即本篇)一直未有翻译,正好最近跳坑翻译,就寻来这篇教程,进行翻译.前半部分已经转载至本博客,后半部分即本篇.学 ...
-
ZEat
借助微博平台,记录每日饮食情况的Andorid程序. 项目地址:https://github.com/atskyline/ZEat 1.0.0APK下载地址:https://github.com/at ...
-
WampServer修改MySQL密码
WampServer安装后密码是空的,需要设置一下 一般有两种方式: 一是通过phpMyAdmin直接修改: 二是使用WAMP的MySql控制台修改. 第一种: ①在phpMyAdmin界面中点击[用 ...
-
html加载js那些事
浏览器通过内置的JavaScript引擎,读取网页中的代码,对其处理后运行. JavaScript代码嵌入网页的方法 在网页中嵌入JavaScript代码有多种方法. 直接添加代码块 通过script ...
-
asp.net 导出excel文件
之前做过winfrom程序的导出excel文件的功能,感觉非常简单.现在试着做asp.net中导出excel的功能,之前用的是Microsoft.Office.Interop.Excel这个对象来实现 ...
-
C++关注备注部分知识点
//关注备注部分知识点. #include <iostream> #include <string><span style="white-space:pre&q ...
-
bzoj 1901: Zju2112 Dynamic Rankings(树套树)
1901: Zju2112 Dynamic Rankings 经典的带改动求区间第k小值问题 树套树模板,我是用的线段树套splay实现的,并且用的数组模拟的,所以可能空间略大,bzoj过了,zoj过 ...
-
开始Java学习(Java之负基础实战)
开发平台: JavaSE:java标准平台,一般用于桌面程序开发 JavaEE:开发web(如网站+Sping) JavaME:开发移动应用 开发环境: JVM:跨平台核心. JRE:java运行时, ...
-
lambda高级进阶--表达式参数
1,现在我们封装一个方法,来提供一个比较器,显然比较器是拥有两个参数的--用来比较的两个值. public class Linkin { public static String[] sort(Str ...