Javascript 用Hashtags的Popstate？_Javascript_Html_Ajax

Javascript 用Hashtags的Popstate？

javascript html ajax

Javascript 用Hashtags的Popstate？,javascript,html,ajax,Javascript,Html,Ajax,我有一个使用AJAX将内容动态加载到div的站点这样做的链接是带有href=“#”的锚和触发AJAX的onclick事件这使得我在单击“上一步”时没有历史记录，因此，如果我加载一个页面，然后加载另一个页面并单击“上一步”，它将什么也不做代码的基本版本如下： <script type="text/javascript"> function loadXMLDoc(url) {  } </script>

我有一个使用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>


函数loadXMLDoc（url）
{
}

我想知道的是，我是否可以给每个链接一个不同的“#”，然后使用popstate处理程序调用相应的事件，因此，如果我单击链接1、2和3，然后开始单击后退按钮，它将返回到2，然后是1等等

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

我的想法是对的还是有更好的方法

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

任何帮助都会很好。

浏览器会正确地将标签保存到历史记录中。只需将标签#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>

函数react（）{
var hash=window.location.hash.replace（“#”，”）；
loadXMLDoc（hash+“.txt”）；
};
document.body.onload=函数（）{
反应（）；
window.onhashchange=react；
};

请注意，旧IE不支持

onhashchange

事件。如果您想处理它，唯一的方法是使用setInterval定义计时器并检查哈希相等性。

尝试结合使用LocalStorage和HistoryAPI。加载XMLDoc时，将其存储在LocatStorage中，当按下back时，从存储器加载数据，而不是从web加载数据。上面的位代码

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

function yourHandleBackFunction(renderTs) {
      /*Check TS and load from localStorage if needed*/
  };

好主意，谢谢！为自己找到了一些有趣的东西。但是，从每个背面获取数据并不是完美的做法。从性能角度来看，将其存储在某个地方（SessionStorage或LocalStorage）更好。没错，如果数据不经常更改，缓存是个好主意。浏览器已经实现了缓存，如果处理得当，它对通过AJAX加载的文档的工作方式与“正常”相同加载的文档。谢谢Tommi:-）正是我要找的那种东西。我已经知道它可以保存哈希，但我正在寻找正确的处理程序。不知道发生了onhashchange事件。我已经多年没有做过任何编码了。我曾经使用iframe，所以历史处理从来都不是问题，但我从来没有真正喜欢iframe，所以这次我改为动态加载到div。它给了我一个很好的干净的布局，但还有一大堆其他的事情要考虑！我想我应该问问这里的伙计们，因为你们看起来都很友好，知识渊博。再次感谢^谢谢德米特里：-）优化一直是我想记住的事情。