Javascript 如何阻止<；a>；使用html5历史api加载新页面时的标记

我正在尝试在交换内容后更改url，遇到了阻止a标记加载新页面的问题。到目前为止，当您单击按钮时，它会在页面中加载请求的内容，但随后会加载存储请求内容的页面。有没有关于如何阻止这种情况并获得一个包含新内容和可共享的新url的网页的结果的建议

这是JS

function supports_history_api() {
return !!(window.history && history.pushState);
}

function swapText(href) {
var req = new XMLHttpRequest();
req.open("GET",
       "http://bonkmas.com/historytest/gallery/" +
         href.split("/").pop(),
       false);
req.send(null);
if (req.status == 200) {
document.getElementById("open-content").innerHTML = req.responseText;
setupHistoryClicks();
return true;
}
return false;
}

function addClicker(link) {
link.addEventListener("click", function(e) {
if (swapText(link.href)) {
  history.pushState(null, null, link.href);
  e.preventDefault();
}
}, true);
}

function setupHistoryClicks() {
  addClicker(document.getElementById("next-vid"));
  addClicker(document.getElementById("previous-vid"));
}

window.onload = function() {
if (!supports_history_api()) { return; }
 setupHistoryClicks();
 window.setTimeout(function() {
window.addEventListener("popstate", function(e) {
  swapText(location.pathname);
}, false);
}, 1);
}

---

这是因为您的范围被破坏， 在click listener中，您需要使用“this”来访问link元素。由于该异常，将不会执行以下所有代码

---

使用firebug或chrome developer工具调试代码，它们会在出现异常时停止/暂停。

点击“上一步”按钮可请求以下url：

http://bonkmas.com/historytest/gallery/previous.html

此url包含文本“OK”。然后插入此文本以代替按钮。然后，您的代码尝试与那些不再存在的按钮交互。调用

link.addEventListener（

其中

link

已不存在）会发生故障。由于您已将

e.preventDefault（）

放在该代码之后，因此永远不会到达该代码，并执行

a

标记的默认操作

这就是为什么通常最好将

e.preventDefault（）

放在代码的最顶端的原因

---

---

如果您看一看您试图模拟的示例，它请求的页面也包含按钮。这就是为什么代码会在每个请求中重新附加单击处理程序。您的页面不包含按钮，因此它会爆炸。

为什么不使用firebug或chrome dev工具等开发工具？！错误显而易见。在您的addC中Clicker函数您需要在eventListener回调中使用“this”而不是“link”。我使用chrome开发工具。这如何帮助我了解在这种特殊情况下发生了什么？当我单击“next video”按钮时，我得到一个链接为空的异常。也许您需要在“源”选项卡中设置Pause on uncaught exceptions（左下角左起第三个图标）。此解决方案起到了一半的作用。它为用户提供了新内容和新url。但一旦url刷新，页面就不再存在。如何让服务器将url识别为包含新内容的index.php页面的状态？