我有一个带有按钮的 Raspberry PI。 我在其上运行 Python 脚本来检测按钮何时被按下。 当按下按钮时，它会在文本文件中增加一个数字。 我需要在网页 (Apache) 上显示这个数字并发出声音。
目前，我的 python 脚本将 index.html 更改为我需要的值，我正在使用 <meta http-equiv="refresh" content="1"> 重新刷新页面。
问题是我需要知道数字何时改变才能发出声音。
【问题讨论】：
标签： javascript python html apache raspberry-pi
信息太少，无法说出具体的内容，但鉴于页面不是动态的（无 ajax）的主要以下限制，这就是我将如何解决它。
总纲：
将文本文件中的值放在可识别的字段中，例如
<span id="myNumber">#the number from file goes here </span>
然后在加载时使用 java 脚本读取字段的值：
（平面JS）
var myNumberValue = document.getElementById('myNumber').innerHTML;
然后创建一个cookie来存储客户端机器上的最后一个值：
document.cookie = "lastNumber="+myNumberValue;
总结一下：在加载网页时启动一个脚本：
[编辑] 使用本地存储或 cookie 的完整工作解决方案：
<html>
<head>
<META HTTP-EQUIV="refresh" CONTENT="5">
<script type="text/JavaScript">
function myFunction()
{
var numberDisplayed = parseInt(document.getElementById('myNumber').innerHTML);
var numberInCookie = numberDisplayed;
//lets assume that's the only data in the cookie
var tmpData = readNumber();
if(tmpData!="NaN" && tmpData!= "undefined")
{
numberInCookie = tmpData;
}
if(numberDisplayed!=numberInCookie)
{
alert("changed to from "+ numberInCookie+" to " + numberDisplayed);
}
saveNumber(numberDisplayed);
}
function readNumber()
{
if (typeof(Storage) !== "undefined") {
return localStorage.getItem("lastNumber")
} else {
var cookieData = document.cookie;
//lets assume that's the only data in the cookie
var tmpData = parseInt(cookieData.split("=")[1]);
return tmpData
}
}
function saveNumber(number)
{
if (typeof(Storage) !== "undefined") {
localStorage.setItem("lastNumber", number);
} else {
document.cookie = "lastNumber="+number;
}
}
</script>
</head>
<body onload="myFunction()">
<span id="myNumber">2</span>
</body>
</html>
[Edit 2] 正如问题的作者所暗示的那样，他实际上并不想使用站点刷新，这是另一个选项： 以免启动一个循环，该循环将从服务器加载测试文件作为 ajax 请求。然后数据被加载，解析，像以前一样在本地存储。并设置定时器再次触发刷新。
文件需要在同一个域/服务器上可用（有关详细信息，请参阅 HTTP 访问控制 (CORS)）
<html>
<head>
<script type="text/JavaScript">
var externalNumber = 0;
var timer;
function myFunction()
{
// start the readouts:
LoadExternalData();
}
function LoadExternalData()
{
var client = new XMLHttpRequest();
client.open("GET", "http:/myserver/readme.txt");
client.onreadystatechange = function() {
externalNumber = parseInt(responseText);
//store a local copy
var NewestNumber = externalNumber;
var tmpData = readNumber();
if(tmpData!="NaN" && tmpData!= "undefined")
{
numberInCookie = tmpData;
}
if(NewestNumber!=numberInCookie)
{
alert("changed to from current "+ numberInCookie+" to " + NewestNumber);
}
saveNumber(NewestNumber);
timer = setTimeout(LoadExternalData, 1000);
}
client.send();
}
function readNumber()
{
if (typeof(Storage) !== "undefined") {
return localStorage.getItem("lastNumber")
} else {
var cookieData = document.cookie;
//lets assume that is the only data in the cookie
var tmpData = parseInt(cookieData.split("=")[1]);
return tmpData
}
}
function saveNumber(number)
{
if (typeof(Storage) !== "undefined") {
localStorage.setItem("lastNumber", number);
} else {
document.cookie = "lastNumber="+number;
}
}
</script>
</head>
<body onload="myFunction()">
<span id="myNumber">2</span>
</body>
</html>
【讨论】：
<html> <head> <META HTTP-EQUIV="refresh" CONTENT="1"> <script type="text/JavaScript"> function myFunction() { alert('reloaded'); } </script> </head> <body onload="myFunction()"> </body> </html> 它每秒（每次刷新）启动函数