Html5 History API解析

2024-05-04 19:37:53

浏览器前进与回退操作

在传统的浏览器中我们只能通过调用window.history对象的 forward() 、 back() 或 go(number|url) 方法来进行页面的前进、回退或跳转到某一页面。

而Ajax技术出现出现后我们常常用来实现页面无刷新的局部渲染效果，但却无法对无刷新的页面进行前进和后退的操作。

显然，HTML 5标准制定者也考虑到这一点，于是在HTML 5中为history对象新增了 pushState() 、 replaceState() 接口以及state属性

state属性

state属性的值为对象（默认值为null），该值由用户通过pushState()方法传入，用于记录与改条历史记录相关的页面数据信息

pushState(state, title, url)

pushState()方法包含三个参数：

state： 用户为该条历史记录写入的数据对象来存储页面相关数据信息
title：页面标题
url：页面url

在HTML 5中，我们使用history.pushState()会往history中写入一条历史记录，history.length的值也会+1，history.state被传入的state对象覆盖。

replaceState(state, title, url)

replaceState()方法的三个参数和pushState()相同，但replaceState()用于修改当前页的历史记录。

如何使用state对象？

HTML5除了带给我们以上三个新增的接口以外，还允许浏览器在window上监听popState事件，每当对页面进行前进或后退的操作时，浏览器会从历史记录中取出state对象并通过参数传入popState事件的回调函数中：

window.addEventListener("popstate", function() {var currentState = history.state;/** 使用state做点事情*/
});

这部分的API比较少，也没什么好讲的，权当做个记录，END

转载于:https://www.cnblogs.com/WhiteCusp/p/4427989.html

Html5 History API解析相关推荐

巧用Html5 History Api解决SPA的SEO问题
背景想当年,我做了一个新媒体网站项目(AIISPO,已下线).跟普通资讯网站不一样的是,老板要求PC端前台的文章阅读模式一定得是瀑布流+模态框.瀑布流指的是以瀑布流的形式将文章罗列出来,而模态框则指 ...
php修改浏览器地址,HTML5 history API改变浏览器地址无需hash和刷新加载页面
现在很多网站的前端做的非常炫,点击某个链接瞬间改变浏览器的地址栏的地址,改变的方式不是使用锚点,而是直接改变 URL,页面稍后局部加载完成.如果直接复制页面地址在新的浏览器选项卡中打开则是全部加载整个 ...
ajax与HTML5 history pushState/replaceState实例
一.本文就是个实例展示三点: 我就TM想找个例子,知道如何个使用,使用语法什么的滚粗跟搜索引擎搞基自己备忘精力总是有限的,昨天一冲动,在上海浦东外环之外订了个90米的房子,要借钱筹首付.贷款和 ...
java局部刷新session过期_Ajax局部页面刷新和History API结合的陷阱
ajax在现代网站已经得到非常普遍地应用,主要的好处大家都知道(异步加载数据,不用刷新整个浏览器,更小的数据传输尺寸).对于那些老网站或者老项目来说全盘改造成ajax并不现实,于是就有了"局 ...
「前端」History API与浏览器历史堆栈管理
本文由尚妆前端开发工程师欲休撰写本文发表于尚妆博客,欢迎订阅! 移动端开发在某些场景中有着特殊需求,如为了提高用户体验和加快响应速度,常常在部分工程采用SPA架构.传统的单页应用基于url的hash ...
html5 history api_window.history的跳转探索
浏览器的跳转的本质是什么,历史记录是如何运作的,在spa应用中是如何进行决策的? 简介 window.history是用来保存用户在一个会话期间的网站访问记录,并提供了相应的方法进行查询,相关属性,方 ...
html5 history微信浏览器返回不刷新
History API与浏览器历史堆栈管理: 移动端开发在某些场景中有着特殊需求,如为了提高用户体验和加快响应速度,常常在部分工程采用SPA架构.传统的单页应用基于url的hash值进行路由,这种实现 ...
HTML5无刷新修改URL：利用 History API 无刷新更改地址栏
为什么80%的码农都做不了架构师?>>> HTML5 新增的历史记录 API 可以实现无刷新更改地址栏链接,配合 AJAX 可以做到无刷新跳转. 简单来说:假设当前页面为ren ...
大熊君学习html5系列之------History API（SPA单页应用的必备------重构完结版）
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻--,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

最新文章

热门文章