CODEWITHSUNDEEP
javascripthtmliframesrc
Dustin H
Dustin H

Reputation: 43

Iframe changing src every X seconds

I am trying to set up a webpage to view camera feeds for my work. We currently have 4 cameras and we are getting another one. As you can imagine 5 won't fit on a webpage very nicely. I have found a script to change the source of iframe's every x seconds so I can have one of my iframes switching back and forth between two feeds. This script however is causing the source to change to 'undefined' after each rotation of the two. Am I missing something?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Live Camera Feed</title>
<link rel="stylesheet" href="style.css">

<script type="text/javascript">
var links = ["https://192.168.10.123/NW_Corner/push.php","https://192.168.10.123/NE_Corner/push.php"];
var i = 0;
var renew = setInterval(function(){
    document.getElementById("frame").src = links[i];        
    if(links.length == i){
        i = 0;
    }
    else i++;
},5000);
</script>

</head>
<body>

<table width="75%" height="75%">
    <tr>
        <td><iframe width="1280" height="720" src="https://192.168.10.123/Driveway/push.php" width="75%" height="75%"></iframe></td>
        <td><iframe width="1280" height="720" src="https://192.168.10.123/South_Door/push.php" width="75%" height="75%"></iframe></td>
    </tr>
    <tr>
        <td><iframe id="frame" width="1280" height="720" src="https://192.168.10.123/NW_Corner/push.php" width="75%" height="75%"></iframe></td>
        <td><iframe width="1280" height="720" src="https://192.168.10.123/NE_Corner/push.php" width="75%" height="75%"></iframe></td>
    </tr>
</table>
</body>
</html>

Upvotes: 4

Views: 967

Answers (1)

beercohol
beercohol

Reputation: 2587

You have an "off by one" error on the line where you check links.length. As JS arrays are zero based, the length is always one more than the last element - i.e. in your case you have elements zero and one, but length is two.

So your check should be if(links.length - 1 == i) like so:

var links = ["https://192.168.10.123/NW_Corner/push.php","https://192.168.10.123/NE_Corner/push.php"];
var i = 0;
var renew = setInterval(function(){
    document.getElementById("frame").src = links[i];        
    if(links.length - 1 == i){
        i = 0;
    }
    else i++;
},5000);
<table width="75%" height="75%">
    <tr>
        <td><iframe width="1280" height="720" src="https://192.168.10.123/Driveway/push.php" width="75%" height="75%"></iframe></td>
        <td><iframe width="1280" height="720" src="https://192.168.10.123/South_Door/push.php" width="75%" height="75%"></iframe></td>
    </tr>
    <tr>
        <td><iframe id="frame" width="1280" height="720" src="https://192.168.10.123/NW_Corner/push.php" width="75%" height="75%"></iframe></td>
        <td><iframe width="1280" height="720" src="https://192.168.10.123/NE_Corner/push.php" width="75%" height="75%"></iframe></td>
    </tr>
</table>

Having said that, in my test this didn't actually cause the rotation to fail, but try it and see...

Upvotes: 1

Related Questions