Comment arrêter une balise <a> de charger une nouvelle page avec l'historique html5 api

Question

J'essaie the history api pour changer l'URL après avoir échangé le contenu et ai rencontré un problème avec l'arrêt des balises a de charger une nouvelle page. Jusqu'à présent, lorsque vous cliquez sur un bouton, il charge le contenu demandé dans la page, puis charge la page sur laquelle le contenu demandé est stocké. Des suggestions sur la façon d'arrêter cela et obtenir un résultat d'une page Web avec un nouveau contenu et une nouvelle URL qui peut être partagée?

Voici le 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

Ceci est parce que votre champ est cassé, dans l'auditeur de clic, vous devez utiliser « ce » pour accéder à l'élément de liaison. En raison de l'exception tout le code suivant ne sera pas exécuté.

Utilisez les outils développeur Firebug ou de chrome pour déboguer votre code, ils frein/pause sur les exceptions.

Answer 2

Frapper le bouton précédent demande à l'adresse suivante:

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

Cette URL contient le texte "okokokok". Ce texte est ensuite inséré à la place des boutons. Ensuite, votre code essaie d'interagir avec ces boutons, qui n'existent plus. Appeler link.addEventListener( où link n'existe plus explose. Puisque vous avez placé e.preventDefault() après ce code, il n'est jamais atteint et l'action par défaut de la balise a est exécutée.

C'est la raison pour laquelle il est généralement préférable de placer e.preventDefault() en haut de votre code.

---

Si vous regardez l'exemple que vous essayez d'imiter; les pages qu'il demande contiennent également les boutons. C'est pourquoi le code rattache les gestionnaires de clic à chaque requête. Vos pages ne contiennent pas les boutons, de sorte qu'il explose.