今天上Google+ 注意到一个功能:
点击链接时地址栏改变,但是页面没有刷新。
搜索一下,发现 google+ 已经不支持 IE6 了,使用了HTML5 js增加的一个新的API replaceState和pushState:
history.pushState(state, document.title, url);
同时提供了一个事件:
addEvent(window, 'popstate', function (event) {
var data = event.state;//与pushState(state,....)的参数对应
});
限制:
- 1、无法跨域,这个是必然的。
- 2、state对象虽然可以存储很多自定义的属性,但值不能是个对象。
demo:
http://html5demos.com/history
详细可参照
http://www.52ladybug.com/?p=202
另外:
不使用HTML5可以用 http://.../path#point 来实现
location 的可读可写属性
window.location.hash = 'toPoint'
HTML5对 # 也提供了一个 onhashchange 事件
window.addEventListener("hashchange", func, false);
Google抓取#的机制
格式为 :
http://twitter.com/#!/username
被转换 :
http://twitter.com/?_escaped_fragment_=/username
详细可参照
http://www.ruanyifeng.com/blog/2011/03/url_hash.html
分享到:
相关推荐
HTML5的History API是现代前端开发中的一个重要特性,它极大地改进了浏览器的历史管理,使得开发者可以更加灵活地控制用户在浏览器中的浏览历史记录。在"前端项目-html5-history-api.zip"这个压缩包中,我们看到的...
这款"html5参考手册 api.zip_Html5API"压缩包提供了一份详尽的HTML5 API开发手册,即使在没有互联网连接的情况下也能供开发者参考使用。这份手册以.chm( Compiled HTML Help)格式存储,是一种由微软开发的帮助文件...
connect-history-api-fallback, 返回到使用 HTML 5历史记录API的应用程序的回退到 index.html connect-history-api-fallback通过指定索引页面向代理请求请求中间件,这对于使用HTML5历史API的单页应用程序。...
这个"html5中文api"资源是一个专为中文用户设计的学习工具,包含了HTML5的开发手册,以CHM(Compiled Help Manual)格式提供,这是一种常见的Windows帮助文档格式。 HTML5的API(Application Programming Interface...
以上只是HTML5 API的一部分,实际文档中还包含了其他如拖放API、离线应用缓存、History API、Mutation Observers等众多特性。开发者可以根据需求,通过这份中文版的HTML5 API文档,深入学习并熟练掌握这些工具,提升...
**Node.js历史服务器详解——基于HTML5 History API的单页应用解决方案** 在现代Web开发中,单页应用程序(Single Page Application, SPA)已经成为一种主流架构,它提供了更流畅的用户体验和更快的页面加载速度。...
10. **History管理和PushState**:HTML5的History API允许开发者改变浏览器的URL而不进行页面刷新,通过PushState和ReplaceState方法可以创建更友好的单页应用体验。 这个“最新Html5中文API”CHM文件很可能是包含...
Ajax与HTML5 History API实践 Ajax与HTML5 History API的结合可以实现页面的无刷新操作,优点是页面不需要刷新,但缺点是无法前进与后退。HTML5的History API提供了pushState和replaceState两个方法,可以解决这个...
系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美驾驭O(∩_∩)O~,
HTML5的History API是Web开发中的一个重要特性,它极大地扩展了对浏览器历史记录的控制,使得开发者能够在不刷新页面的情况下改变URL和管理历史记录。在本文中,我们将深入理解History API,尤其是`history.push...
HTML5是现代网页开发的核心标准,它极大地扩展了HTML4的能力,引入了许多新的元素、属性、API和功能,旨在提供更丰富的用户体验和更强的交互性。这份“最全html5精华版官方API中文手册”正是为了帮助开发者深入理解...
可以完全按照例如Dive Into HTML5书( )或History API规范( )中的描述使用该库 )。 您可以使用以下命令安装此插件: npm install html5-history-api 浏览器支持: history.js -IE8 +和其他浏览器 history....
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引入了一个新的特性,允许开发者在用户导航历史记录时控制页面的状态,包括滚动位置。然而,老版本的浏览器可能不支持这个API,这就是Polyfill的作用。 Polyfill是一种JavaScript代码,它的...
尽管也存在一些,但由于您只能使用本机HTML5 History API,因此它们相对较小。 如果您打算支持旧版浏览器,那么可以使用History.js。 该通知位于此处,因为History.js没有获得足够的资金来维护,因此它仅在旧版...
HTML5引入了新的History API,包括`history.pushState()`、`history.replaceState()`以及`window.onpopstate`事件,这些API允许我们在不重新加载页面的情况下改变浏览器的URL,提供更好的用户体验。然而,不是所有...
HTML5作为现代网页开发的基石,引入了许多增强用户体验的新特性,其中History接口的pushState方法便是其中之一。这个方法允许我们在不重新加载页面的情况下改变浏览器的URL,为单页应用程序(SPA)提供了强大的支持...
1. **History API**:在History模式中,Vue Router 使用了HTML5的History API。`pushState`用于添加一个新的历史记录条目,并改变当前URL;`replaceState`则替换当前的历史记录条目,不增加新的记录;`popstate`事件...
HTML5的History API是现代Web开发中一个重要的进步,它允许开发者在不重新加载整个页面的情况下改变浏览器的历史记录和URL,从而实现平滑的页面导航和无刷新跳转。这个特性对于创建单页应用程序(SPA)和提升用户...