使用 JavaScript 检测文件系统上的页面何时发生更改答案

【问题标题】：Detect when a page has changed on the filesystem using JavaScript使用 JavaScript 检测文件系统上的页面何时发生更改
【发布时间】：2018-12-09 11:07:55
【问题描述】：

当页面位于本地文件系统（file:/// 而不是http:// 或https://）时，有没有办法检查页面是否已更改？

有答案here 使用 AJAX 检查标头中是否有“Last-Modified”标头，但在使用文件协议时不会返回。

这是本地测试时在 Firefox 中返回的标头：

// headers
Content-Type: text/xml
Content-Length: 20941

更新：
看起来响应已设置为文件，并且响应具有 lastModified 属性。我已经添加了一个答案。

【问题讨论】：

你可以试试document.lastModified。如果这不起作用，是否可以根据您的应用程序监视和缓存页面的内容？
页面加载到浏览器后，我可以在当前文档上获得document.lastModified。但我必须重新加载文档以检查该值。因此，我正在寻找方法来查找文件系统上的文档是否已更改，并仅在更改时才重新加载。

标签： javascript jquery html ajax filesystems

【解决方案1】：

根据您在 cmets 中的回复，我会使用某种形式的缓存页面。

检查this answer 以将页面的当前内容作为字符串并将其缓存/它的哈希值。从那里，对当前页面执行 AJAX 请求并比较内容/哈希。如果它们不匹配，那么您可以重新加载页面。

let contents = document.documentElement.outerHTML;
let frequency = 5000; // How often to check for changes (ms)

setInterval(() => {
    let xmlhttp = new XMLHttpRequest();

    xmlhttp.addEventListener("load", (res) => { 
        if(res.responseText != contents)
            window.location.reload(true);
    });

    xmlhttp.open("GET", window.location.href);
    xmlhttp.send();
}, frequency);

【讨论】：

【解决方案2】：

您可以将请求标头从 HEAD 更改为 GET/POST，这将返回一个 responseText 值。从那里，很容易检查 - 在 GET/POST 调用之前有一个名为 original 或类似名称的值，将其与响应进行比较，并在必要时进行更改。

【讨论】：

这可能会错过很多更改。如果文件包含 aaaaaa 但随后更改为 bbbbbb 怎么办？
好吧，OP @1.21gigawatts 没有给我们任何其他标头，所以我真的没有任何其他事情要检查。他们也没有发布他们的代码或示例文件。
谢谢。如果我无法获得最后修改的日期，我将返回内容长度并检查它是否已更改，并注意在内容大小完全相同时它可能会错过更改。
有没有办法获取文件的内容？这样会容易得多。
然后您就可以从那里检查它们 - 非常简单！

【解决方案3】：

经过一些调试，我注意到响应设置为响应属性中的文件，并且上面有一个 lastModified 属性！

在@bugfroggy 的回答中修改代码似乎可行：

function checkForChanges() {
    var contentDate = null;
    var frequency = 5000;

    setInterval(() => {
        let xmlhttp = new XMLHttpRequest();

        xmlhttp.addEventListener("load", (progressEvent) => {
            console.log("Content loaded()");
            if (contentDate==null) {
                contentDate = xmlhttp.response.lastModified;
                return;
            }

            if(xmlhttp.response.lastModified != contentDate) {
                window.location.reload(true);
            }
        });

        //xmlhttp.open("GET", window.location.href);
        xmlhttp.open("HEAD", window.location.href);
        //xmlhttp.responseType = "blob";
        xmlhttp.send();
    }, frequency);

}

checkForChanges();

注意：我认为上面的代码使用了 ES5 或 ES6 特性，我不知道这是否适用于服务器（http:// 或 https://）。

【讨论】：

【解决方案4】：

使用在更改时自动重新加载的开发网络服务器，最好使用网络服务器进行测试，而不是从文件系统提供服务。

【讨论】：

要求是不需要网络服务器。