The Linux Page

jQuery and hidden IFRAME bug

In the last 3 days I've been working on a new page and ran in some strange problem. There was an error in the console but things seemed to otherwise work just fine so I ignored it (since it wasn't in my own code...)

That error was an unhandled jQuery error which resulted in "let's stop the JavaScript at once." This meant all the page initialization failed (or did not occur.) The code was there otherwise. What give?!

The script in question was loaded from a hidden IFRAME, something like this:

  <div style="display: none;">
    <iframe src="/my-iframe"></iframe>

The jQuery script in the IFRAME would fail because it couldn't find a valid computed style for some of the elements in the IFRAME. This is because FireFox does not compute those elements' geometry until the IFRAME is computed and therefore the getComputedStyle() returns NULL.

This is fixed since jQuery 1.6.1, but unfortunately with Drupal I'm currently stuck with 1.5.2. So I had to implement the fix myself in my 1.5.2 version. If you have another version of jQuery older than 1.6.1, the fix is the same, just the location may be completely different. The fix looks like this:

jquery.js (jQuery 1.5.2)

(a) search for "reliableMarginRight = "
(b) add an opening parenthesis after "parseInt("
(c) add " || { marginRight: 0 } )" after "null )"

  if ( document.defaultView && document.defaultView.getComputedStyle ) { = "1px"; = "0";
// Note: cut the following on two lines so it works on the website. = ( parseInt( ( document.defaultView.getComputedStyle(
                     marginDiv, null ) || { marginRight: 0 } ).marginRight, 10) || 0 ) === 0;

jquery.min.js (jQuery 1.5.2)

(a) search for the second getComputedStyle
(b) add an open parenthesis before the "c.default"
(c) add "||{marginRight:0})" after the "null)"


Bug report:
Fix (click on Diff):

Reply to comment | The Linux Page

You need to take part in a contest for one of the highest quality blogs
on the internet. I'm going to recommend this web site!