Databases
StackOverflow2013
Postsdbo
POHow to stop an <a> tag from loading a new page with html5 history api
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to stop an <a> tag from loading a new page with html5 history api
    text
    copied!<p>I am trying out <a href="http://diveintohtml5.info/history.html" rel="nofollow">the history api</a> for changing the url after swapping out content and have run into an issue with stopping the a tags from loading a new page. So far, when you click a button, it loads the requested content within the page but then loads the page where the requested content is stored. Any suggestions about how to stop this and get a result of a webpage with new content and a fresh url that can be shared?</p> <p>Here's the JS. </p> <pre><code>function supports_history_api() { return !!(window.history &amp;&amp; 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); } </code></pre> <p><a href="http://bonkmas.com/historytest/" rel="nofollow">http://bonkmas.com/historytest/</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload