个人中心
gpt4 book ai didi

javascript - 带有标签的 Popstate？

转载 作者：行者123 更新时间：2023-11-28 09:12:19 27 4
gpt4 key购买 nike

我有一个网站，它使用 AJAX 将内容动态加载到 div 中。

执行此操作的链接是带有 href="#"的 anchor 和触发 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 添加到此问题页面，按 Enter 键，将其更改为 #2，按 Enter 键，将其更改为 #3，按 Enter 键。现在单击后退按钮，您将看到哈希值从#3 更改为#2。我建议仅在链接点击时更改哈希本身，并对页面哈希更改和页面加载事件使用react。

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 定义计时器并检查哈希值是否相等。

关于javascript - 带有标签的 Popstate？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16146034/

27 4 0
文章推荐： css - Ionic Modal 底部间距
文章推荐： CSS Animate SVG 笔画停在最后一帧
文章推荐： javascript - Kendo 图表中带有系列破折号类型的图例
文章推荐： javascript - 正则表达式和 unicode