Question

I have a page being loaded in an <iframe>.

Inside the <iframe>, I have a function that patiently waits for the page to load using jQuery’s $(window).load() event which is supposed to wait until ALL page content (images, javascript, css, etc.) is loaded before firing.

The function then calls back to the page loading the <iframe> using postMessage to send the height of the content in the <iframe> back.

I have tested the functionality in IE7, IE8, Firefox 2, Firefox 3, Opera, and Chrome and everything works fine. When I try to load the page in Safari, the function makes its call back before images are loaded…thus giving me the wrong page height.

Does anybody out there know how to force Safari to wait for images to be loaded before calling a function (jQuery solutions are preferable in this case)?

Answer 1

Checking for an offset forces safari for finish loading/layout out the content, it blocks javascript until the return completes. You can use it like this:

$(window).load(function() {
  var block = document.body.offsetWidth;
  //Rest of code...
});