pushState/popstate test

Test to determine whether browsers update window.location correctly when pushState and popstate are used.

by rgrove

HTML

<button id="push">pushState</button>
<button id="get">Get Location</button>

<p>
    <strong>last url pushed:</strong> <span id="urlLabel"></span><br>
    <strong>location.pathname:</strong> <span id="pathLabel"></span>
</p>

<p>
    Click the 'pushState' button above. You should see both your browser's location bar and the location.pathname label update with the URL indicated in the 'last url pushed' label.
</p>

<p>
    Now click the browser's back button. The location.pathname label should update again, and should still match the browser's location bar.
</p>

JavaScript

var pathEl = document.getElementById('pathLabel'),
    urlEl  = document.getElementById('urlLabel');

function get() {
    pathEl.innerHTML = window.location.pathname;
}

function push() {
    var url = '/foo/' + Date.now();

    history.pushState({}, null, url);
    urlEl.innerHTML = url;
    setTimeout(get, 1);
}

document.getElementById('get').addEventListener('click', get, false);
document.getElementById('push').addEventListener('click', push, false);

window.addEventListener('popstate', function () {
    setTimeout(get, 1);
}, false);