Reload an iframe with jQuery

Question

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>

Answer 1

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;   
}

Answer 2

Here is another way

$( '#iframe' ).attr( 'src', function () { return $( this )[0].src; } );

Answer 3

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

 $('#currentElement').attr("src", $('#currentElement').attr("src"));

Answer 4

Below solution will work for sure:

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

Answer 5

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();
}

Answer 6

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.