Syndicate content

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>
  </div>

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 ) {
    div.style.width = "1px";
    div.style.marginRight = "0";
// Note: cut the following on two lines so it works on the website.
    jQuery.support.reliableMarginRight = ( 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)"

  parseInt((c.defaultView.getComputedStyle(a,null)||{marginRight:0}).marginRight,10)

Bug report: http://bugs.jquery.com/ticket/8763
Fix (click on Diff): https://github.com/jquery/jquery/pull/370/files

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!

Syndicate content

     

Terms of Site Index

Find the page/content you are looking for with our index.

  • combobox
  • lock

    A lock is used to limit the use of shared resources in different ways. When only using the data in read mode, the lock will prevent modifications, but any number of threads and processes can access the data. When in write mode, then only the owner can access the data.

  • proxy

    In networking, a proxy is an intermediate network connection used to hide a user or computer. Most large companies use multiple proxies to hide all of their different intranets. Technically, when using a proxy you actually send all your network data to that other computer and that computer is in charge of sending that data outside your organization. Very large companies generally have multiple levels of proxies.

  • RAM
    Random Access Memory. Everyone with a computer uses a lot of RAM to run their processes. This is true of any electronic device with some dynamic capabilities (like your cell phone, pocket calculator, watch with calculator, etc.)
  • update