个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我有一个网站，它使用 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
我正在尝试使用 ajax 加载内容的 HTML5 历史记录 API。 我有一堆通过相关链接连接的测试页面。我有这个 JS，它处理对这些链接的点击。单击链接时，处理程序获取其 href 属性并将其传递给
我的主页上有一个图像列表，单击后我会触发 AJAX 请求以将内容加载到灯箱。我在它们之间也有分页。每次用户单击下一个或上一个箭头时，我都会使用 PushState 更改 URL，效果很好。我的后退按钮
我现在正在使用 jquery mobile。当用户点击该框时，它会显示一个额外的框。但是当用户在浏览器(或后退按钮)上强制返回时，在那一刻，第二个框应该隐藏，而不是返回上一个页面。 我已经设法通过 p
我尝试使用 popstate 函数，但出现错误:Uncaught RangeError: Maximum call stack size exceeded 一步一步: 第 1 步:我点击了 li。 a
我有一个网站，它使用 AJAX 将内容动态加载到 div 中。 执行此操作的链接是带有 href="#"的 anchor 和触发 AJAX 的 onclick 事件。 当我点击返回时，这会让我没有历史
以下代码应引起“1”警报，但实际上什么都不做。 window.onpopstate = function(event) { alert(event.state.a) } history.pushSta
我在使用“popstate”事件处理程序时遇到问题，这是我的代码: window.addEventListener("popstate", function (event){ if (even
我正在创建一个单页并使用 pushState 来更改地址。现在，如果我向后推，popstate 将被触发，我想为页面从当前位置滚动到最后一个位置设置动画。这当然有效，但页面会跳到顶部。 有谁知道如何防
我按照规范将所有代码放在 $(document).ready 中，但是我是否也应该将我的“popstate”监听器也放在这段代码的末尾？还是重要？ 最佳答案 这并不重要，因为它是一个事件，甚至可以在您
我正在使用 React 和 React router，我希望这样当用户位于网站的某些部分时会出现一个确认框，告诉他们如果离开页面，他们可能会失去一些进度。目前，我有一个 onbeforeunload
我正在尝试学习 History Web API，但在第一个障碍时就遇到了问题。 我能够使 history.pushState 正常工作，但 popstate 出现问题。在 AJAX 页面加载后第一次单
我在页面中间有一些链接，可以使用嵌套路由器更改其下方 Pane 中的内容。我与此问题相关的路线如下所示: const router = { mode: 'history', routes: [
我的 popstate 事件处理程序是这样定义的: window.addEventListener('popstate', function (ev) { alert('popstate');
我可以找到浏览器对 pushState 方法的支持，但我知道并非所有版本的浏览器实际上都在 popstate 事件中传递状态对象。如果浏览器支持 pushState，我可以指望它能够使用吗？ 最佳答案
已尝试使用 Below Code 但它没有破坏 Popstate Event。 请帮助我们完成示例，在该示例中我可以根据条件销毁 Popstate 事件。 history.pushState(null
我正在尝试创建一个网页，在单击导航链接时替换主 div 的内容。我已经能够实现 Pushstate 函数来替换 div 内容并非常轻松地更改 url 地址。当使用 popstate 函数单击后退/前进
我尝试了几种方法，看看是否可以创建一个跨浏览器解决方案来延迟 popstate 事件，但没有任何运气。 大家有什么想法或想法吗？ 下面显然不起作用，但有些效果: $(window).on('popst
在移动 SPA 应用程序中，我已覆盖默认返回行为以在页面之间切换。 // create history states history.pushState(-1, nul
我正在开发一个应用程序，它使用通过 添加到历史记录中的 View history.pushState() 函数 View 是表单中的不同步骤，用户可以在其中退回到之前的步骤并进行调整，但不能在不重新发
Here's what I'm working with 代码: set up window.onpopstate change hash show location.href 为什么单击 cha
我是一名优秀的程序员,十分优秀！