Question

电贺，在将此问题标记为重复之前，我想告诉我，我已经查看了可以帮助我的所有问题，但他们都没有。我在下面有一个简单的例子，你的帮助会很明显。我是一个新手，我见过许多用于历史管理的jquery插件，但我无法实现。在我给出的例子中，你可以通过一些修改来指导我一些工作实例。

实施例： Index.html页面提供了指向不同页面的3个链接，这些链接不是用href指向，而是用AJAX指向。更新div的内容而不刷新页面。

问题：我无法追踪历史记录，说我点击了第2页 - ＆gt;第3页 - ＆gt;第2页 - ＆gt;第1页现在，客户想要回到上一页（div内容）。这怎么可能。

的index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Back button/History Problem</title>
</head>
<body>

<a href="#page1" onclick="showPage('1')" rel="tab">Page 1</a>
<a href="#page2" onclick="showPage('2')" rel="tab">Page 2</a>
<a href="#page3" onclick="showPage('3')" rel="tab">Page 3</a>

<!-- HTML page is  added without change in the URL address  -->
<div id="content"></div>

<!-- jQuery library -->
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script>
    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>

Answer 1

这是你的逻辑。希望这会有所帮助：

创建变量 var stack =[] ，添加所有在其中调用的页面。

创建一个函数historyReset：堆栈变量将重置回[]，因为用户在遍历所有后退后返回第1页。

创建一个函数historyBack：单击back时将调用该函数。在这个功能中：

获取Stack中的最高值。的 var stackTop = stack[stack.length - 1];

2

if(stackTop==undefined){ historyReset(); }else{ stack.pop(); // remove the top element from stack switch(stackTop){ case "page1": call page 1 break; case "page2": call page 1 break; case "page3": call page 1 break; } }

调用Ajax并将页面移动到其他页面时，请在堆栈中输入页面值。

var stackPage = 'page3'; stack.push(stackPage);

Answer 2

这很容易做到：只需添加历史记录管理......

以下是覆盖历史记录后退按钮的示例： override browser back button

使用这些你只需要一个自制数组，每当用户点击一个链接并加载一个页面时你就会填充这个数组 - 每当用户点击浏览器后退按钮时，你会在数组中看到加载的最后一页并重新加载该页面！

AJAX后退按钮内容历史记录

2 个答案: