用jquery的load方法通过ajax加载的页面，如何实现前进和后退？浏览器前进和后退功能失效了

发布网友 发布时间：2022-04-23 00:52

我来回答

共4个回答

懂视网 时间：2022-04-23 05:13

在我们浏览不同网页的时候，我们可以通过浏览器的前进、后退键来去到我们前后访问过的页面。这篇文章主要介绍了让浏览器记住ajax请求并能前进和后退方法,需要的朋友可以参考下

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

但是在开发中，我们经常会用到ajax技术去提升网页的用户体验。但是ajax本身并不改变浏览器地址栏中的url，是在同一个网页内部操作的，这时，浏览器并不会记录ajax请求的记录。在这种情况下，用户在一个页面触发的5次ajax请求后，点了后 退按钮，浏览器不会再次请求之前的ajax请求，而是返回了上一页。

解决这个问题的第一种方法就是利用location的hash值。当url的hash值改变时，页面并不会跳转，但是浏览器此时会将此带hash的url记录到历史记录中。利用这个特性，我们可以人为的模拟带历史记录功能的ajax请求。下面是这种方法的demo。

ul{
 margin:0;
 padding:0;
}
li{
 list-style: none;
 display: block;
 float: left;
 border: 1px solid #000;
 padding: 10px;
 margin-right: 20px;
 cursor: pointer;
}
li.active{
 background-color: #000000;
 color: #fff;
}
<ul>
 <li data-id="1">1</li>
 <li data-id="2">2</li>
</ul>

先创建两个按钮，点击按钮时，向服务器发送请求，并将data-id通过参数带到服务器，服务器返回对应data-id的结果。
于此同时，改变按钮状态，并将location的hash值改为data-id的值。最后监听location的hash值变化，重复上述步骤。

当我们点击按“1-2-1”这样的顺序点击按钮时，控制台的输出如下

此时我们连续按三次返回按钮，控制台输出如下

可见这样就模拟实现了浏览器记录ajax请求的功能。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

PHP登录（ajax提交数据和后台校验）

AJAX实现无刷新检测用户名功能

jQuery中通过ajax调用webservice传递数组参数的问题（图文教程）

热心网友 时间：2022-04-23 02:21

这个默认是不可能实现的。
因为jquery的load方法也是通过ajax进行加载的。
页面并没有进行跳转。浏览器上的url地址也没发生变化。
前进后退是起不到你想要的作用的。

对于这种纯粹ajax开发的web应用。
要实现这种效果，只能使用hash
hash指的就行url地址后面的#号以及后面的部分
利用onhashchange事件，检测到hash变化后。然后你再用js触发相应的变化。
从而实现页面间的路由。
但是onhashchange并不被所有浏览器支持，因此你需要针对不支持onhashchange事件的浏览器
自行实现。
具体内容，网上教程很多。

热心网友 时间：2022-04-23 03:39

ajax是局部刷新，不刷新整个页面的， 所以前进，后退，还有刷新几个按钮都会异常，
我以前是用插件解决的，你可以搜索下 jquery.history.js插件追问我知道是用这个插件，但jquery.history.js插件具体怎么使用呢？，我是将内容通过jquery的load方法加载的

追答真心没找到以前的代码，真不好意思。
不过这个插件不是对所有浏览器都适用的，ie6，ie7和ie8的兼容模式下就会有问题。
原理是利用形如 main#page 的 url #page 被浏览器认为是锚点 。
因此，当我们点击一个链接，这个链接改变页面的锚点部分，但是实际上当锚点变化时，页面不刷新，但却可以产生前进/后退的记录。

http://www.dotblogs.com.tw/grence/archive/2011/01/05/20594.aspx 这理由个实现的代码

不知道能不能对你有帮助。

热心网友 时间：2022-04-23 05:14

我可应很负责任的告诉你：ajax加载页面是无法实现浏览器前进和后退功能的，

因为你是直接通过jq 将当前页面的内容全给替换掉了，而页面并没有跳转。

不过不是所有事都是绝对的。告诉你一个比较笨但是有比较实用的方法。

就是通过iframe轻松解决问题。

首先，你的页面需要一个隐藏的iframe，且iframe的src对应的是一个任意的html，jsp都行。

当你ajax加载页面之前，用jq将当前的页面内容给加载到iframe中去，这个时候，你的iframe中的html元素，就是你当前页面的html元素没错把？这时候再加载你需要ajax加载的页面。注意，加载页面的时候千万不要把这个iframe给覆盖掉了。。。

再写一个键盘后退按键的js监控方法，当按下backspace的时候，将iframe的页面元素加载出来覆盖当前页面，在覆盖之前记得要把现在的页面元素覆盖到iframe中，因为你还有一个前进的操作

前进的操作也是大同小异，说白了就是父页面元素与iframe中的页面元素进行对换的操作

抱歉，语言组织能力有限，希望对你有所帮助，或者有所启发~！