AJAX后退按钮历史[重复]答案

【问题标题】：AJAX back button history [duplicate]AJAX后退按钮历史[重复]
【发布时间】：2015-10-11 21:42:48
【问题描述】：

您好，在将此问题标记为重复之前，我想告诉您，我已经查看了所有可以帮助我的问题，但他们都没有。下面我有一个简单的例子，你的帮助会很明显。

示例： Index.html 页面提供了 3 个指向不同页面的链接，这些链接不是使用 href 而是使用 AJAX（不更改 URL）。在不刷新页面和不改变URL的情况下改变了div的内容。

问题：我无法跟踪历史记录，比如说我点击了第 2 页 -> 第 3 页 -> 第 2 页 -> 第 1 页现在，客户端想要返回上一页（div 内容）。这怎么可能。

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Back button/History Problem</title>
<style>
ul{
    list-style: none;
}
li{
    display: inline;    
}
</style>
</head>
<body>
<!-- Menu for links to pages -->
<div id="menu">
<ul>
    <li><a href="#" onclick="showPage('1')">Page 1</a></li>
    <li><a href="#" onclick="showPage('2')">Page 2</a></li>
    <li><a href="#" onclick="showPage('3')">Page 3</a></li>
</ul>
</div>
<!-- HTML page is  added without change in the URL address  -->
<div id="content"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
/* Loads html page by AJAX in the content div */
function showPage(page){
    $("#content").load("pages/page"+page+".html");
}
</script>
</body>
</html>

page1.html

<h1>Page 1</h1>

page2.html

<h2>Page 2</h2>

page3.html

<h3>Page 3</h3>

【问题讨论】：

标签： javascript jquery ajax history back-button

【解决方案1】：

我还没有尝试过这个插件https://rosspenman.com/pushstate-jquery/，但是对于我所读到的内容，这可能会对你有所帮助...如果它可以完成这项工作，请告诉我:)

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。
这是一个很好的建议......谢谢你......现在我不编辑我的答案，因为这个问题被标记为重复但我会在未来这样做:)