Показывать предупреждение при изменении изображения на сайте - PullRequest
Новая
       15

Показывать предупреждение при изменении изображения на сайте

0 голосов
/ 19 марта 2019

У меня есть сайт GitHub Pages с изображением на нем. Я пытаюсь, чтобы на веб-странице отображалось предупреждение при каждом изменении веб-сайта.

До сих пор я подходил к реализации функции автообновления: 

setTimeout(function(){ location.reload(); }, 60000);

Это будет автоматически обновляться каждую минуту, ловя все изменения, которые я делаю. Тем не менее, мне нужно показывать предупреждение всякий раз, когда содержимое страницы изменяется. Важно помнить, что содержимое не будет меняться при каждом обновлении - возможно, только каждые 10 минут (когда я нажимаю изменения).

Я думаю, что способ сделать это состоял бы в том, чтобы сохранить имя изображения, а затем посмотреть, меняется ли имя изображения при каждом обновлении - и если имя действительно менялось, то показать предупреждение. Я читал о чем-то, что называется LocalStorage, но я не уверен, как подходить к сохранению имени файла - я новичок в JS / HTML.

Является ли использование LocalStorage лучшим подходом к этой проблеме? Каковы другие альтернативы / простые способы реализовать это на странице GitHub?

Заранее спасибо.

Ответы [ 2 ]

1 голос
/ 19 марта 2019

Если я четко понимаю, что вам нужно реализовать, я бы посоветовал вам прочитать о MutationObserver в JavaScript. Этот класс отслеживает все изменения, которые вносятся в связанный элемент. Вот код и работает демо : 

<html>
<body>
<p>
Some content
</p>
</body>

<script>
// select the target node
var element = document.getElementsByTagName('p')[0];

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  alert("Some changes were made");
});

// configuration of the observer:
var config = { childList: true}; // ,subtree: true, characterData: true 

// pass in the target node, as well as the observer options
observer.observe(element, config);

setInterval(function () { // here you can make your changes programatically
element.innerHTML += "New content";
}, 2000)
</script>
</html>
0 голосов
/ 19 марта 2019

Вы также можете использовать куки, то есть хранить в куки последнюю «версию» чего угодно - где «версия» может быть строкой, числом и т. Д.

Это имеет то преимущество, что оно также отправляетсяна сервер, так что вы можете сгенерировать макет / код оповещения непосредственно на сервере.

Проверьте https://github.com/js-cookie/js-cookie на наличие сценария, упрощающего это.

Другой альтернативой является реализация насервер сценарий, который отвечает, изменился ли контент.Что-то вроде http://foo.bar/changed?lastVer=XXXX, которое может возвращать JSON, как {changed:true,message:'We have changed the change'}.Вы получите это через ie.jQuery.getJSON() или vanilla XMLHttpRequest, и, если это так, покажите сообщение пользователю, а затем перезагрузите страницу.Но для этого потребуется где-нибудь создать работающий серверный скрипт.

Третий вариант - загрузить страницу, скажем, в скрытый IFRAME, проверить, изменилось ли изображение или контент, и, если это так, трансплантировать только изображение - илиопределенный кусок контента - на главную страницу, не обновляя его.Или, может быть, обновить его.Идея состоит в том, чтобы загрузить страницу в IFRAME и обнаружить там, если что-то изменилось.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...