I have a iFrame on my page thats display style is none. I have a javascript function to set the source and then set the display to block. The problem is that the iframe shows up before the content of it is loaded and thus I get a flickering effect. It goes white first and then displays the content. So I need to set the source, and when done loading all content of its source, only set its display style.

CSS & Javascript

.ShowMe{display:block;}

function(url)
{
document.getElementById('myIFrame').src = url;
document.getElementById('myIFrame').className = ShowMe;
}

I have a iFrame on my page thats display style is none. I have a javascript function to set the source and then set the display to block. The problem is that the iframe shows up before the content of it is loaded and thus I get a flickering effect. It goes white first and then displays the content. So I need to set the source, and when done loading all content of its source, only set its display style.

CSS & Javascript

.ShowMe{display:block;}

function(url)
{
document.getElementById('myIFrame').src = url;
document.getElementById('myIFrame').className = ShowMe;
}

• javascript
• jquery
• css

Share Follow edited Jul 11, 2013 at 10:36 Dean Martin asked Jul 11, 2013 at 10:00 Dean MartinDean Martin 1,29333 gold badges1919 silver badges2828 bronze badges 4

• 1 are you using .load or ajax() to load the content ?? – bipen Commented Jul 11, 2013 at 10:04
• Is the iframe on the same domain? – raam86 Commented Jul 11, 2013 at 10:05
• The javascript function that sets the src gets called from a anchor.. ("Show Form" Label) so it does not get done on the load of the page and yet the iFrame is on the same domain. This is intranet project. – Dean Martin Commented Jul 11, 2013 at 10:06
• Normally the iframe is hidden at first, and the inner page's load event tells the parent page to show itself(assuming there no cross domain issue, which otherwise would be a bit more plicated). But this only guarantees the inner page itself is loaded, not necessarily everything (images, css, js etc) – Dean Winchester Commented Jul 11, 2013 at 10:10

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

It's simple as that:

<iframe onload="this.style.opacity=1;" style="opacity:0;border:none;

I would suggest you try the following:

<script type="javascript">
    var iframe = document.createElement("myIFrame");
    iframe.src = url;

        if (navigator.userAgent.indexOf("MSIE") > -1 && !window.opera){
                iframe.onreadystatechange = function(){
            if (iframe.readyState == "plete"){            
                //not sure if your code works but it is below for reference
                  document.getElementById('myIFrame').class = ShowMe;
                  //or this which will work
                  //document.getElementById("myIFrame").className = "ShowMe";

                }
            };
        }       
        else 
        {
            iframe.onload = function(){
                  //not sure if your code works but it is below for reference
                  document.getElementById('myIFrame').class = ShowMe;
                  //or this which will work
                  //document.getElementById("myIFrame").className = "ShowMe";
            };
        } 
</script>

Based on the code found here.

You could do this within the iframe:

window.onload = function () {
    window.frameElement.className = 'ShowMe'; // 'ShowMe' or what ever you have in ShowMe variable.
}

Since you've tagged your question with [jquery], I assume you have executed the code within $(document).ready(). It is fired when the DOM is ready, i.e. it uses native DOMContentLoaded event (if available). window.onload is fired, when all resources on the page are ready.