`

ajax 浏览器后退前进按钮功能实现

阅读更多
ajax 本身不支持 浏览器 前进 后退操作。

目前采用 rsh 来模拟通过设置window.location.hash属性的值来人工的改变DOM属性window.location。通过编辑这个属性的值,可以改变地址栏中的URL,还可以向网页游览历史记录中添加一条记录,但是页面并不会被重新加载,这主要是由于被改变的只有片段识别符,所谓的片段识别符是指URL中#之后的部分,由于网页游览历史中记录的都是不同的URL,所以,游览器的后退和前进按钮就通过改变window.location.hash的值在这些URL间进行导航。只要对window.location.hash保持监视,一旦它的值发生了改变,就会触发一个事件。用户的代码可以与这一事件建立连接,一旦该事件被触发,就可以根据被改变的片段识别符来加载内容。

下边是例子 demo
分享到:
评论

相关推荐

    基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题

    发现浏览器的刷新,后退,前进按钮失效。于是乎google了一下。发现了一些解决方法。其中一个jquery.hashchange.js的插件有的时候会失效,有的时候会造成页面多次请求。 换另外一个插件测试下,完美达到我的要求。 总...

    JavaScript不刷新实现浏览器的前进后退功能

    但是很多早先的AJAX应用是不支持浏览器的前进后退的,这导致了用户不管在网站里浏览到何处,一旦刷新就会立刻回到起初的位置,并且用户也无法通过浏览器的前进后退按钮来实现浏览历史的切换。 对于第一个问题,解决...

    结合Ajax进行PHP开发2:后退、前进和刷新

    “结合Ajax进行PHP开发”...这个堆栈以Web浏览器中的历史记录工具为蓝本,为该应用程序提供后退、前进和刷新按钮。在为应用程序建立历史堆栈的过程中,我们将依靠客户端技术,并将其直接与第1部分的代码结合在一起。

    解决浏览器记住ajax请求并能前进和后退问题

    在我们浏览不同网页的时候,我们可以通过浏览器的前进、后退键来去到我们前后访问过的页面。这都有一个共同点,就是 浏览器地址栏的地址改变了。浏览器自身维护了一个记录用户访问页面历史的栈,栈中记录了用户访问...

    formwizard:基于jQuery UI的jQuery插件,可将表单转换为多步向导。 与用于提交AJAX表单的jQuery表单插件,用于客户端验证的验证插件以及用于启用浏览器后退和前进按钮的BBQ插件集成在一起

    该插件通过与以下jQuery插件集成来支持AJAX表单提交,表单验证以及浏览器的后退和前进按钮: jQuery表单 jQuery验证 用法 显然,请确保具有正确的包含-该插件已通过以下版本进行了测试,但也应与较新的版本一起...

    结合AJAX的PHP开发之后退、前进和刷新

    可以在应用程序中添加 Web 浏览器上常见的后退、前进和刷新按钮来导航自定义的历史堆栈。为解决这一难题,我们确定了问题所在,创建了能应用于其他应用程序的可重用解决方案。我们没有直接在相册应用程序中建立历史...

    通过history解决ajax不支持前进/后退/刷新的问题

    现在前后端基本都是通过ajax实现前后端接口数据的交互,但是,ajax有个小小的劣势,即:不支持浏览器“后退”和“前进“键。 但是,现在我们可以通过H5的histroy属性 解决ajax在交互请求的这个小bug。 事件描述: H5...

    结合Ajax进行PHP开发,第2部分:后退、前进和刷新

    简介在浏览器中保存状态构建历史堆栈可重用的...这个堆栈以Web浏览器中的历史记录工具为蓝本,为该应用程序提供后退、前进和刷新按钮。 简介第1部分介绍了如何用Sajax、PHP和JavaScript开发基本的相册。在为应用程序

    AJAX 源码范例

    important提高属性优先级范例 13/13.2.2.html 利用URL存储状态信息 13/13.2.3.html 利用Hash参数解决刷新问题 13/13.2.4.html 解决浏览器的【前进】【后退】按钮失效问题 13/13.4.1.html ...

    jQuery与Ajax以及序列化

    •破坏浏览器前进和后退按钮的正常功能 •对搜索引擎的支持不足 •开发和调试工具的 缺乏 好吧,这些都是几年前的不足。技术的发展很快,这些不足也会慢慢弥补,起码现在调试Ajax并不难。 Ajax的核心是...

    前端面试知识点锦集(JavaScript篇)

    JavaScript部分 1、谈谈你对Ajax的理解?(概念、特点、作用) ...b、破坏浏览器“前进”、“后退”按钮的正常功能,可以通过简单的插件弥补 c、对搜索引擎的支持不足 2、说说你对延迟对象deferred的理

    jQuery+pjax简单示例汇总

    ajax缺点是破坏了浏览器的前进后退,因为ajax的请求不会留在历史记录中。pjax就不一样了,pjax被解释成ajax+pushState的封装,因为它把ajax的请求写入历史记录,并反映在地址栏,这样用户就能愉快地使用前进后退了。...

    ajaxify_rails:Rails gem 用于自动将内部链接转换为 ajax 链接,无需重新加载整页即可加载内容

    使用 html5 历史界面来更改 url 并使浏览器的后退和前进按钮与 Ajax 一起使用。 对于没有历史记录界面的浏览器(如 Internet Explorer 版本 <10),回退到基于哈希的 URL 方法。 基于哈希的 URL 和非哈希 URL ...

    速度极快的单页应用程序引擎Senna.js.zip

    单页应用(Single Page Application)越来越受web开发者欢迎,单页应用的体验可以...这样,你就可以再次使用浏览器的后退/前进按钮。官网地址:http://sennajs.com/github地址:https://github.com/liferay/senna.js

    pjax:pushState + ajax = pjax,一个轻量级的纯JavaScript pjax库,或仅用作ajax

    睡衣pushState + ajax = ... cache 错误的指定在按下“后退”或“前进”按钮时是否缓存页面条目以便更快地重新加载。 cacheTimeout 30000毫秒启用高速缓存时,这是丢弃高速缓存的条目之前的时间(以毫秒为单位); 这样

    jqm-pagination:用于触摸、鼠标和键盘的 jQuery Mobile 分页

    这是在 jQuery Mobile 的 Ajax 导航模型之上实现的,这意味着该插件与您浏览器的历史记录相关联,因此后退和前进按钮按预期工作!演示和文档这个插件需要 jQuery 和 jQuery Mobile。 虽然它不需要整个框架,我们...

    KODExplorer 芒果云-资源管理器

    - backspace后退截获浏览器事件,作为后退前一次访问的文件夹; - 搜索首字母不匹配问题 - 弹出层中的弹出层关闭,父窗口失去焦点问题。 - 代码中grunt部分代码拆分开,放到程序外面;提交到git、osc - 桌面:...

    XKCD Enhancer-crx插件

    漫画的编号被推送到浏览器的历史记录中,因此后退/前进按钮仍然可以正常工作,而不会触发任何页面加载。 现在也支持Home和End键。 无论如何,这对我来说是一个有趣的项目,以学习如何开发扩展,如果您有任何问题/...

Global site tag (gtag.js) - Google Analytics