SCRIPT5009: "$" is undefined in IE9

Question

I have a bookmarklet that loads a div into a current page and places an iframe inside it. The bookmarklet works like a dream in all browsers except IE9. Even works in earlier versions of IE.

I'm using the following bookmarklet framework:

http://idc.anavallasuiza.com/project/bookmarklets

Some one else has had a similar issue here (not related to bookmarklets):

https://forum.jquery.com/topic/retrieved-html-data-type-with-jquery-ajax-in-ie9-scripts-tags-sources-could-not-be-loaded

So far I'm understanding that my bookmarklet's jQuery is not loading properly in IE9.

The bookmarklet attempts to load its own jQuery so certain effects can run when the bookmarklet is initialising, and for programming ease.

The iFrame page also loads jQuery (without it the content in the iframe does not work properly).

I am using the latest jQuery:

http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

I would like to know why IE9 causes these SCRIPT errors when no other browser does? Why is jQuery not loading properly in IE9?

Any insight would be much appreciated.

Answer 1

I have just spent some hours wrestling with this problem and finally found a solution that I think will help you.

Here's a simplified version of the code that caused problems for me:

$frames = $(*html_including_frames_here*);
$div = $('<div></div>');
$div.append($frames);
$('body').append($div);

** Loading one or more frames into a div that's NOT in the DOM and THEN loading that div into the DOM causes all the problems in my cases. The frames don't load JS scripts as they should, and then everything (jQuery, JSON, etc) are undefined.

This, on the other hand, works:

$frames = $(*html_including_frames_here*);
$div = $('<div></div>');
$('body').append($div);
$div.append($frames);

The only difference here is that I am placing the div in the dom first and THEN loading the frames into it. Somehow that makes all the difference.