Page refresh goes back to home page when using History.js in ie9 and below

Question

I've built a site that uses the History.js plugin to navigate from page to page with AJAX and update the URL accordingly. All works well except in IE; when you refresh the page it essentially loads the content from the first page you came to, not the current pages content. In "decent" browsers it doesn't load the content from any page, it just loads the entire page for that URL, which is what I IE should do.

I'm thinking it doesn't understand what to do with the hash. If you visit http://www.crownacre.voyced.com/contact-us/ it works fine, but when you visit http://www.crownacre.voyced.com/#contact-us/ (with the hash) it doesn't.

I've attempted to redirect the page if it detects a # in the pathname, but there is no way of detecting this as window.location.pathname and History.getHash() returns the path without any hash.

Any suggestions? I've seen a few websites using this plugin that have the same problem, and similar issues on here, but no solution.

Thanks in advance!

Answer 1

I ran into the same problem in my rewrite of tarheelreader.org. I'm using History.js and it is working fine except for the refresh issue in IE8. This hack is working for me.

In my startup code that only runs on initial page load I do:

var url = window.location.href;
if (url.indexOf('#') > -1) {
    // ie refresh hack
    controller.stateChange();
}

where controller.stateChange() is the state change handler I use for all History changes.

function stateChange() {
    // handle changes in the URL
    var hist = History.getState(),
        url = hist.url,
        context = hist.data;
    renderUrl(url, context).then(function(title) {
        document.title = title;
    });
}

You can see all the code in main.js and controller.js at https://github.com/gbishop/TarHeelReaderTheme

Edit Further exploration has lead to a case where History.js uses the initial URL instead of the root. This hack seems to handle that case.

function stateChange() {
    // handle changes in the URL
    var hist = History.getState(),
        url = hist.url,
        bar = window.location.href,
        context = hist.data;
    //console.log("State changed...", url, context);
    if (url != bar && bar.indexOf('#') > -1) {
        //console.log('bar = ', bar);
        // I think we only get here in IE8
        // hack for hash mode urls
        var root = History.getRootUrl(),
            hashIndex = bar.indexOf('#');
        if (root != bar.slice(0, hashIndex)) {
            // try to fix the url
            url = root + bar.slice(hashIndex);
            //console.log('new url =', url);
            window.location.href = url;
        }
    }
    renderUrl(url, context).then(function(title) {
        document.title = title;
    });
}

Answer 2

This worked for me:

<script>
    var url = new String(document.location);
    if (url.indexOf("#") > -1) {
        alert("There is a Hash in the path");
    }
</script>

Edit:

function LocationTest()
{
    var loc = window.location;
    alert(loc.href);
    alert(loc.protocol + "//" + loc.host + loc.pathname + loc.search + loc.hash);
    alert(loc.href == loc.protocol + "//" + loc.host + loc.pathname + loc.search + loc.hash);
}

Sample Source: window.location explained