Question

I want to hide elements of an website loaded in an iFrame. The script and the site can take a while so it is requested that the iFrame content is only shown after it has been modified.

I use an onload event to execute the script which hides the elements. I have access to the iFrame content (it’s on the same domain, but not the same server / network).

function frameLoaded() {
sleep(3000); //simulating the time the script needs
var leftDiv = window.frames.testFrame.document.getElementById("leftcol");
leftDiv.style.display = "none";
}

The simple sleep function:

function sleep(milliSeconds){
var startTime = new Date().getTime(); // get the current time
while (new Date().getTime() < startTime + milliSeconds); // hog cpu
}

When the Website with the iFrame is loaded for the first time a scroll-bar and some styled elements are shown, but no content text:

http://img651.imageshack.us/img651/5082/beforeu.png

When the script is done the page is displayed as it should be (the azure colored div becomes hidden):

http://img51.imageshack.us/img51/6806/afterq.png

While the script is working there shouldn’t be displayed anything. Either an empty iframe or the whole website waiting till the onload is finished would be sufficient.

Answer 1

You could have the <iframe id="iframe" style="display: none"> hidden on your parent page load and on the onload event of the iframe set this one to visible:

function frameLoaded() {
  sleep(3000); //simulating the time the script needs
  var leftDiv = window.frames.testFrame.document.getElementById("leftcol");
  leftDiv.style.display = "none";
  document.getElementById("iframe").style.display = 'block';
}

BTW: This sleep function should be thrown away.