Reload iframe without flicker / flash (in Javascript)

Question

I would like to ask if anyone has a simple solution that will allow me to reload / refresh the iframe, but without flickering / flash when the page reloads, is this possible? Maybe animate the blur and then the blur instead of flickering / flash? I don’t know what contribution would be useful,

Thanks.

This is how I reload the iframe now

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

Thanks for the help.

Answer 1

The easiest approach:

• Create a new iframe outside the DOM or in a hidden element.
• Load the page inside a hidden frame
• Once the load even fires inside the hidden frame, just swap them!

Pumping

To swap them, simply use them next to each other and switch the display: none / block css of each of them.

Answer 2

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

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

Then in your JavaScript create a second iframe , put it back if the first iframe , and then hide the first:

 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 have not tested it. You will also need to play around with your CSS.

Answer 3

There is really no way to avoid flickering, as it is updating the page and rendering new content.

You can hide the iframe when updating. And in the iframe, when the DOM is ready, call some parent function via parent.functionName (), which will then make the iframe visible.