163

I have two iframes on a page and one makes changes to the other but the other iframe doesn't show the change until I refresh. Is there an easy way to refresh this iframe with jQuery?

<div class="project">
  <iframe id="currentElement" class="myframe" name="myframe" src="http://somesite.com/something/new"></iframe>
</div>
6
  • 4
    Is the iframe document on a different domain?
    – Pekka
    Nov 22, 2010 at 20:17
  • Do you have access to the code of the site that appears in the iFrame? Nov 22, 2010 at 20:17
  • Show more code -- the html for both iFrames, and also the javascript code you are using to make the changes. It's hard to figure out what the problem seeing only what you've included so far.
    – Ben Lee
    Nov 22, 2010 at 20:19
  • I have access to the code yes and the iframe is on a different domain Nov 22, 2010 at 20:19
  • @Matt, frames are not allowed to make changes to the contents of frames on other domains. For examples of how to work around this cross-domain scripting restriction see this: softwareas.com/cross-domain-communication-with-iframes
    – Ben Lee
    Nov 22, 2010 at 20:21

18 Answers 18

243
$( '#iframe' ).attr( 'src', function ( i, val ) { return val; });
3
  • 1
    @NicolaeSurdu Also, this: (function (elem) { elem.src = elem.src; }($('#iframe')[0])); May 22, 2013 at 17:39
  • 1
    To reload one iframe from within the other change to: $('#iframe', window.parent.document).attr('src', function (i, val ) { return val; });
    – Tillito
    May 24, 2013 at 18:17
  • On Internet Explorer javascript solutions like document.getElementById(FrameID).contentWindow.location.reload(true); are not working properly. This answer works better.
    – KaraKaplan
    Sep 6, 2019 at 8:22
181

If the iframe was not on a different domain, you could do something like this:

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

But since the iframe is on a different domain, you will be denied access to the iframe's contentDocument property by the same-origin policy.

But you can hackishly force the cross-domain iframe to reload if your code is running on the iframe's parent page, by setting it's src attribute to itself. Like this:

// hackishly force iframe to reload
var iframe = document.getElementById(FrameId);
iframe.src = iframe.src;

If you are trying to reload the iframe from another iframe, you are out of luck, that is not possible.

3
  • 2
    The script does not work in my IE9 (not check other version). Change contentDocument to contentWindow makes it work on IE9. document.getElementById(FrameID).contentWindow.location.reload(true);
    – Han He
    Nov 22, 2012 at 9:38
  • 3
    This didn't work for me, however I did something like iframe.contentDocument.location=iframe.src; instead which worked great
    – glitchyme
    May 26, 2013 at 2:08
  • 4
    This Jquery worked like a charm for me: $('#map_iframe').attr('src', $('#map_iframe').attr('src')); Jul 1, 2014 at 19:00
62

you can also use jquery. This is the same what Alex proposed just using JQuery:

 $('#currentElement').attr("src", $('#currentElement').attr("src"));
1
  • var f = $('#iframeX') ; f.attr( 'src', f.attr( 'src' )) may be more robust to maintain and read Jun 23, 2020 at 9:40
12

with jquery you can use this:

$('#iframeid',window.parent.document).attr('src',$('#iframeid',window.parent.document).attr('src'));
0
10

Reload an iframe with jQuery

make a link inside the iframe lets say with id = "reload" then use following code

$('#reload').click(function() {
    document.location.reload();
});

and you are good to go with all browsers.

Reload an iframe with HTML (no Java Script req.)

It have more simpler solution: which works without javaScript in (FF, Webkit)

just make an anchor inSide your iframe

   <a href="#" target="_SELF">Refresh Comments</a>

When you click this anchor it just refresh your iframe

But if you have parameter send to your iframe then do it as following.

  <a id="comnt-limit" href="?id=<?= $page_id?>" target="_SELF">Refresh Comments</a>

do not need any page url because -> target="_SELF" do it for you

6

Just reciprocating Alex's answer but with jQuery

var currSrc = $("#currentElement").attr("src");
$("#currentElement").attr("src", currSrc);
5

Here is another way

$( '#iframe' ).attr( 'src', function () { return $( this )[0].src; } );
1
  • 1
    $( '#iframe' ).attr('src', $( '#iframe' ).attr('src'));
    – zanderwar
    Jun 16, 2019 at 9:12
