I would like to ask if anyone has a simple solution that will allow me to reload/refresh an iframe but without the flickering/flash when the page reloads, it that possible ? Maybe to animate a blur-out and then a blur-in instead of the flickering/flash? I don't know any input would be helpful,

Thanks.

Here is how I reload the iframe now

document.getElementById("FrameID").contentDocument.location.reload(true);

Thanks for the help.

I would like to ask if anyone has a simple solution that will allow me to reload/refresh an iframe but without the flickering/flash when the page reloads, it that possible ? Maybe to animate a blur-out and then a blur-in instead of the flickering/flash? I don't know any input would be helpful,

Thanks.

Here is how I reload the iframe now

document.getElementById("FrameID").contentDocument.location.reload(true);

Thanks for the help.

• javascript
• jquery
• ajax

• No. I don't think that is possible. It needs to reload the page so will always have a bit of flickering. – putvande Commented Aug 7, 2013 at 15:16
• It's called FOUC and it's not easily fixed. Where it's normally CSS related, in this case it's iFrame source related. – Iron3eagle Commented Aug 7, 2013 at 15:18

3 Answers 3

Easiest approach:

1. Create a new iframe outside of DOM or in a hidden element.
2. Load the page inside the hidden frame
3. Once the load even fires within the hidden frame, just swap them around!

Swapping

To actually swap them, just have them next to each other and toggle the display: none / block css of each one.

What you can try is to place the iframe inside a container div:

<div id="iframe-container">
    <iframe src="..."></iframe>
</div>

Then in your JavaScript create a second iframe, place it behind if the first iframe and then hide the first one:

var container = document.getElementById('iframe-container');

var iframe2 = document.createElement('iframe');
iframe2.src = 'http://new.url.com';
iframe2.style.visibility = 'hidden';
container.appendChild(iframe2);

container.removeChild(container.getElementsByTagName('iframe')[0]);
iframe2.style.visibility = 'visible';

Hope this works, I haven't tested it. You will also need to play around with your CSS.

Really there is no way to avoid the flicker, as that is the page refreshing and rendering the new content.

You could hide the iframe on a refresh. And in the iframe, when the DOM is ready, call some parent function via parent.functionName() that will then make the iframe visible.