Backbone.history: deep urls are not falling backing properly in IE

Question

In my single-page backbone app, I'm having trouble getting my longer urls to route properly in IE. Any urls that are nested more than one level, don't receive the proper hash fallbak when loading them directly.

top-level urls work fine...

when I load: domain.com/resource
in IE I get: domain.com/#resource (as expected)

navigating (in-app) works fine...

when I click on a link to: domain.com/resource/12345
IE sends me to: domain.com/#resource/12345 (as expected)

but accessing deeper urls directly breaks the page

when I load: domain.com/resource/12345
in IE I get: domain.com/resource/12345 !! this is incorrect, and the page doesn't load

UPDATE:

This is IE9

Answer 1

I'm not sure if you've changed anything on your staging in the last 3 hours, but the problems I'm observing are related to this problem

IE doesn't support relative paths in the base element when referencing CSS files

When your page requests http://stage.change4cancer.org/profile/647955793, it gets actual html for the page. Now whether or not it's supposed to redirect to #profile/647955793 is another matter (why you'd want to do that after you've already loaded the content, I'm not sure), but let me explain.

In that html from http://stage.change4cancer.org/profile/647955793 you have the following tag:

<base href="/" />

But IE9 will not respect that tag unless it has a full URI. Therefore, all the paths to the JS, CSS, etc are wrong. Instead of

http://stage.change4cancer.org/js/libs/backbone-0.9.2.min.js

it's requesting

http://stage.change4cancer.org/profile/js/libs/backbone-0.9.2.min.js

Which actually returns yet another html page of some sort

Since none of of your external JS is loading, of course things are going to go wrong.

Answer 2

try this:

Backbone.history.start({ pushState: Modernizr.history, silent: true });
if(!Modernizr.history) {
    var rootLength = Backbone.history.options.root.length;
    var fragment = window.location.pathname.substr(rootLength);
    var search = window.location.search;
    Backbone.history.navigate('/#' + fragment + search, { trigger: true });
} else {
    Backbone.history.loadUrl(Backbone.history.getFragment())
}