Определить, когда страница изменилась в файловой системе, используя JavaScript

Question

Есть ли способ проверить, изменилась ли страница, когда страница находится в локальной файловой системе (file:/// не http:// или https://)?

Есть ответы здесь , которые используют AJAX для проверки заголовков на предмет «последнего изменения» заголовка, но это не возвращается при использовании файлового протокола.

Вот заголовки, возвращаемые в Firefox при локальном тестировании:

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

Обновление:
Похоже, что ответ установлен на файл и имеетсвойство lastModified в ответе.Я добавил ответ.

Answer 1

После некоторой отладки я заметил, что ответ задается для файла в свойстве response и имеет свойство 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://).

Answer 2

Используйте веб-сервер разработчика, который автоматически перезагружается при изменениях, в любом случае лучше тестировать с веб-сервером, чем обслуживать из файловой системы.

Answer 3

Исходя из ваших ответов в комментариях, я бы использовал некоторую форму кэширования страницы.

Проверьте этот ответ , чтобы получить текущее содержимое страницы в виде строки и кэшировать ее /хэш этого.Оттуда выполните 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);

Answer 4

Что вы можете сделать, это изменить заголовок запроса с HEAD на GET / POST, который вернет значение responseText.Отсюда очень легко проверить - имейте значение перед вызовом GET / POST с именем original или что-то подобное, сравните его с ответом и измените материал, если необходимо.