如果javascript修改了页面A中的DOM,则用户导航到页面B,然后点击返回按钮返回页面A.对页面A的DOM的所有修改都将丢失,并且向用户显示最初从服务器检索的版本.
它在stackoverflow,reddit和许多其他流行的网站上以这种方式工作.(尝试在此问题中添加测试评论,然后导航到不同的页面并点击返回按钮返回 - 您的评论将"消失")
这是有道理的,但一些网站(apple.com,basecamphq.com等)在某种程度上迫使浏览器为用户提供最新的页面状态.(转到http://www.apple.com/ca/search/?q=ipod,单击顶部的"下载"链接,然后单击"返回"按钮 - 将保留所有DOM更新)
来自哪里的不一致？
我有一个搜索页面,其中每个搜索结果都添加到使用AJAX的页面.这样我可以让用户搜索例如Led Zeppelin,然后再搜索Metallica,但将其添加到与之前搜索相同的结果列表中.
我的问题是当用户点击记录的链接,然后点击后退按钮,返回到搜索结果.
FireFox(7)保留页面,就像我离开时一样,显示完整的结果.另一方面,
IE(7,8)和Chrome(15)将在使用AJAX添加任何搜索结果之前显示页面,就好像它不记得我向其添加数据一样.
以下是我使用的代码.我试图添加location.hash = "test";但它似乎没有用.
// Add search result
$("#searchForm").submit(function (event) {
//location.hash = "test";
event.preventDefault();
$.post($(this).attr('action'), $(this).serialize(),
function (data) {
$("tbody").append(data);
});
});
我不需要跟踪按钮来跟踪搜索页面上的更改,例如在添加时逐步浏览每个不同的搜索结果.我只想让浏览器在按下后退按钮时记住上次搜索结果.
已解决
改为document.location.hash = "latest search"没有改变任何东西.我不得不使用localStorage阿米尔指出的那个.
这将进入jQuery代码的其余部分:
// Replace the search result table on load.
if (('localStorage' in window) && window['localStorage'] !== null) {
if ('myTable' in localStorage && window.location.hash) {
$("#myTable").html(localStorage.getItem('myTable'));
}
}
// Save the search result …我正在开发一个Web应用程序,由于数据库访问速度慢,并非页面中的所有内容都是立即加载的,而是在用户在可选择进行选择后单击按钮时动态加载.
这很好用.但是,在动态加载内容后,如果我导航到不同的网页,然后导航回来,在Internet Explorer中,加载的内容将消失,即页面将恢复到最初检索的页面.然而,在Firefox(以及Opera)中,加载的内容仍然存在,即页面看起来就像我导航之前那样.
在我的情况下,Firefox的行为是理想的行为,因为用户会定期导航到子页面并返回主页面.因此,我的问题是,有什么方法可以强制Internet Explorer展示这种行为,还是有任何可能的解决方法来获得所需的结果？