Question

我正在尝试设置一个网页来查看我工作的相机Feed。我们目前有4台摄像机，而另外一台。你可以想象，5不会很好地适应网页。我找到了一个脚本来每隔x秒更改一次iframe的来源，这样我就可以让我的一个iframe在两个Feed之间来回切换。但是，此脚本会导致源更改为“未定义”。每次轮换后两人。我错过了什么吗？

<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>

Answer 1

您检查links.length的行上有“off by one”错误。由于JS数组是基于零的，因此长度总是比最后一个元素多一个 - 即在你的情况下你有元素零和一，但长度是两个。

因此，您的支票应为if(links.length - 1 == i)，如此：

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>

话虽如此，在我的测试中，这实际上并没有导致轮换失败，但试试看看......

iframe每X秒更改一次src

1 个答案: