Question

我有一个使用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，但我认为整个操作历史记录有点脏和不可靠。

我在思考正确的方向还是有更好的方法？

目前我的所有链接都只使用“＃”，以便在加载更多内容时弹回页面顶部，但我希望能够在可能的情况下返回。

任何帮助都会很棒。

Answer 1

浏览器可以正确地将标签保存到历史记录中。只需在此问题页面添加标签＃1，按Enter键，将其更改为＃2，按Enter键，将其更改为＃3，按Enter键。现在单击后退按钮，您将看到从＃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>

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

Answer 2

尝试使用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*/
  };

带有Hashtags的Popstate？

2 个答案: