0

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

这是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);
}

http://bonkmas.com/historytest/

4

2 回答 2

1

点击上一个按钮请求以下网址：

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

此网址包含文本“okokokok”。然后插入此文本以代替按钮。然后您的代码尝试与那些不再存在的按钮进行交互。link.addEventListener(在link不再存在的地方调用会爆炸。由于您已放置e.preventDefault()在此代码之后，因此永远不会到达并a执行标签的默认操作。

这就是为什么e.preventDefault()将代码放在代码的最顶部通常是个好主意的原因。

如果您查看您尝试模仿的示例；它请求的页面也包含按钮。这就是代码为每个请求重新附加点击处理程序的原因。您的页面不包含按钮，因此它会爆炸。

于 2013-05-03T03:45:54.590 回答
1

这是因为您的范围已损坏，在单击侦听器中，您需要使用“this”来访问链接元素。由于异常，以下所有代码都不会被执行。

使用 firebug 或 chrome 开发人员工具来调试您的代码，它们会在异常时停止/暂停。

于 2013-05-03T02:44:58.677 回答