Refresh an iframe automatically in AJAX

Question

I have a simple iframe that I want to refresh every 5 seconds, without clicking somewhere or doing something at all

 <iframe src="my-messages.php">

They want the user to click somewhere, I do not. I want this as an automatic process.

How much did you search? `Refresh an iframe automatically` in Google, top results ► https://stackoverflow.com/questions/5146805/an-iframe-i-need-to-refresh-every-30-seconds-but-not-the-whole-page https://stackoverflow.com/questions/6975765/how-to-refresh-an-iframe-automatically https://stackoverflow.com/questions/34123053/auto-refresh-iframe-html etc.. — Nope, Jul 10 '17 at 14:40

score 1 · Accepted Answer · answered Jul 10 '17 at 14:50

1

Here's a way to do it, though if the user is doing anything within the iframe they will lose their progress.

window.setInterval(function() {
  document.querySelector('iframe.reload').setAttribute('src', 'https://freesecure.timeanddate.com/clock/i5sso5fg/n1328/tluk');
}, 5000);

<iframe class="reload" src="https://freesecure.timeanddate.com/clock/i5sso5fg/n1328/tluk" frameborder="0" width="57" height="18"></iframe>

answered Jul 10 '17 at 14:50

Andrew Bone

7,092
2
18
33

I will try it now. – Dimitar Bogdanov Jul 10 '17 at 14:56

Reinstate Monica Cellio · Answer 2 · 2017-07-10T14:45:13.903

0

The simplest way is to use the refresh meta tag. Just add this to the head section of my-messages.php...

<meta http-equiv="refresh" content="5" />

Alternatively, add this to my-messages.php in order to do the same thing with Javscript...

<script>
    setTimeout(function() {
        window.location.reload();
    }, 5000);
</script>

edited Jul 10 '17 at 14:45

answered Jul 10 '17 at 14:32

Reinstate Monica Cellio

25,975
6
51
67

Is this going to refresh the page when accessed manually, ex. directly going to my-messages.php? Also thanks for the fast answer. – Dimitar Bogdanov Jul 10 '17 at 14:34
Yes, it will work on the page whether it's the top or in an iframe. – Reinstate Monica Cellio Jul 10 '17 at 14:42

ebraley · Answer 3 · 2017-07-10T15:07:52.233

0

Use javascript to change the src of the iframe to "my-messages.php" again. This is a solution using JQuery to select the element.

<iframe src="my-messages.php" id="frame">

in your JS

var refreshMS = 10000;
var $frame = $('#frame');
var timeoutFunction = function(){
  $frame.attr("src", "");
  $frame.attr("src", "my-messages.php");
  setTimeout(timeoutFunction, refreshMS);
};
setTimeout(timeoutFunction, refreshMS);

This basically sets the src element every 10 seconds, causing the iframe to reload its contents.

Edit: As recommended, non-jquery version

var refreshMS = 10000;
var frame = document.getElementById("frame");
var timeoutFunction = function(){
  frame.setAttribute("src", "");
  frame.setAttribute("src", "my-messages.php");
  setTimeout(timeoutFunction, refreshMS);
};
setTimeout(timeoutFunction, refreshMS);

edited Jul 10 '17 at 15:07

answered Jul 10 '17 at 14:35

ebraley

206
1
9

You'll need to include JQuery on the page if you are not already using it. – ebraley Jul 10 '17 at 14:37
You can do this without jQuery. Use vanilla JS so they don't have to include a whole library for 1 thing. – Reinstate Monica Cellio Jul 10 '17 at 14:43
Is this going to include JQuery: `` ? Yes, I do have this script in my js folder. – Dimitar Bogdanov Jul 10 '17 at 14:45
I've gone ahead and provided an example that doesn't require JQuery. Sorry about that, me being lazy. – ebraley Jul 10 '17 at 14:47
@DimitarBogdanov this may be an issue with Chrome not triggering the refresh unless the actual value changes. I've update the example to first set the src to empty and then back to the correct source. This should properly trigger the browser to refresh the iframe now. – ebraley Jul 10 '17 at 15:09

Refresh an iframe automatically in AJAX

3 Answers3