用标签发送邮件

Popstate with Hashtags?

本文关键字:标签      更新时间:2023-09-26

我有一个使用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,但我认为整个操纵历史的事情有点肮脏和不可靠。

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

目前我所有的链接都使用"#",以便在加载更多内容时它会弹出到页面顶部,但我希望能够回到如果可能的话

浏览器正确保存标签到历史记录。只要在这个问题页面上添加标签#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>

请注意,旧的IE不支持onhashchange事件。如果你想要处理它,唯一的方法就是用setInterval定义计时器,并检查哈希是否相等。

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