How to to display separate iframe in every N second?

Question

I have read some posts and did some research before asking, if there was any duplicate post sorry about that.

It is a bit similar to this question, but I don't want the webpages to keep looping and I want the webpages to display in each iframe separately. I want to display some website with iframe every N second, the expecting result just like the following command code:

@echo off
echo "Webpage 1"
timeout 5 >nul
echo "Webpage 2"
timeout 3 >nul 
echo "Webpage 3"
timeout 4 >nul

when I try to do it with php, I used the following code:

<iframe src="http://example.com/page1" width="50%"></iframe> 
<br>
<?php sleep(5); ?>
<iframe src="http://example.com/page2" width="50%"></iframe> 
<br>
<?php sleep(3); ?>
<iframe src="http://example.com/page3" width="50%"></iframe> 
<br>
<?php sleep(4); ?>

How to avoid those pages displaying simultaneously?

Your example makes it obvious to me that you aren't exactly sure of how the relationship between PHP/Webserver, HTML, JavaScript/Webbrowser works... You should seek to fully understand the client/server responsibilities. Your `sleep()` is executed *on the server* and simply delays sending the rest of the HTML to the client. — Jonathon Reinhart, Jul 16 '13 at 03:16
Heh, not sure [Solved] is a valid tag here - wouldn't that prevent a better solution from being posted in the future? — icedwater, Jul 16 '13 at 09:44

JOE LEE · Accepted Answer · 2013-07-16T05:28:49.223

1

//need jquery 
urlLists = [ "http://example.com/page1", "http://example.com/page2" ];
key = 0;
//loop
$(document).ready(function()
{
    var refreshId = setInterval( function() 
    {

    if(urlLists[key] == undefined){
     key=0;       
    }
      $('iframe').attr('src',urlLists[key]) ;
    key++;

    }, 5000);
});


//stop at last
$(document).ready(function()
{
    var refreshId = setInterval( function() 
    {

    if(urlLists[key] != undefined){
        $('iframe').attr('src',urlLists[key]) ;
         key++;   

    }else{
window.clearInterval(refreshId );
 }


    }, 5000);
});

edited Jul 16 '13 at 05:28

answered Jul 16 '13 at 05:03

JOE LEE

1,058
1
6
6

This not working as expected, it keeps looping those webpages, I want example.com/page2 keep as the last page instead of looping back to page1. – Bilo Jul 16 '13 at 05:22
just tested the above code still looping, don't know much more about JavaScript, if I put as body, will it break the code? – Bilo Jul 16 '13 at 05:54
May be I have overlook something, now it is working, thanks a lot! – Bilo Jul 16 '13 at 06:43

score 0 · Answer 2 · answered Jul 16 '13 at 03:21

0

In each of your pages just do a refresh header

header('Refresh: 3;url=http://example.com/page1');

Of course change 3 to the value of N.

answered Jul 16 '13 at 03:21

Orangepill

24,500
3
42
63

huh what does this do Orange? – DevZer0 Jul 16 '13 at 03:30
Would you mind to be more specify? I tried to add to the head of the page at line 4 but it shows line 4 return error? -----------Warning: Cannot modify header information - headers already sent by (output started at D:\wwwroot\test.php:4) in D:\wwwroot\test.php on line 4 – Bilo Jul 16 '13 at 03:36
it needs to go into the pages being loaded into the iframe and like all header calls should be done before any output is sent to the browser, safest bet is to put as the first line right after the ` – Orangepill Jul 16 '13 at 03:48
I see, it works now, but I think there should be a better way. In order to use of the above code to accomplish the goal, I have to edit each iframe page header one by one... and if I want to insert an other new iframe page later, I have to edit all the headers again... – Bilo Jul 16 '13 at 05:26
Then you are going to have to opt for a client side (javascript) solution. This is basically the only way to do it with php. – Orangepill Jul 16 '13 at 05:27
I see, then I prefer using JavaScript instead, really thanks for your help :) – Bilo Jul 16 '13 at 06:45

How to to display separate iframe in every N second?

2 Answers2