文件更改时刷新页面

Question

我希望 javascript 在对服务器上的页面文件进行修改时刷新页面。

我使用api.php（见下文）来获取文件的文件修改时间并将其作为json返回。

所以从 api.php 获取数据是没有问题的，但是如果是这种情况，我如何将旧值与 javascript 中的新值进行比较并刷新页面。

这是我到目前为止所做的：

var oldVar = 0; 

setInterval(function(){ 
$.getJSON('api.php', function(data) {
    console.log(data);

    var obj = data;

    var filedate = obj.filedate;



    if (oldVar != filedate) {
            location.reload();
    };

    var oldVar = filedate;


});
}, 1000); // 1 second

显然这会使页面每秒刷新一次，但我不知道如何继续。

这是我用来获取数据的 PHP 代码，我使用 filemtime 来检查服务器上的文件修改时间。

<?php

     $filename = "test.php";

     if (file_exists($filename)) {
          $dateFile = date("s", filemtime($filename));
          $dateOfFile = array('filedate' => "$dateFile"); 

          echo json_encode($dateOfFile);    
     }

?>

Answer 1

JavaScript

var interval = setInterval(function(){ 
    $.getJSON('api.php', function(data) {
        if (getCookie('old_modification') != data.filedate) {
            window.location.reload();
        };

        setCookie('old_modification', data.filedate);
    });
}, 1000);

function setCookie(name, value) {
    var cookie_string = name + "=" + encodeURI(value);
    document.cookie = cookie_string;
}

function getCookie(cookie_name) {
    var results = document.cookie.match('(^|;) ?' + cookie_name + '=([^;]*)(;|$)');
    return results ? unescape(results[2]) : null;
}

if(getCookie('old_modification') === null) {
    setCookie('old_modification', 0);
}

PHP

$filename = "test.php";

if (file_exists($filename)) {
    echo json_encode(array(
        'filedate' => filemtime($filename)
    )); 
}

由于您每次都重新加载页面，oldVar 的值始终设置为0，当您在计时器中使用从 AJAX 接收到的数据检查其值时，它不会生效。

在这里，您需要一些存储空间来保存和更新旧值。为此，我更喜欢使用 cookie。除了更新页面的特定部分而不是重新加载页面本身之外，我没有其他选择。

我使用 this 参考来使用 JavaScript 获取和设置 cookie，因为它比我的简单和容易，并根据您的要求对其进行了一些更改。

回到 PHP 部分，我不确定你为什么在 date 函数中使用 s 格式。它只能从文件的修改时间中获得几秒钟的时间，这是不可靠的，因为在某些时候几秒钟可能是相同的。比如你在 11:30:50 修改了一个文件，在 11:31:50 又修改了一个文件，重新加载页面不会生效。另外，我知道这是一种非常罕见的情况。尽管如此，还是坚持使用 filemtime，因为它会返回 unix 时间戳，并且不会在任何时候都相同。

希望对你有帮助！

Answer 2

您正在使用 date("s", ...)，它只返回时间的秒部分 - 即现在它在我的时区是 11:42:16，因此将返回值 "16"。您想要的是自纪元以来的总秒数，您可以使用 date() 函数获得，但使用返回整数的 time() 会更容易。

同样在您的 JS 代码中，您正在使用 var 重新定义变量 - 不要这样做。 :)