HTML5 API 之 History

        今天上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

你可能感兴趣的:(js,html5,Google)