reload an iframe with jquery

reload an iframe with jquery  using -'javascript,jquery,html,iframe'

I have two iframes on a page and one makes changes to the other but the other iframe doesnt show the change until i refresh there an easy way to refresh this iframe with jQuery

<div class="project">
  <iframe id="currentElement" class="myframe" name="myframe" src=""></iframe>


asked Sep 22, 2015 by tushar2k6
0 votes

9 Answers

0 votes

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


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.

answered Sep 22, 2015 by badhwar.rohit
0 votes

Reload an iframe with jQuery

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

$('#reload').click(function() {

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

   Refresh Comments

When you click this anchor it just refresh your iframe

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

  Refresh Comments

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

answered Sep 22, 2015 by android_master
0 votes

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

 $('#currentElement').attr("src", $('#currentElement').attr("src"));
answered Sep 22, 2015 by tushar2k6
0 votes

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.

answered Sep 22, 2015 by bhavin
0 votes

This possible with simple javascript. In iFrame1 make a javascript function that is called in the body tag onload. I have a 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 iframe 1. You could set this up as a function fired by a button press or however you want to in iframe1. Then in iframe 2 you have the second function I list below. The function in iframe1 basically goes to the parent page and then uses the window.frames suntax 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 (#didValidation# == 1)

//function in iframe2
function refreshPage()
answered Sep 22, 2015 by bhavin
0 votes
    ifrX =document.getElementById('id') //or 
    ifrX =frames['index'];

cross-browser solution is:

    ifrX.src = ifrX.contentWindow.location

this is useful especially when

And my Javascript code:

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

Hope this helps.

answered Sep 22, 2015 by mcasudhir
0 votes

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.

answered Sep 22, 2015 by tseetha