有趣的API: history pushState/popstate 无刷新跳转(pjax)

时间:2023-02-16 14:58:33

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. 升级xcode8之后出现报错提示,提示swift版本问题

    最近Xcode升级了,出现了各种蛋疼的错误提示,今天遇到个导入框架出现了提示Swift版本的问题,具体如下: "Use Legacy Swift Language Version" ...

  2. (转载)开始iOS 7中自动布局教程&lpar;一&rpar;

    这篇教程的前半部分被翻译出来很久了,我也是通过这个教程学会的IOS自动布局.但是后半部分(即本篇)一直未有翻译,正好最近跳坑翻译,就寻来这篇教程,进行翻译.前半部分已经转载至本博客,后半部分即本篇.学 ...

  3. ZEat

    借助微博平台,记录每日饮食情况的Andorid程序. 项目地址:https://github.com/atskyline/ZEat 1.0.0APK下载地址:https://github.com/at ...

  4. WampServer修改MySQL密码

    WampServer安装后密码是空的,需要设置一下 一般有两种方式: 一是通过phpMyAdmin直接修改: 二是使用WAMP的MySql控制台修改. 第一种: ①在phpMyAdmin界面中点击[用 ...

  5. html加载js那些事

    浏览器通过内置的JavaScript引擎,读取网页中的代码,对其处理后运行. JavaScript代码嵌入网页的方法 在网页中嵌入JavaScript代码有多种方法. 直接添加代码块 通过script ...

  6. asp&period;net 导出excel文件

    之前做过winfrom程序的导出excel文件的功能,感觉非常简单.现在试着做asp.net中导出excel的功能,之前用的是Microsoft.Office.Interop.Excel这个对象来实现 ...

  7. C&plus;&plus;关注备注部分知识点

    //关注备注部分知识点. #include <iostream> #include <string><span style="white-space:pre&q ...

  8. bzoj 1901&colon; Zju2112 Dynamic Rankings&lpar;树套树&rpar;

    1901: Zju2112 Dynamic Rankings 经典的带改动求区间第k小值问题 树套树模板,我是用的线段树套splay实现的,并且用的数组模拟的,所以可能空间略大,bzoj过了,zoj过 ...

  9. 开始Java学习(Java之负基础实战)

    开发平台: JavaSE:java标准平台,一般用于桌面程序开发 JavaEE:开发web(如网站+Sping) JavaME:开发移动应用 开发环境: JVM:跨平台核心. JRE:java运行时, ...

  10. lambda高级进阶--表达式参数

    1,现在我们封装一个方法,来提供一个比较器,显然比较器是拥有两个参数的--用来比较的两个值. public class Linkin { public static String[] sort(Str ...