Question

我正在尝试the history api更换内容后更改网址，并遇到阻止加载新网页的问题的问题。到目前为止，当您单击按钮时，它会在页面中加载所请求的内容，但随后会加载存储所请求内容的页面。有关如何停止此操作以及获取包含新内容和可以共享的新网址的网页结果的任何建议吗？

这是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/

Answer 1

这是因为你的范围被破坏了，在单击侦听器中，您需要使用“this”来访问link元素。由于例外，以下所有代码都不会被执行。

使用firebug或chrome开发人员工具调试代码，他们会在例外情况下制动/暂停。

Answer 2

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

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

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

这就是为什么通常最好将e.preventDefault()置于代码的最顶层。

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

如何阻止<a> tag from loading a new page with html5 history api</a>

2 个答案: