HTML5资讯

当前位置: HTML5技术网 > HTML5资讯 > 利用HTML5 History API实现无刷新跳转

利用HTML5 History API实现无刷新跳转

写在前面


有一次在上点点网的时候,发现登陆、注册动画效果非常华丽,但让我感到震惊的是页面竟能够实现无刷新跳转(已改版,观看此效果可以猛击此处:GitHub或阅FM),回顾了所学的前端知识,似乎没有任何技术可以实现这一点,于是百度搜罗了一下,才发现这原来是使用HTML5中History API实现的效果,但奈何一直未曾派上用场。直到博客改版时,才将这一技术应用起来。

HTML4中的History API


history这个东西大家应该都不陌生,我们经常使用history.back(-1)来实现后退功能,具体的属性和方法如下:


属性


  1. length 历史的项数。JavaScript 所能管到的历史被限制在用浏览器的“前进”“后退”键可以去到的范围。本属性返回的是“前进”和“后退”两个按键之下包含的地址数的和。


方法


  1. back() 后退,跟按下“后退”键是等效的。
  2. forward() 前进,跟按下“前进”键是等效的。
  3. go() 用法:history.go(x);在历史的范围内去到指定的一个地址。如果 x < 0,则后退 x 个地址,如果 x > 0,则前进 x 个地址,如果 x == 0,则刷新现在打开的网页。history.go(0) 跟 location.reload() 是等效的。

HTML5中的History API


  1. history.pushState(data, title [, url]):往历史记录堆栈顶部添加一条记录;data会在onpopstate事件触发时作为参数传递过去;title为页面标题,当前所有浏览器都会忽略此参数;url为页面地址,可选,缺省为当前页地址。
  2. history.replaceState(data, title [, url]) :更改当前的历史记录,参数同上。
  3. history.state:用于存储以上方法的data数据,不同浏览器的读写权限不一样。


浏览器兼容性

API

【利用HTML5 History API实现无刷新跳转】相关文章

1. 利用HTML5 History API实现无刷新跳转

2. jQuery实现用户登录的异步刷新

3. Giorgio Sardo:利用HTML5技术实现创新平台

4. 从SEO的角度剖析HTML5手艺的三个刷新

5. 利用HTML5与jQuery技术创建一个简单的自动表单完成

6. 利用HTML5与jQuery技术创建一个简单的自动表单完成

7. 分享2个帮助你自动刷新CSS文件的工具

8. jQuery.com 遭受恶意攻击,跳转到恶意网站

9. jQuery.com 遭受恶意攻击,跳转到恶意网站

10. html5.com跳转苹果页面域名系苹果收购?

本文来源:https://www.51html5.com/a2836.html

点击展开全部

﹝利用HTML5 History API实现无刷新跳转﹞相关内容

「利用HTML5 History API实现无刷新跳转」相关专题