`
2008winstar
  • 浏览: 60870 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论
  • chenke: 写的很好,也可以看看那这个文章,我感觉学的还可以。http:/ ...
    HTML

HTML5之history管理

 
阅读更多

比较简单的历史记录管理技术是通过location.hash和hashchange事件来实现的。

在浏览器中设置location.hash会改变当前的URL,同时也会在浏览器的历史记录中增加一条记录。

支持HTML5的浏览器当发现URL中的片段发生变化时,就会在Window对象上触发一个hashchange事件。

这样,在支持hashchange事件的浏览器中,就可以通过设置window.onhashchange为一个处理函数,使得每次历史记录变换导致hash标识符变化的时候,都会调用相应的处理函数。在处理函数中可以对location.hash的值进行解析,然后根据该值进行相应的处理。

 

此外,HTML5中还定义了一个相对更加复杂和强健的历史记录管理方法,包含history.pushState()方法和popstate事件。

当Web应用进入一个新的状态时,会调用history.pushState()方法,将该状态添加到浏览器的历史记录中。该方法的第一个参数是一个对象,该对象包含用于恢复当前文档状态所需的所有信息;该方法的第二个可选参数是一个可选的标题(普通的文本字符串);该方法的第三个参数是一个可选的URL,表示当前状态的位置。

除了,pushState()方法外,history对象还定义了replaceState()方法,该方法和pushState()方法接受同样的参数,但它是用新的状态代替当前的历史状态。

当通过“后退”和“前进”按钮浏览保存的历史状态时,浏览器会在window对象上触发一个popstate事件,与该事件相关联的事件对象有一个state属性,该属性包含传递给pushState()方法的状态对象的副本。

分享到:
评论

相关推荐

    前端项目-html5-history-api.zip

    HTML5的History API是现代前端开发中的一个重要特性,它极大地改进了浏览器的历史管理,使得开发者可以更加灵活地控制用户在浏览器中的浏览历史记录。在"前端项目-html5-history-api.zip"这个压缩包中,我们看到的...

    Node.js-history-server一个用于单页应用的HTTP服务器使用HTML5historyAPI实现

    **Node.js历史服务器详解——基于HTML5 History API的单页应用解决方案** 在现代Web开发中,单页应用程序(Single Page Application, SPA)已经成为一种主流架构,它提供了更流畅的用户体验和更快的页面加载速度。...

    自用jQuery插件,基于html5的history.pushState方法.zip

    HTML5作为现代网页开发的基石,引入了许多增强用户体验的新特性,其中History接口的pushState方法便是其中之一。这个方法允许我们在不重新加载页面的情况下改变浏览器的URL,为单页应用程序(SPA)提供了强大的支持...

    vue-router-h5-history-源码.rar

    H5 History 模式是Vue Router的一种路由模式,利用HTML5的新特性,提供了更加友好的URL,使得页面刷新时依然能保持正常工作。 Vue Router 的 History 模式是基于浏览器的History API(pushState、replaceState 和 ...

    浏览器history.js

    这个插件的目标是提供一个跨浏览器的解决方案,确保在HTML5 History API不被支持的旧版浏览器中也能正常工作。 HTML5引入了新的History API,包括`history.pushState()`、`history.replaceState()`以及`window....

    深入探究HTML5的History API

    HTML5的History API是Web开发中的一个重要特性,它极大地扩展了对浏览器历史记录的控制,使得开发者能够在不刷新页面的情况下改变URL和管理历史记录。在本文中,我们将深入理解History API,尤其是`history.push...

    浅析HTML5中的 History 模式

    HTML5的History模式是现代网页应用中用于处理路由和页面状态的重要特性,它极大地改进了浏览器的历史记录管理,使得单页应用(SPA)能够更好地模拟传统多页面网站的行为,同时保持URL与页面内容的一致性。...

    vue router下的html5 history在iis服务器上的设置方法

    "vue router下的html5 history在iis服务器上的设置方法" vue router下的html5 history在iis服务器上的设置方法是指在使用vue router的history模式时,如何在iis服务器上对其进行正确的配置,以便使得html5 history...

    绿色清爽的HTML5通用后台管理系统模板

    5. **路由管理**:后台管理系统往往有多个功能模块,HTML5的History API允许开发者实现前端路由,使得页面跳转更加平滑,同时能更好地管理URL。 6. **组件库**:模板可能包含一些预封装的UI组件,如按钮、导航条、...

    jquery history

    3. **`.historyAdd(hash, title)**:添加一个新的历史记录条目,可以设置一个可选的标题,这在支持HTML5 History API的浏览器中尤为重要。 4. **`.historyClear()`**:清除当前的历史记录。 **四、实战应用** 在...

    common-history:HTML5 历史 API 和哈希片段控制的一致 API

    HistoryLocation是包装 HTML5 历史 API。 // ececute http://example.com/ import { HashLocation } from 'common-history' ; const hashLocation = new HashLocation ( ) ; // It is executed each time the ...

    html5大气的企业管理业务咨询网站模板

    "html5大气的企业管理业务咨询网站模板"是一个专为企业咨询管理领域设计的网站模板,它采用蓝色调,营造出专业且大气的视觉效果,旨在提升企业形象和业务展示力。 该模板包含12个精心设计的页面,覆盖了企业网站的...

    history-date

    HTML5的历史管理API(History API)允许开发者在不刷新页面的情况下改变浏览器的URL和浏览历史。这在时间轴应用中非常有用,可以方便用户通过前进和后退按钮在不同的历史事件之间导航。关键API包括: 1. `history....

    html5参考手册 api.zip_Html5API

    11. **History API**:改进了页面历史管理,使得单页应用可以更好地控制浏览器的前进和后退功能。 12. **Media元素(Audio & Video)**:内建的audio和video元素简化了多媒体内容的集成,支持多种格式,如MP4、WebM...

    vuex-router history模式在IIS服务器上的配置方法.docx

    Vue.js 是一款流行的前端框架,它的路由管理库 vuex-router 提供了两种模式:hash 和 history。在这篇文章中,我们将重点讨论如何在 Internet Information Services (IIS) 服务器上配置 vue-router 的 history 模式...

    location和history对象

    值得注意的是,`history`对象还有一个`pushState()`方法和`replaceState()`方法,这是HTML5引入的History API的一部分,它们允许我们在不重新加载页面的情况下改变URL和页面状态,这对于实现单页应用(SPA)的无刷新...

    ajax与history

    为了改善用户体验,HTML5引入了一个新的API——History API,它包括`history.pushState`和`history.replaceState`两个方法,用于管理浏览器的历史记录。本文将详细介绍如何利用这些技术解决AJAX页面的前进后退问题。...

    Standard Calculator with History Using HTML,

    5. **展示历史**:在用户界面上显示历史记录,可能通过遍历存储的历史记录并将其添加到特定的HTML元素中来实现。 6. **用户交互**:提供清空历史、复制历史记录等额外功能,增强用户体验。 标签中的“js 游戏”可能...

    431套HTML5小游戏源码大合集 带网页导航

    这样的导航系统可能利用了HTML5的History API和Hashchange事件,实现页面无刷新的导航体验,同时保持URL的可书签性和分享性。 通过学习这些源码,开发者不仅可以提升自己的HTML5、CSS3和JavaScript技能,还可以了解...

Global site tag (gtag.js) - Google Analytics