Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Aled Evans
Aled Evans
3,163 Points

Refresh iframe with countdown

Hi, I am trying to refresh an iframe using Javascript. I've looked everywhere online but just can't get it to work.

I have an iframe with name="stats" that I would like to refresh every 30 seconds. I would also like a count down on the main page to countdown before the refresh.

Can anyone please help me with this?

I have found this but it does not seem to countdown or refresh?

window.onload = autoRefreshWithTimer;

function autoRefreshWithTimer(){
    var timerDiv = document.getElementById("timer");
    var time = Number(timerDiv.innerHTML);
    timerDiv.innerHTML = --time;
    if (time > 0){
        setTimeout(autoRefreshWithTimer, 1000);
    }
    else{
        window.frames["stats"].location.reload(); //or document.getElementById("iframeIdHere").contentWindow.location.reload();
        timerDiv.innerHTML = "30";
        setTimeout(autoRefreshWithTimer, 1000);       
   }
}

Thanks

Aled

2 Answers

Markus Ylisiurunen
Markus Ylisiurunen
15,034 Points

No problem. Yeah of course it's possible. Anything is possible ;)

I made few adjustments and here is the new improved version. Now you can also add data-default attribute to the timer div and this will be the time it gets reseted to once the timer has gone to 0.

Just hit me up if this still isn't something you're looking for :)

Aled Evans
Aled Evans
3,163 Points

Thanks Markus, but I can't seem to get it working? It just stays on 30 and not count down? The same happens when I run it in jsfiddle?

https://jsfiddle.net/dwqq5qsx/

Thanks

Markus Ylisiurunen
Markus Ylisiurunen
15,034 Points

Sorry for that! It worked on my machine ;) Classic.

Well it seems like the window.onload doesn't fire for some reason. It should fire when you're not using a tool like CodePen or JSFiddle though. I just called it manually on top of the script and it worked well. Here's the new version.

Aled Evans
Aled Evans
3,163 Points

Thanks Markus :) That works perfectly.

Markus Ylisiurunen
Markus Ylisiurunen
15,034 Points

You're welcome.

Markus Ylisiurunen
Markus Ylisiurunen
15,034 Points
Markus Ylisiurunen
Markus Ylisiurunen
15,034 Points

Hi Aled!

I made a little demonstration of one possible solution in CodePen. You can check it out here.

Hope it helps!

Aled Evans
Aled Evans
3,163 Points

Thanks :) Just one more question? Is there any way of getting the countdown to go from 01:30 instead of 90?

Thanks