• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > html5的history API

html5的history API

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含html5,history API等相关知识,匿名希望在学习及工作中可以帮助到您
不得不佩服下谷歌Chrome团队,利用HTML5和CSS3实现了一本相当漂亮的在线电子书:《关于浏览器和互联网20件事》。

访问地址:http://www.20thingsilearned.com

话说这本电子书已经出来很久了,不过今天来看依然觉得相当的赞。我们无需刷新页面,就可以来回切换电子书页面,这正是OPOA(One Page One Application)的完美体现。

现在正在学习关于history API这方面的东西,所以特别感兴趣的是他们如何使用window.history.pushState()和window.history.replaceState()来做页面之间的不刷新切换。

今天查阅了一些资料,基本上对history API有了一个基本了解。

首先要说的就是history是个全局,即window.history。看到这个变量名你一定很熟悉,因为经常可以看到用window.history.back()或者window.history.go(-1)来返回上一页的JavaScript代码。

所以history并不是什么新东西,在HTML4的时代,我们可以使用它的这几个属性和方法:

length:历史堆栈中的记录数。

back():返回上一页。

forward():前进到下一页。

go([delta]):delta是个数字,如果不写或为0,则刷新本页;如果为正数,则前进到相应数目的页面;若为负数,则后退到相应数目的页面。

现在,HTML5为其又添加了以下2个方法:

pushState(data, title [, url]):往历史堆栈的顶部添加一条记录。data为一个对象或null,它会在触发window的popstate事件(window.onpopstate)时,作为参数的state属性传递过去;title为页面的标题,但当前所有浏览器都忽略这个参数;url为页面的URL,不写则为当前页。

replaceState(data, title [, url]):更改当前页面的历史记录。参数同上。这种更改并不会去访问该URL。不过目前只有Safari 5.0+、Chrome 8.0+、Firefox 4.0+和iOS 4.2.1+支持。如果想兼容老浏览器的话,可以试试History.js,而且它还修正了一些bug。

当然,在移动平台上,我们可以大胆尝试html5的history API。ios3.0+ 和Android2.0+ 平台的内置浏览器对history都比较完美了,利用它我们可以web app更趋向与native app。

下面,推荐几篇文章:

.Manipulating the browser history

.Session history and navigation

.Manipulating History for Fun & Profit

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2018-12-03li标签实现日期,标题右对齐的方法
  • 2017-08-26使用vlc解决在web上点击播放ts格式视频
  • 2017-08-06HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
  • 2018-12-03两种常用编程的比较 声明式和命令式
  • 2018-12-03HTML5边玩边学(七)-动画初步之飞舞的精灵
  • 2018-12-03如何系统的学习做网站?
  • 2018-12-03浅谈H5的data-*中容易被忽略的一个小问题
  • 2018-12-03有关定义列表的课程推荐10篇
  • 2018-12-037个专门为HTML5开发人员打造的Web框架
  • 2018-12-03HTML5 dialog是什么?怎么使用HTML5中的dialog来实现模拟弹窗?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 想做一款基于HTML5的卡牌游戏,有什么好的引擎推荐么?
    • 在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口
    • 详细介绍HTML5 12个设计小技巧(图文)
    • HTML5新增的8类INPUT输入类型介绍_html5教程技巧
    • 移动端网站设计优化要点
    • 关于简单动画的10篇课程推荐
    • HTML5边玩边学(五)-图像、图案和字体
    • Tkinter教程之Canvas篇(4)
    • html5返回音频/视频是否已结束的属性ended
    • HTML5打开本地app应用的示例代码

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有