javascript - 文件更改时刷新页面

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 时间戳，而且任何时候都不会相同。

希望对你有帮助!