CODEWITHSUNDEEP
javascripthtmliframerefreshreload
Brett
Brett

Reputation: 391

How to force an iFrame to reload once it loads

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't seem to load correctly in all browsers. But when I refresh the iframe it loads perfect. I have no idea why it does this.

I have used the meta refresh, which works but I don't want the page to refresh constantly, just once.

The solution I'm looking for will reload the iFrame content after the iFrame is opened, with a minimal delay.

Edit

I realized that my page loads all of my iframes when the index is loaded. The iframes appear in a jQuery overlay, which is also loaded but visibility:hidden until called. So on this call is when I would want the iframe to be reloaded.

Could anyone help me come up with a Javascript function that reloads the iFrame when I click the link to the iFrame? I've gotten close but I know nothing about js and I keep falling short. I have a function that reloads the page, but I can't figure out how to get it called just once.

I have this so far:

<script type="text/javascript">

var pl;
var change;
pl=1;

function ifr() {

if (pl=1) {
    document.location.reload([true]);
    alert("Page Reloaded!");
    change=1;
    return change;
}

change+pl;

}

So basically it uses the document.location.reload which works to reload the page. I'm trying to then make pl change to something other than 1 so the function doesnt run again. I've been calling this JS from the body with onLoad.

Upvotes: 5

Views: 43504

Answers (4)

Brett
Brett

Reputation: 391

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.

Upvotes: 9

John Pettitt
John Pettitt

Reputation: 659

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.

Upvotes: 3

Nickolay
Nickolay

Reputation: 32081

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.

Upvotes: 2

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324800

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)

Upvotes: 2

Related Questions