`

jquery.history简单理解

阅读更多
jquery.history的简单理解

原理是利用形如 main#page 的 url #page 被浏览器认为是锚点 。
因此,当我们点击一个链接,这个链接改变页面的锚点部分,但是实际上当锚点变化时,页面不刷新,但却可以产生前进/后退的记录。

jQuery history plugin helps you to support back/forward buttons and bookmarks in your javascript applications.

You can store the application state into URL hash and restore the state from it.



Supported browsers支持的浏览器
Internet Explorer 6, 7, and 8+的Internet Explorer 6,7和8 +
Safari 4 and 5+的
Safari 4和5 +
Google Chrome 4+
谷歌浏览器4 +
This plugin is built on hashchange event , which is defined in HTML5 and supported in most modern browsers. Unless it is supported the plugin works on some fallback mechanisms:这个插件是在建立在hashchange事件上的 ,这个hashchange是定义在HTML5中并且被最新的浏览器所支持。除非是支持一些后备插件工程:

monitoring location.hash by setInterval (Safari 4)
监测的setInterval location.hash(Safari 4中)
iframe and setInterval (IE 6, 7, and compatibility mode on IE8)
iframe的和setInterval(即6,IE8的第7和兼容模式)


Known issues
已知问题
IE6, 7, and IE8 compatibility mode
在IE6,7和IE8的兼容模式
Back/forward button will not work if you refresh the page and the document is reloaded.
后退/前进按钮将不会工作,如果你刷新页面,该文件重新加载。
IE8 standards mode
IE8的标准模式
The current hash will not be recorded in the history if you update the URL hash by hand or loading bookmarks.
目前哈希将不会被记录在历史上,如果你用手或加载更新书签网址哈希。


其中的一些函数
$.historyLoad(hash);//其中就是判断各种浏览器,然后把hash加入到URL的锚点中。
$.historyInit(callback);//注意callback赋值给jQuery.historyCallback,然后再historyLoad中调用,jQuery.historyCallback(hash);
分享到:
评论

相关推荐

    jQuery+pjax简单示例汇总

    **jQuery + pjax 简单示例** `jQuery + pjax` 是一种结合了 `jQuery` 和 `PushState` 的技术,旨在提供快速且流畅的网页浏览体验,同时保持浏览器的前进、后退功能正常运作。`pjax` 通过 `Ajax` 请求加载页面内容并...

    jquery layer弹出层在线聊天工具代码

    首先,我们需要理解jQuery Layer的基本用法。Layer提供了一种简单的方法来创建弹出层,通过调用$.layer()函数,我们可以轻松地打开一个新的对话框。例如: ```javascript $.layer({ title: '在线聊天', type: 2, ...

    jQuery多个标签页面打开代码.zip

    首先,我们需要理解jQuery的核心概念。jQuery通过一种简洁的语法封装了DOM操作,如选择元素、添加样式、改变属性等。例如,`$("#elementId")`用于选取ID为"elementId"的元素,`.click(function() {...})`则为元素...

    jQuery pjax 应用简单示例

    下面我们将通过两个简单的示例来理解如何使用jQuery pjax。 **DEMO1**: 在这个例子中,我们使用HTML链接(`<a>`标签)触发pjax请求。当用户点击链接时,`$(document).pjax('a', '#container')`这行代码会被执行,`...

    router.js:Router.js是一个简单而强大的javascript库,用于处理路由

    不要定义自定义链接,RouterJS可以理解要处理的单击! :gear: 随处可见:对于浏览器而言,它也可以在本机应用程序或手表上运行,并加入您的引擎。 :lady_beetle: 输入安全。 RouterJS用Typescript编写,并经过全面...

    jquery 异步加载页面

    jQuery的`$.ajax()`或`$.get()`配合`history.pushState()`和`history.replaceState()`,可以在不刷新页面的情况下改变URL,实现类似传统导航的效果。 ### 6. 性能优化 为了提高异步加载的性能,我们可以考虑以下...

    jQuery手机端上拉刷新下拉加载更多页面是以html5进行开发的手机端列表刷新软件。

    在移动设备上,为了提供更好的用户体验,网页开发者经常需要实现上拉刷新(Pull-to-Refresh)和下拉加载更多...这个案例是一个很好的学习资源,可以帮助理解如何利用jQuery和HTML5特性来提升移动端网页的交互体验。

    jQuery实现页面点击后退弹出提示框的方法

    首先,我们需要理解浏览器的前进/后退历史(history)机制。当用户在网页间导航时,浏览器会记录这些页面的访问历史,允许用户通过点击后退或前进按钮来回切换。`popstate` 事件是浏览器提供的一个事件,它会在用户...

    浅析HTML5中的 History 模式

    以下是一个简单的HTML5 History模式示例,展示了如何使用jQuery实现路由功能: ```html <!DOCTYPE html> <!-- ... --> history.replaceState(null, "页面标题", "http://127.0.0.1:3000/lmw/0"); // 页面加载...

    backbone.js入门教程

    为了更好地理解 Backbone.js 的基本概念,我们可以从一个简单的 HelloWorld 应用程序开始。在这个例子中,我们将创建一个 Model 来表示“Hello World”消息,然后通过 View 渲染它到页面上。 1. **创建 Model**: ...

    jQuery文字记录搜索历史代码

    至此,我们已经使用jQuery和localStorage实现了一个简单的搜索历史记录功能。通过这个功能,用户不仅可以方便地回顾他们的搜索行为,还可以快速重复搜索,提升了使用体验。文件"jiaoben5810"可能是包含这个功能的源...

    jquery-spa-example:使用jQuery构建示例单页应用程序

    jQuery-SPA-Example是一个开源项目,旨在演示如何使用jQuery库来构建一个简单的单页应用程序(Single-Page Application,SPA)。这个项目对于那些想要学习或者理解如何在不使用现代前端框架的情况下,仅依赖jQuery...

    前端项目-urlive.zip

    项目基于jQuery,这是一个广泛使用的JavaScript库,提供了丰富的DOM操作、事件处理、动画效果等功能,使得JavaScript编程更加简单。 在前端项目中,URL预览通常用于帮助用户了解他们当前选择的参数或者路径会导向...

    backbone.js API文档 列子

    例如,一个简单的Backbone应用可能包括创建一个Model来表示数据,一个View来展示和交互,一个Collection来管理多个Model,一个Router来处理URL导航,以及一个启动应用的主入口文件。在实际开发中,你可能会结合其他...

    document.open() 与 [removed]()的区别

    然而,这两个方法有着显著的区别,理解它们的差异对于编写高效的前端代码至关重要。 首先,我们来详细解析`document.open()`。这个方法会打开一个新文档或者清空现有的文档,为新的内容提供一个空白的画布。如描述...

    动态页面学习目录

    1. 熟悉jQuery对象及其相关概念,理解它与原生JavaScript的区别。 2. 熟练使用jQuery选择器,如`#id`、`.class`、`input[name=""]`等,快速选取DOM元素。 3. 掌握jQuery事件处理,如`ready`、`click`、`change`等,...

    JavaScript笔记.pdf

    JavaScript 支持多种数据类型,主要包括基本数据类型(简单类型)和复杂数据类型(引用类型)。 1. **基本数据类型**:包括 `number`(数字)、`string`(字符串)、`boolean`(布尔值)、`null`(空值)、`...

Global site tag (gtag.js) - Google Analytics