1

我有一个使用 AJAX 将内容动态加载到 div 的站点。

这样做的链接是带有 href="#" 的锚点和触发 AJAX 的 onclick 事件。

当我单击返回时，这使我没有历史记录，因此，如果我加载一个页面，然后再加载另一个页面并单击返回，它什么也不做。

代码的基本版本是这样的：

<script type="text/javascript">
function loadXMLDoc(url)
{
<!-- Load XML Script here. -->
}
</script>

</head>

<body>

<div id="myDiv">

<!-- Target div. -->

</div>

<a href="#1" onclick="loadXMLDoc('1.txt')">Click Me.</a>

<a href="#2" onclick="loadXMLDoc('2.txt')">Click Me.</a>

<a href="#3" onclick="loadXMLDoc('3.txt')">Click Me.</a>

</body>

我想知道的是，我可以给每个链接一个不同的“#”，然后使用 popstate 处理程序来调用适当的事件，所以如果我点击链接 1、2 和 3，然后开始点击后退按钮，它'会回到 2 然后 1 等等..

我打算使用 history.js 并开始在 loadXML 脚本中使用 pushstate，但我认为整个操纵历史的事情有点肮脏和不可靠。

我在想正确的路线还是有更好的方法？

目前我所有的链接都只使用“#”，以便在加载更多内容时它会弹回页面顶部，但如果可能的话，我希望能够返回。

任何帮助都会很棒。

4

2 回答 2

0

浏览器将主题标签正确保存到历史记录。只需将主题标签#1 添加到此问题页面，按回车键，将其更改为＃2，按回车键，将其更改为＃3，按回车键。现在单击返回按钮，您将看到哈希值从 #3 变为 #2。我建议仅在链接单击时更改哈希本身，并对页面哈希更改和页面加载事件做出反应。

function react() {
    var hash = window.location.hash.replace("#", "");
    loadXMLDoc(hash + ".txt");
};

document.body.onload = function() {
    react();
    window.onhashchange = react;    
};

<a href="#1">Click me</a>
<a href="#2">Click me</a>
<a href="#3">Click me</a>

请注意，onhashchange旧 IE 不支持该事件。如果您愿意，唯一的处理方法是使用 setInterval 定义计时器并检查哈希是否相等。

于 2013-04-22T11:40:28.050 回答
0

尝试结合使用 LocalStorage 和 HistoryAPI。当您加载 XMLDoc 时，将其存储在 LocatStorage 中，当按下返回时 - 从存储加载数据，而不是从 Web 加载数据。上面一点代码。

 /* Handling history.back added */
    window.onpopstate = function(event) {
      yourHandleBackFunction(event.state);
    };

function yourHandleBackFunction(renderTs) {
      /*Check TS and load from localStorage if needed*/
  };
于 2013-04-22T11:41:17.447 回答