4

I'm pretty sure all of the examples above only reload the iframe with its original src, not its current URL.

$('#frameId').attr('src', function () { return $(this).contents().get(0).location.href });

That should reload using the current url.

2

If you are cross-domain, simply setting the src back to the same url will not always trigger a reload, even if the location hash changes.

Ran into this problem while manually constructing Twitter button iframes, which wouldn't refresh when I updated the urls.

Twitter like buttons have the form: .../tweet_button.html#&_version=2&count=none&etc=...

Since Twitter uses the document fragment for the url, changing the hash/fragment didn't reload the source, and the button targets didn't reflect my new ajax-loaded content.

You can append a query string parameter for force the reload (eg: "?_=" + Math.random() but that will waste bandwidth, especially in this example where Twitter's approach was specifically trying to enable caching.

To reload something which only changes with hash tags, you need to remove the element, or change the src, wait for the thread to exit, then assign it back. If the page is still cached, this shouldn't require a network hit, but does trigger the frame reload.

 var old = iframe.src;
 iframe.src = '';
 setTimeout( function () {
    iframe.src = old;
 }, 0);

Update: Using this approach creates unwanted history items. Instead, remove and recreate the iframe element each time, which keeps this back() button working as expected. Also nice not to have the timer.

0
2

Just reciprocating Alex's answer but with jQuery:

var e = $('#myFrame');
    e.attr("src", e.attr("src"));

Or you can use small function:

function iframeRefresh(e) {
    var c = $(e);
        c.attr("src", c.attr("src"));
}

I hope it helps.

2
$('IFRAME#currentElement').get(0).contentDocument.location.reload()
0
1

This is possible with simple JavaScript.

  • In iFrame1, make a JavaScript function that is called in the body tag onload. I have it check a server side variable that I set, so it does not try to run the JavaScript function in iframe2 unless I have taken a specific action in iframe1. You could set this up as a function fired by a button press or however you want to in iframe1.
  • Then in iframe2, you have the second function I list below. The function in iframe1 basically goes to the parent page and then uses the window.frames syntax to fire a JavaScript function in iframe2. Just make sure to use the id/name of iframe2 and not the src.
//function in iframe1
function refreshIframe2()
{
    if (<cfoutput>#didValidation#</cfoutput> == 1)
    {   
         parent.window.frames.iframe2.refreshPage();
    }
}

//function in iframe2
function refreshPage()
{   
    document.location.reload();
}
1

//refresh all iframes on page

var f_list = document.getElementsByTagName('iframe');

 for (var i = 0, f; f = f_list[i]; i++) {
                            f.src = f.src;
                        }
0
    ifrX =document.getElementById('id') //or 
    ifrX =frames['index'];

cross-browser solution is:

    ifrX.src = ifrX.contentWindow.location

this is useful especially when <iframe> is a the target of a <form>

0
0

SOLVED! I register to stockoverflow just to share to you the only solution (at least in ASP.NET/IE/FF/Chrome) that works! The idea is to replace innerHTML value of a div by its current innerHTML value.

Here is the HTML snippet:

<div class="content-2" id="divGranite">
<h2>Granite Purchase</h2>
<IFRAME  runat="server" id="frameGranite" src="Jobs-granite.aspx" width="820px" height="300px" frameborder="0" seamless  ></IFRAME>
</div>

And my Javascript code:

function refreshGranite() {           
   var iframe = document.getElementById('divGranite')
   iframe.innerHTML = iframe.innerHTML;
}

Hope this helps.

1
  • Multiple errors in this answer: 1. not an ASP.NET component, therefore runat="server" is not applicable; 2. Why all caps for IFRAME? 3. dimension attribute values have no units; 4. frameborder is deprecated
    – Raptor
    May 23, 2016 at 8:00
0

You need to use

[0].src

to find the source of the iframe and its URL needs to be on the same domain of the parent.

setInterval(refreshMe, 5000);
function refreshMe() {
    $("#currentElement")[0].src = $("#currentElement")[0].src;   
}
0

you can do it like this

$('.refrech-iframe').click(function(){
        $(".myiframe").attr("src", function(index, attr){ 
            return attr;
        });
    });
-5

Below solution will work for sure:

window.parent.location.href = window.parent.location.href;

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.