`

history.js 一个无刷新就可改变浏览器栏地址的插件(不依赖jquery)

 
阅读更多
http://ourjs.com/detail/5507ed1b1e8c708516000007
示例: http://browserstate.github.io/history.js/demo/


简介

HTML4有一些对浏览历史的前进后退API的支持如:
window.history.back();
window.history.forward();
window.history.go(-1);
window.history.go(1);


HTML5浏览器新添加了不刷新改变网址地址的API:
var currentState = history.state;
var stateObj = { foo: "bar" };
window.history.pushState(stateObj, "page 2", "bar.html");


这些API构建单页面无刷新网站是十分有帮助的,很可惜他们在老浏览器中无法使用。history.js可以解决这个问题。


History.js优雅地支持所有浏览器的History/State的 API(pushState,replaceState,onPopState)。包括数据,title,replaceState。支持 jQuery,MooTools和Prototype。在HTML5浏览器,它使用原生API,可以直接修改URL,而无需再使用哈希值。对于HTML4 浏览器则使用Hash值进行兼容。

代码示例
(function(window,undefined){

    // Bind to StateChange Event
    History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
        var State = History.getState(); // Note: We are using History.getState() instead of event.state
    });

    // Change our States
    History.pushState({state:1}, "State 1", "?state=1"); // logs {state:1}, "State 1", "?state=1"
    History.pushState({state:2}, "State 2", "?state=2"); // logs {state:2}, "State 2", "?state=2"
    History.replaceState({state:3}, "State 3", "?state=3"); // logs {state:3}, "State 3", "?state=3"
    History.pushState(null, null, "?state=4"); // logs {}, '', "?state=4"
    History.back(); // logs {state:3}, "State 3", "?state=3"
    History.back(); // logs {state:1}, "State 1", "?state=1"
    History.back(); // logs {}, "Home Page", "?"
    History.go(2); // logs {state:3}, "State 3", "?state=3"

})(window);



效果
当在HTML5浏览器中时地址栏的变化
www.mysite.com
www.mysite.com/?state=1
www.mysite.com/?state=2
www.mysite.com/?state=3
www.mysite.com/?state=4
www.mysite.com/?state=3
www.mysite.com/?state=1
www.mysite.com
www.mysite.com/?state=3

当在HTML4浏览器中时地址栏的变化
www.mysite.com
www.mysite.com/#?state=1&_suid=1
www.mysite.com/#?state=2&_suid=2
www.mysite.com/#?state=3&_suid=3
www.mysite.com/#?state=4
www.mysite.com/#?state=3&_suid=3
www.mysite.com/#?state=1&_suid=1
www.mysite.com
www.mysite.com/#?state=3&_suid=3
分享到:
评论

相关推荐

    页面禁止各种浏览器后退.txt

    这些方法可以用来改变浏览器地址栏显示的URL,同时保持页面内容不变。这样做的好处是用户可以在不刷新页面的情况下,看到URL的变化,从而提升用户体验。 ##### 使用示例代码解析 给定的示例代码中,开发者使用了...

    Query插件pjax,修改pjax再次请求的时候部分js没有加载,它通过ajax和pushState技术提供了极速的(无刷新ajax加载)

    jQuery Pjax 是一个流行的JavaScript插件,它允许网页在不进行完全刷新的情况下更新内容,从而提供更快的用户体验。Pjax(PushState + Ajax)这个名字很好地概述了它的核心功能:结合了Ajax的异步数据获取和...

    pjax是对ajaxpushState的封装让你可以很方便的使用pushState技术

    5. 使用`history.pushState()`方法改变浏览器的URL,添加一个新的历史状态。 6. 如果请求失败或浏览器不支持Pjax,页面将正常跳转,保证兼容性和可用性。 **Pjax的优点**: 1. **更快的页面加载**:只需要加载部分...

    电脑音乐制作

    10. **Web UI和JavaScript库**:`chrome_webui_apis.js`可能涉及到Chrome浏览器的Web UI API,而`jquery.*.js`是jQuery库,一个广泛使用的JavaScript库,简化了DOM操作、事件处理和动画效果。 以上知识点涵盖了电脑...

    JQ路由的原理实现-全包

    jQuery Router 是jQuery生态系统中的一个插件,体现了jQuery的设计哲学——模块化和轻量化。它允许开发者在不依赖大型前端框架的情况下,实现路由功能。通过简单易用的API,开发者可以快速地为项目添加路由管理。 #...

    JavaWeb面试题

    JavaScript是Web开发中不可或缺的一部分,它是一种动态的脚本语言,能够在浏览器端执行各种操作。在JavaScript中,有几个常用的全局变量和全局方法是开发者必须掌握的,例如全局对象window,全局变量document、...

    使用Yii整合的pjax(pushstate+ajax)实现无刷新加载页面

    Pjax的核心在于history.pushState,这是一个HTML5的新特性,它允许我们在不重新加载页面的情况下改变URL,使得浏览器的历史记录能够跟踪用户的操作。通过这种方式,Pjax可以提供类似单页应用(SPA)的用户体验,提高...

    前端学科面试宝典面试题下载完整题目答案

    - **Node.js 核心**:Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,可以用来编写服务器端应用程序。 - **单线程优点**:Node.js 使用单线程模型处理 I/O 操作,避免了多线程同步带来的开销。 - **Node...

    AJAX FAQ for the Java Developer.doc

    对于希望在Java应用中加入AJAX功能的开发者而言,掌握一定程度的JavaScript知识几乎是必不可少的。这是因为AJAX的核心在于客户端的JavaScript,它负责与服务器进行异步通信并动态更新页面。虽然许多框架提供了简化...

    在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析

    在GitHub上,开发者已经就这个问题进行了讨论,但Pjax的作者拒绝使用`JQuery.getScript()`来解决,因为这个方法使用了`eval`,这与Content Security Policy(CSP)不兼容,可能导致安全风险。 Content Security ...

    backbone:初学者的脊梁

    Backbone.js 是一款轻量级的JavaScript库,它为构建复杂的Web应用提供了模型-视图-控制器(MVC)架构。作为一个初学者的脊梁,它帮助开发者组织代码,提高可维护性和可扩展性。本篇文章将深入探讨Backbone.js的基础...

    durandal-cart:用 durandal 创建的购物车

    这个名为 "durandal-cart" 的项目是一个使用 Durandal 框架创建的购物车示例,旨在展示如何在JavaScript环境中构建一个交互式的购物应用程序。 **Durandal 框架详解** Durandal 是由 Dean McNamee 和 Steve ...

Global site tag (gtag.js) - Google Analytics