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

最新推荐文章于 2024-10-04 08:00:00 发布
原创 最新推荐文章于 2024-10-04 08:00:00 发布 · 448 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#浏览器 #Ajax

本文介绍如何利用window.location.hash属性的变化来实现浏览器的前进后退功能。通过监听hash值变化，可以在不重新加载页面的情况下更新内容，从而创建流畅的单页应用体验。
ajax 本身不支持 浏览器 前进 后退操作。

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

下边是例子 demo
dhtmlHistory.js实现ajax前进、后退
10-07
dhtmlHistory.js在Firefox下应用是没有问题的,但在ie下会有问题,主要原因是它不能脱离一个服务器环境,需要布置到一个真实的服务器下才能使用: 把 dhtmlHistory.js beat.html blank.html三个文件放到 C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\docs 服务器下,启动服务器,在ie地址栏下输入: http://localhost:8080/docs/beta.html#4p 可看测试结果.
开发保留标准的浏览器功能的AJAX应用
软件的信雅达
02-19 3631
                                               开发保留标准的浏览器功能的AJAX应用                                                                                   作者：Mark Schiefelbein 摘要AJAX应用因为它们的表现力的丰富、更加
关于在 AJAX 中实现“后退功能”.
2onlineService
12-16 998
在 AJAX 环境中实现后退功能。/*Code by Redsos使用变量存储的手法。在提交内容前使用：        var  tempContent = document.getElementById(obj).innerHTML;优点是回退比较快。表单里填写的内容可保留下来.Sample Code , 在想回退的地方加上  javascript:iReturn() 就行了。若想刷新后内容还存
让Ajax网页带有后退功能
leisky的专栏
06-16 3376
在AJAX做了一个项目后，测试人员告诉我，新闻列表翻了很多页后，当查看过一条新闻的详细信息返回目录的时候，不能返回到已经翻过的页码，而要从第一页重新翻，这样很郁闷。网上面找到一篇的文章，按照里面的介绍，把响应的代码节选出来，保留在这里。我实现原理是：每翻一次页，把当前的页码存入碎url的碎片标识中，待客户查看完详细信息后返回到目录，在目录的body的onload事件执行setOptionVal
JavaScript不刷新实现浏览器的前进后退功能
10-25
首先，HTML5通过History API提供了history对象，该对象允许我们操作浏览器的历史记录，即使在AJAX应用中也可以实现前进和后退的功能。History对象的属性和方法主要包括： 1. `length`属性：它返回浏览器历史记录中...
javascript怎么禁用浏览器后退按钮
10-26
接下来将详细介绍如何使用JavaScript禁用浏览器后退按钮。 1. 使用`window.history.forward(1);`方法 通过执行`window.history.forward(1);`命令，可以使浏览器窗口的浏览历史记录前进一页，相当于模拟用户点击了...
AJAX 网页保留浏览器前进后退等功能
09-05
通过上述方法，我们可以在使用AJAX技术的同时，确保浏览器的前进、后退、刷新等功能正常工作，从而提高用户的浏览体验。这种方法不仅适用于带有多个Tab的页面，还可以扩展到其他依赖AJAX更新内容的场景，如滚动加载...
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能，页面刷新功能实效问题
12-03
在网页开发中，使用Ajax进行异步数据交互可以提供流畅的用户体验，但随之而来的问题是，当用户点击浏览器的刷新、后退或前进按钮时，由于页面没有整体刷新，Ajax请求加载的内容不会重新显示，导致浏览器的历史记录和...
ajax前进后退问题
分布式成长
02-12 483
随着ajax的“大爆炸”，跟web带来了活力，但也带来了一下新的问题，比如下面将要讨论的“浏览器前进后退”的问题，由于局部刷新，url不变，浏览器感知不到“变化”，无法使用前进后退按钮。   解决问题之前       浏览器是如何记录访问历史并实现前进与后退的？   通常我们看到的浏览器地址栏URL的变化会被浏览器记录下来，还有页面中iframe子页面的地址变化也也会被浏览器记录， ...
关于ajax支持浏览器后退前进的做法
poplau的专栏
04-23 1899
Ajax七宗罪第五宗里面，作者讽刺Ajax需要一个“没有back和history的浏览器”。很讽刺吗？只是作者这么想罢了。至少要让Ajax应用支持Forward和Back，并不需要什么了不起的技术，我们也不需要这样的浏览器来改变用户习惯，事实上我们完全能做到让Forward和Back更酷。  这是一个示范页面：  index.htm       请在此处输入      historyFrame.h
Ajax加载与点击浏览器后退按钮 回退
TaiJi1985的专栏
02-09 3589
缘起 在开发一个应用系统特别是做后台管理系统的时候，每次刷新全部页面即浪费流量，又消耗服务器资源、还会让界面闪动，用户体验不好，这是为什么要使用Ajax的原因。 而使用了Ajax后，发现使用浏览器的后退键不管用了。这很不方便，这就需要使用html5提供的history功能。 思路 ajax加载 这用jquery很简单，看代码 $("#mycontent").load(ur...
AJAX的刷新和前进后退问题解决
weixin_30768661的博客
10-08 118
使用AJAX开发分页功能的时候，用户跳转到第5页，但是刷新以后又显示第一页了，能不能刷新后还显示第5页？还有能不能用浏览器的前进后退按钮来浏览AJAX历次的变化。 因为Javascript对dom的操作是不持久化的，刷新后就恢复原状，而且也不保存历史记录，也就无法前进后退来查看历史了。但是可以采用“地址栏加hash”技术来解决。 地址栏中敲入“页面地址#aaa”就表示跳转到“页面地址 ...
JS | 如何解决ajax无法后退的问题?
最新发布
青春木鱼的博客
10-04 980
Ajax请求通常被设计为无需后退的，因为它们是异步的，不会导致页面刷新。但如果你想要用户能够通过浏览器的后退按钮回到之前的页面状态，你需要考虑以下几种方法。①使用同步请求：这样用户就可以点击后退按钮回到之前的页面，但这样会阻碍用户体验。②使用局部刷新：在Ajax请求成功后，手动更新页面的部分内容，而不是替换整个页面。这样用户点击后退按钮时，可以回到前一个页面状态。③使用pushState和replaceState API：这两个HTML5的History API可以改变浏览器地址栏而不重新加载页面。
面试中AJAX常见问题
不务正业随手记
07-22 305
什么是AJAX，为什么要使用Ajax AJAX是“Asynchronous JavaScript and XML”的缩写。他是指一种创建交互式网页应用的网页开发技术。、 客户端与服务器，可以在【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术 AJAX应用和传统Web应用有什么不同？ AJAX应用和传统Web应用有什么不同？ 传统的web前端与后端的交互中，浏览器直接访问Tomcat的Se...
AJAX常见面试题
weixin_46100406的博客
01-07 5861
1:什么是ajax？ajax作用是什么？ • AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 是一种用于创建快速动态网页的技术 • AJAX可以在不刷新整个浏览器页面的情况下，通过与服务器进行少量数据交换，对网页的某一部分进行更新 • 用于在Web页面中实现异步数据交互，实现页面局部刷新。 • XMLH...
Ajax的缺点是什么
Boogie
12-10 351
ajax不支持浏览器back按钮 安全问题。ajax暴露了与服务器交互的细节。 对搜索引擎的支持比较弱。 破坏了程序的异常机制。 不容易调试
Ajax问题集锦
weixin_48610566的博客
08-21 290
面试系列
AJAX工作原理及其优缺点
weixin_33979203的博客
06-15 1005
1.什么是AJAX?AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。它使用：使用XHTML+CSS来标准化呈现；使用XML和XSLT进行数据交换及相关操作；使用XMLHttpRequest对象与Web服务器进行异步数据通信； 使用Javascript操作Document Object Mo...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值