How to force an iFrame to reload once it loads

Question

I have numerous iframes that load specific content on my pages. Both the parent and iframe are on the same domain.

I have a scrollbar inside the iframe that doesn\'

Answer 1

Here's a complete solution to the original question:

<iframe onload="reloadOnce(this)" src="test2.html"></iframe>
<script>
var iframeLoadCount = 0;
function reloadOnce(iframe) {
  iframeLoadCount ++;
  if (iframeLoadCount <= 1) {
    iframe.contentWindow.location.reload();
    console.log("reload()");
  }
}
</script>

The updated question is not really clear (what's "the link to the iFrame" and where is it in your snippet?), but you have a few issues with the code:

• "calling this JS from the body with onLoad", assuming you mean an iframe's body, means the variable you're hoping to use to avoid infinite reloading will get clobbered along with the rest of the iframe's page when it's reloaded. You need to either load a slightly different URL in the iframe (and check the URL on iframe's onload before reloading) or put the flag variable in the outer page (and access it with parent.variableName - that should work I think)
• if (pl=1) { should use ==, as = is always an assignment.
• change+pl; has no effect.

Answer 2

On the iframe element itself, set an onload:

iframe.onload = function() {this.contentWindow.location.reload(); this.onload = null;};

(Only works if the iframe's location is in the same domain as the main page)

Answer 3

Beyond the scope of the original question, however this jQuery snippit works with cross domain iframe elements where the contentDocument.location.reload(true) method won't due to sandboxing.

//assumes 'this' is the iframe you want to reload.
$(this).replaceWith($(this).clone()); //Force a reload

Basically it replaces the whole iframe element with a copy of itself. We're using it to force resize embedded 3rd party "dumb" widgets like video players that don't notice when their size changes.

Answer 4

All the leads on this went dead, but I did find a code snippet that worked. Not written by me, and I don't remember where it came from. Just posting to help someone should they ever have the same question.

<div class="overlay-content"> //Content container needed for CSS Styling
    <div id="Reloader"> 
        //iFrame will be reloaded into this div
    </div>

    //Script to reload the iframe when the page loads
    <script>
        function aboutReload() { 
            $("#Reloader").html('<iframe id="Reloader" height="355px" width="830px" scrolling="no" frameborder="0" src="about.html"></iframe>');
        }
    </script>
</div>

Basically just loads the iFrame source when the window with the iFrame opens, as opposed to the iFrame loading when the original page loads.