Question

我一直在阅读有关history.pushState和popstate的信息，但对于一个主要填充了AJAX请求的网页（比如一个允许用户将商品添加到购物车的书店），是否有一个具有history对象或类似东西的函数，可以倒回这些添加内容吗？

以下示例更简单地表示了这一点。用户点击div并在相应的div中显示“已显示”。这些div下面是文字You have selected [detail]。这会在选择和触发popState以正确方式更改文本方面发生变化。

但是div仍然有“显示”。有没有办法按顺序删除它们，因为它们的添加类似于文本行的更改方式，或者我是否必须创建一个单独的函数来处理这个 - 这与添加“已显示”的函数相反到div？

我添加了一些我编辑过的功能来实现上述功能，但我不喜欢它的hacky。

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>

<div class='name'></div>
<div class='age'></div>
<div class='sex'></div>

<p>You have selected <span>no color</span></p>

</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>

<script>

$('div').on('click', function() {

var detail = $(this).attr('class');

showDetails(detail);
doPushState(detail);

});

function showDetails(detail) {
var classDeets = '.'+detail

$(classDeets).text("Showing " + detail);
$('p span').text(detail);

}

function doPushState(detail) {

var state = { selected : detail },
  title = "Page title",
  path = "/" + detail;

  history.pushState(state, title, path);
}

function removeDetails(detail) {

var classDeets = '.'+detail

$(classDeets).text("");
}

function checkState(detail) {

var temp = document.getElementsByClassName(detail)[0].innerHTML;

if(temp.length == 0){
  showDetails(detail);
}
else{
  removeDetails(detail);

 }

}

$(window).on('popstate', function(event) {

var state = event.originalEvent.state;

if (state) {
  checkState(state.selected);
}
});

</script>

Answer 1

我不确定您的用例是什么，但我立即想到了我所做的ajax加载报告和列表页面。我在“＃”之后编码报告的选项。它使浏览器按钮按预期工作，以更新基于URL，并使其可以链接到其他人。然后，您只需轮询#coded数据以检测更改并相应地更新。由于您使用＃（在页面链接中），因此不会触发向服务器加载页面。您只需确保如果使用编码哈希数据，则不使用页内链接进行页面导航。如果这听起来像一个选项，请告诉我，我可以发布一些帮助代码进行设置。

Answer 2

如果没有更多上下文，重写代码很难。也就是说，您需要使用history.replaceState()代替history.pushState()。

history.replaceState() 修改历史记录条目的状态。 From MDN：＆＃34; replaceState()在您想要更新当前历史记录条目的状态对象或网址以响应某些用户操作时特别有用。＆＃34;

AJAX后退按钮

2 个答案: