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变化,在用户复制分享时候由于路由未定义会出错,所以还需要服务端进行重定向处理。

引用资料:

  1. 张鑫旭:ajax与HTML5 history pushState/replaceState实例

  2. mdn文档

有趣的API: history pushState/popstate 无刷新跳转(pjax)的更多相关文章

  1. 利用HTML5的History API实现无刷新跳转页面初探

    HTML4中的History API history这个东西大家应该都不陌生,我们经常使用history.back(-1)来实现后退功能,具体的属性和方法如下: 属性 length 历史的项数.Jav ...

  2. history.js 一个无刷新就可改变浏览器栏地址的插件(不依赖jquery)

    示例: http://browserstate.github.io/history.js/demo/     简介   HTML4有一些对浏览历史的前进后退API的支持如:   window.hist ...

  3. 利用history实现无刷新跳转界面

    看标题是不是感觉很拽的样子,其实没什么啦,也就是时下常说的单页面应用.这种web形式在如今的移动端十分流行,毕竟在移动端频繁得去刷新界面不是很友好,而且还费流量.今天我们要做一个小的app(移动端), ...

  4. ajax与HTML5 history API实现无刷新跳转

    一.ajax载入与浏览器历史的前进与后退 ajax可以实现页面的无刷新操作,但是无法前进与后退,淡出使用Ajax不利于SEO.如今,HTML5让事情变得简单.当执行ajax操作时,往浏览器histor ...

  5. HTML5 History API 实现无刷新跳转

     在HTML5中, 1. 新增了通过JS在浏览器历史记录中添加项目的功能. 2. 在不刷新页面的前提下显示改变浏览器地址栏中的URL. 3. 添加了当用户单击浏览器的后退按钮时触发的事件. 通过以上三 ...

  6. HTML5 History API实现无刷新跳转

    在HTML5中, 新增了通过JS在浏览器历史记录中添加项目的功能. 在不刷新页面的前提下显示改变浏览器地址栏中的URL. 添加了当用户单击浏览器的后退按钮时触发的事件. 通过以上三点,可以实现在不刷新 ...

  7. 黄聪:Pjax无刷新跳转页面实现,支持超链接与表单提交

    什么是pjax? 当你点击一个站内的链接的时候,不是做页面跳转,而是只是站内页面刷新.这样的用户体验,比起整个页面都闪一下来说, 好很多. 其中有一个很重要的组成部分, 这些网站的ajax刷新是支持浏 ...

  8. Pjax无刷新跳转页面实现,支持超链接与表单提交

    什么是pjax? 当你点击一个站内的链接的时候,不是做页面跳转,而是只是站内页面刷新.这样的用户体验,比起整个页面都闪一下来说, 好很多. 其中有一个很重要的组成部分, 这些网站的ajax刷新是支持浏 ...

  9. Ajax技术实现页面无刷新跳转

    Ajax实现无刷新显示新的页面 <!DOCTYPE html> <html> <head> <script src="/jquery/jquery- ...

随机推荐

  1. 修改ORACLE实例名

    修改数据库的SID  举例说明,我的数据库的SID叫testdb,现在要改成oral.更改ORACLE数据库的sid,涉及到的用东西比较多,但是大概来说就以下六步. 1.停止所有的Oracle服务.  ...

  2. 【转】Python IDE for Eclipse

    原文地址 PyDev is a plugin that enables Eclipse to be used as a Python IDE (supporting also Jython and I ...

  3. 【redis】2.redis可视化工具安装使用

    redis可视化工具:Redis Desktop Manager 1.redis桌面管理工具[可视化工具]下载 下载地址:https://redisdesktop.com/download 2.点击安 ...

  4. java中jar命令打包一个文件夹下的所有文件

    (1)首先,必须保证java的所有路径都设置好,在dos提示符下输入jar -help出现C:\Documents and Settings\dly>jar -help非法选项:h用法:jar ...

  5. 流畅的python第十四章可迭代的对象,迭代器和生成器学习记录

    在python中,所有集合都可以迭代,在python语言内部,迭代器用于支持 for循环 构建和扩展集合类型 逐行遍历文本文件 列表推导,字典推导和集合推导 元组拆包 调用函数时,使用*拆包实参 本章 ...

  6. 摄像头模组 PDAF对焦(Phase Detection Auto Focus)

    本文主要是最近看的两个文档的总结,相对零散的笔记,包括<imx298 software reference PDAF>与<PDAF Truly>. 1.PDAF功能的实现需要使 ...

  7. Java笔记19:Java匿名内部类

    匿名内部类也就是没有名字的内部类.正因为没有名字,所以匿名内部类只能使用一次,它通常用来简化代码编写.但使用匿名内部类还有个前提条件:必须继承一个父类或实现一个接口 例1:不使用匿名内部类来实现抽象方 ...

  8. 【转】go语言的字节序

    原文:http://lihaoquan.me/2016/11/5/golang-byteorder.html 这个人的博客写的不错,品质也比较高. 我应该也要有这种精神,这种态度.深入到计算机的世界中 ...

  9. in_array() 和array_search的区别

    在判断字符串是否在某个数组里面的时候,我们会经常用到in_array()和array_search这两个函数. 他们的用法都是在数组中搜索给定的值,但是不同的是, in_array()给定的值 val ...

  10. 配置项目启动的时候就加载 servlet

    load-on-startup值为0 就是在项目启动的时候自动加载该servlet