上一篇我们介绍了H5的营销,那么H5的营销必然会设计到一些技术性的问题,那么本篇我们就介绍H5的一些新型特性。这些痕迹就保存在history中,在现在热火的移动终端,以微信为首的H5开发已不再稀有,越来越多的产品正向着H5转型,那么我们将面临一些问题,例如我们在微信公众号中点击了某个页面的链接然后如此循环点击页面中的链接,那么浏览器的history的堆栈中就会存储一堆记录,当想返回到公众号的主页面的时候,那就需要多次按着物理返回键,
才能返回到主页面(这里说下微信公众号的缺点,打开公众号的页面之后,微信本身不自带返回,只有左上角的关闭功能, 所以在Android只能使用手机物理返回键, IOS就坑爹了),那么这必然暴露出一个问题,用户体验。所以我们要对其进行一些处理,那么就用到了H5的最新特性。
1. history.pushState与history.replaceState。
A)history.length:当前历史列表中的历史记录数(我大概测了下,IE6+是从0开始的,其他的是从1开始的,若有误请反馈哈,(^_^);
B)history.go(n):前进或后退n条记录,当n=0或空时会刷新当前页;
C)history.back():后退一步;
D)history.forward():前进一步;
2. HTML5新增的API
A)history.pushState(data, title [, url]):往历史记录堆栈顶部添加一条记录; data会在onpopstate事件触发时作为
参数传递过去;title为页面标题,当前所有浏览器都会 忽略此参数;url为页面地址,可选,缺省为当前页地址;
B)history.replaceState(data, title [, url]) :更改当前的历史记录,参数同上;
C)history.state:用于存储以上方法的data数据,不同浏览器的读写权限不一样;
D)window.onpopstate:响应pushState或replaceState的调用;有了这几个新的API,针对支持的浏览器,
我们可以构建用户体验更好的应用了。就像刚提到的Facebook相册,虽然是AJAX的方式,但用户可以直接复 制页面地址分享给好友,
好友打开看到的就是AJAX加载的数据,做到了书签化。当然这里面需要做的工作远不是说的这么简单。
那么我们接下来看个简单的例子:在项目工程目录中建了3个jsp,分别为:4444.jsp、5555.jsp、abcd.jsp,如下图:
如上图所示,我们首先访问的是4444.jsp,然后从4444.jsp点击链接跳转到,5555.jsp,最后在5555.jsp中点击后退,返回到abcd.jsp,按照正常的逻辑应该返回到4444.jsp,
因为在4444.jsp中替换了4444.jsp所存在的历史记录换成了abcd.jsp,abcd.jsp并不存在于我们的历史记录中,这就是history新特性的实现。(关于访问4444.jsp,url变成了localhost:8080/abcd.jsp,也是由于设置了histroy.replaceState的原因)
关于history对象来实现页面前进后退(go/back/forward)
常见的用法是:
history.back();//返回上一页,相当于浏览器上后退功能。
history.forward();//去到下一页,相当于浏览器的前进功能。
histoty.go(int);//去到指定的浏览历史记录页面。int是正的时候,就是向前int个历史记录,如果没有那么多,就没有行为。int是负数的时候那么就会向后,
为0页面即没有任何变化。
分享到:
相关推荐
这个压缩包中,我们看到的"HTML5-History-API-master"文件夹很可能是包含了关于如何使用和扩展HTML5 History API的示例代码和文档。 首先,History API包括三个主要方法:`pushState()`, `replaceState()`和`...
connect-history-api-fallback, 返回到使用 HTML 5历史记录API的应用程序的回退到 index.html connect-history-api-fallback通过指定索引页面向代理请求请求中间件,这对于使用HTML5历史API的单页应用程序。...
总的来说,`history-server`是一个针对单页应用的高效解决方案,它解决了SPA与HTML5 History API的兼容性问题,使得用户在享受SPA的流畅体验的同时,也能拥有正常的浏览器导航和书签功能。通过理解其工作原理和使用...
Ajax与HTML5 History API实践 Ajax与HTML5 History API的结合可以实现页面的无刷新操作,优点是页面不需要刷新,但缺点是无法前进与后退。HTML5的History API提供了pushState和replaceState两个方法,可以解决这个...
这款"html5参考手册 api.zip_Html5API"压缩包提供了一份详尽的HTML5 API开发手册,即使在没有互联网连接的情况下也能供开发者参考使用。这份手册以.chm( Compiled HTML Help)格式存储,是一种由微软开发的帮助文件...
通过这个中文版的HTML5 API开发手册,开发者可以深入理解这些特性和API的使用方法,从而更好地利用HTML5来构建现代、高性能的网页应用。CHM格式的文档通常包含索引、搜索和书签功能,便于快速查找和学习所需信息。...
HTML5的History API是Web开发中的一个重要特性,它极大地扩展了对浏览器历史记录的控制,使得开发者能够在不刷新页面的情况下改变URL和管理历史记录。在本文中,我们将深入理解History API,尤其是`history.push...
10. **History管理和PushState**:HTML5的History API允许开发者改变浏览器的URL而不进行页面刷新,通过PushState和ReplaceState方法可以创建更友好的单页应用体验。 这个“最新Html5中文API”CHM文件很可能是包含...
"HistoryAPI:滚动恢复...总结来说,"HistoryAPI:滚动恢复"的Polyfill是为了确保在所有浏览器中都能实现HTML5 History API的滚动恢复功能。通过理解和应用这个Polyfill,开发者可以提高其Web应用的兼容性和用户体验。
以上只是HTML5 API的一部分,实际文档中还包含了其他如拖放API、离线应用缓存、History API、Mutation Observers等众多特性。开发者可以根据需求,通过这份中文版的HTML5 API文档,深入学习并熟练掌握这些工具,提升...
系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美驾驭O(∩_∩)O~,
HTML5是现代网页开发的核心标准,它极大地扩展了HTML4的能力,引入了许多新的元素、属性、API和功能,旨在提供更丰富的用户体验和更强的交互性。这份“最全html5精华版官方API中文手册”正是为了帮助开发者深入理解...
可以完全按照例如Dive Into HTML5书( )或History API规范( )中的描述使用该库 )。 您可以使用以下命令安装此插件: npm install html5-history-api 浏览器支持: history.js -IE8 +和其他浏览器 history....
HTML5的History API是现代Web开发中一个重要的进步,它允许开发者在不重新加载整个页面的情况下改变浏览器的历史记录和URL,从而实现平滑的页面导航和无刷新跳转。这个特性对于创建单页应用程序(SPA)和提升用户...
尽管也存在一些,但由于您只能使用本机HTML5 History API,因此它们相对较小。 如果您打算支持旧版浏览器,那么可以使用History.js。 该通知位于此处,因为History.js没有获得足够的资金来维护,因此它仅在旧版...
HistoryLocation是包装 HTML5 历史 API。 // ececute http://example.com/ import { HashLocation } from 'common-history' ; const hashLocation = new HashLocation ( ) ; // It is executed each time the ...
HTML5引入了新的History API,包括`history.pushState()`、`history.replaceState()`以及`window.onpopstate`事件,这些API允许我们在不重新加载页面的情况下改变浏览器的URL,提供更好的用户体验。然而,不是所有...
1. **History API**:在History模式中,Vue Router 使用了HTML5的History API。`pushState`用于添加一个新的历史记录条目,并改变当前URL;`replaceState`则替换当前的历史记录条目,不增加新的记录;`popstate`事件...