Skip to content

Instantly share code, notes, and snippets.

@wireframe

wireframe/html5_push_state.js

Created September 8, 2012 00:42
Show Gist options
  • Save wireframe/3670973 to your computer and use it in GitHub Desktop.
Save wireframe/3670973 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. wireframe created this gist Sep 8, 2012.
    42 changes: 42 additions & 0 deletions html5_push_state.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,42 @@
    function supports_history_api() {
    return !!(window.history && history.pushState);
    }

    function swapPhoto(href) {
    var req = new XMLHttpRequest();
    req.open("GET",
    "http://diveintohtml5.org/examples/history/gallery/" +
    href.split("/").pop(),
    false);
    req.send(null);
    if (req.status == 200) {
    document.getElementById("gallery").innerHTML = req.responseText;
    setupHistoryClicks();
    return true;
    }
    return false;
    }

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

    function setupHistoryClicks() {
    addClicker(document.getElementById("photonext"));
    addClicker(document.getElementById("photoprev"));
    }

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