你的位置:首页 > 软件开发 > 网页设计 > HTML5中的History和Location对象

HTML5中的History和Location对象

发布时间:2016-03-23 09:00:06
今天发现原来HTML5对History和Location对象进行了改进,提供了几个新的API。我觉得,这用来结合Ajax来使用,弥补Ajax技术更新内容但不产生历史记录的问题,十分有用。我很久之前就想过通过锚点来解决实现书签和定位,配合iframe使用一些小技巧,还可以实现历史记 ...

今天发现原来HTML5对History和Location对象进行了改进,提供了几个新的API。我觉得,这用来结合Ajax来使用,弥补Ajax技术更新内容但不产生历史记录的问题,十分有用。

我很久之前就想过通过锚点来解决实现书签和定位,配合iframe使用一些小技巧,还可以实现历史记录的产生。后来发现,原来IE8和其它现代浏览器都大都已经实现了更改锚点来产生历史记录了

记得,我第一次做的一个相关的小应用是工大在线的翻页书签功能:http://www.gdutonline.com/newstudent/Detail.aspx?id=14814,这个页面的分页是在前端负责的,所以如果不加处理,去到任何一页码都是同一个URL。我的处理方法是:用户点击翻页的时候,锚点会改变,如果把带锚点的网址发给别人,他也会去到该页。但是,我没有做历史记录的实现,就是说,但用户从第一页到第二页,再点击返回的时候,页面不会跳转到第一页,因为浏览器只负责改变URL,这些更改后的URL需要怎么解析要我们自己写程序。但问题是,我们如何知道用户点击前进后退了?就是URL改变了?这需要我们手动来实现,一般有三种方法:

  1. 使用定时器来侦听URL变化以触发事件,这个方法兼容性好,被很多框架所采用,但是长期反复检查URL,效率很低。我在Web文件管理系统中就是采用了这套方案。但是在IE6,7中,只见诶需要解决不产生历史记录的问题,一般可以通过嵌入iframe解决。
  2. 使用插入iframe等一系列旁门左道,下面的参考资料可以看,这些方法可能不太成熟,不宜用在真正项目中。
  3. 使用HTML5的onhashchange事件,这个太鸡冻人心了,正是我们要的。但是,它的缺点是需要支持HTML5的浏览器支持。

下面开始讨论一下HTML5中的History和Location新特性,主要就是两个方法和两个事件。

window . history . pushState(data, title [, url ] )

原标题:HTML5中的History和Location对象

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。