加载带有书签和后退/前进支持的页面

Question

我正在制作一个在多个目录下有多个不同页面的网页。

目前的设置方式是有一个主页A。

在页面 A 上有一个菜单可以链接到其他页面。这些页面使用 AJAX 加载到页面 A 上的 div 中。

我目前正在尝试这样做，以便用户可以使用他们选择的已加载菜单中的当前内容为页面添加书签。我通过创建一个 GET 变量并发布页面“目录/名称”来做到这一点。但现在的问题是让用户可以按浏览器上的后退按钮，提供与未像这样加载的页面相同的功能。

是否有某种方式可以使用返回功能来获取以前的页面并加载它们？我知道最简单的方法是忘记加载页面，它可以很好地解决所有问题，但是在这一点上，我很好奇解决方法。

正在使用 Javascript，但未使用 jQuery 库。

干杯。

编辑：添加基本代码功能。

<div id="content">
<p>Hello</p>
</div>

<p onclick="load('dir/file')">Link1</p>
<p onclick="load('dir/file')">Link2</p>

<script>
window.onbeforeunload = function() {
 load(getVar("page"));
}
function getVar (name) {
     name = RegExp ('[?&]' + name.replace (/([[\]])/, '\\$1') + '=([^&#]*)');
     return (window.location.href.match (name) || ['', ''])[1];
}
function load(val) {
    loadPage(val+".html", "content");  //This just does an ajax call and puts the content into the second value.
    window.history.pushState({},"IBM","https://labweb.torolab.ibm.com/groups/websphere/WASL3/l3_new/index.php?page="+val);
}
</script>

我认为这是它的基本功能。

Answer 1

我想你问的是哈希标签浏览。

jquery javascript: adding browser history back with hashtag?。

此示例使用 jquery，但您所要做的就是在单击链接以更新页面时放置一个事件，听起来您已经拥有类似的东西。

Change the URL in the browser without loading the new page using JavaScript

此示例让您更好地了解仅使用 Javascript 会做什么。

现在，当他们使用书签加载页面时，这将不会，因为没有浏览器历史记录，但在使用您的页面时会起作用。

<a href="#hashtag" class="loadpage" data-page="directory/name">