Backbone.js cause bug only in IE7

Question

I'm developping a web app with CodeIgniter on back-end and Backbone.js on front-end. I'm also using HTML5 Boilerplate as my start template.

I'm using Backbone's Controller and History as main navigation through my application. I've done it one time in the past and everything have work fine. The problem is, when i start hashchange event capture with Backbone.History.start() and click on a link example.com/#home, the hash change in the url, the event is fired but 2 seconds after, the hash is cleared from url and an javascript error is throw only in ie7.

I've take a look at source code and hashchange event is acheived in IE7 by creating an IFRAME running an interval to check hash value change.

Anyone had this weird bug before and know how to solve this?

score 4 · Accepted Answer · answered Feb 15 '11 at 15:38

4

The right way to handle an #hash base application with Backbone seems to Backbone.history.saveLocation( hash ) and after Backbone.history.loadUrl() to enable Controller's routing.

Whish i knew this before... Have fun with this awesome MVC library :)

answered Feb 15 '11 at 15:38

Dominic Mercier

808
2
9
17

`Backbone.history.start()` works correctly except for IE7. It seems that IE7 doesn't trigger a `hashchange` event. In my case I used [`Modernizr.hashchange`](http://www.modernizr.com/docs/#hashchange) to check first if it's supported. If not, I'll use `.saveLocation()` and `.loadUrl()`. – Shiki Mar 08 '11 at 06:17

score 3 · Answer 2 · answered May 31 '11 at 21:21

The solution that I found to work was to use Ben Alman's hashchange plugin. Go to the start function in Backbone.History and replace the code of the start function with this.

start : function() {
    $(window).hashchange(this.checkUrl);
    return this.loadUrl();
}

And be sure to include the hashchange plugin file in your code.

score 2 · Answer 3 · answered Feb 14 '11 at 14:14

2

Clicking on a hash-URL does not actually save a history entry in IE -- use Backbone's saveLocation function to drop a marker of a location you want to be able to go back to. For the full scoop, see:

http://documentcloud.github.com/backbone/#Controller-saveLocation

answered Feb 14 '11 at 14:14

jashkenas

3,377
24
16

1

Unfortunately, Backbone's saveLocation doesn't trigger hashchange event and my whole application needs this feature. I'm having this error in IE debug console `SCRIPT1014: Invalid character javascript:0,line 1 character 2;` which seem to be related to IE invisible IFRAME. Any ideas how to fix it? – Dominic Mercier Feb 14 '11 at 15:27
I've test another Backbone.js tutorial that make use of Backbone's history and the same problem occur in IE7. Here is the URL of the demo made by Elf Sternberg [link](http://clients.dominic-mercier.com/backbone/). As you can see, when you click on an item, the hash change to #item/c1 and change back to # after 50 ms (which is the interval frame checking the hash change). Maybe we both use wrong Backbone's history? Can you provide some real case usage? – Dominic Mercier Feb 14 '11 at 17:20
The problem is that the behavior in ie7 is completely different from other browser. The hash tag is not loaded on page load, the hash tag is not saved in the history automatically after a change like in other browsers. I guess this need to be addressed in the future so that all browsers behave the same. – Julien Mar 18 '11 at 16:49

score 1 · Answer 4 · answered Apr 28 '11 at 09:14

I found a solution for this problem from Jon Leighton in the offical issue list: https://github.com/documentcloud/backbone/issues/228

Until an offical patch add this to the backbone.js (line 689 in Backbone 0.3.3)

this.iframe.document.open().close(); 
this.iframe.location.hash = window.location.hash;

after the following line:

this.iframe = $('iframe src="javascript:0" tabindex="-1" ').hide().appendTo('body')[0].contentWindow;

(I couldn´t write the complete i-frame tag < & /> - it isn´t allowed here :))

Backbone.js cause bug only in IE7

4 Answers4

Linked