Как перезагружать страницу при появлении определённого элемента?

Question

[ReSpawner]

Иногда на сайте появляется затемнение экрана с просьбой обновить страницу. (т.к данные устарели)
Как сделать так чтобы при появлении "определённого элемента" на странице, в данном случае "затемнение экрана" , автоматически перезагружать её.
И повторять это каждый раз при появлении этого затемнения.
Возможно это можно сделать с помощью "Mutation Observer"

document.querySelector("#content > div > div.taskblackout")

это вызывает это затемнение через какое-то время. \прим. через 2-3 мин.

Comments

[Vitsliputsli]

Нужно разделять логику и отображение. Поэтому пркручивать нужно не к "затемнению экрана", а к логике его вызывающей, которая определила, что данные устарели.

Answer 1

[Алексей Уколов]

Самое простое и надёжное - проверять наличие элемента каждые N секунд (например, 5):

setInterval(function () {
  const $element = document.querySelector("#content > div > div.taskblackout");

  if ($element && $element.style.display === 'block') {
    document.location.reload()
  }
}, 5000);

Единственный минус этого решения - задержка. Элемент может появиться сразу после срабатывания и провисит эти N секунд.
Ещё, если вы часто уходите с этой вкладки, может накопиться очередь из интервалов - в этом случае лучше заменить на setTimeout, который внутри будет вызывать следующий setTimeout:

const check = () => {
  const $element = document.querySelector("#content > div > div.taskblackout");

  if ($element && $element.style.display === 'block') {
    document.location.reload()
  } else {
    setTimeout(check, 5000);
  }
};

setTimeout(check, 5000);

Comments

[Алексей Уколов]

Я попробовал этот скрипт, страница просто перезагружается каждые 5 секунд.
Может есть другие варианты?

Есть другие варианты. Очевидно, элемент в разметке всегда есть, но он показывается через стили. Показывайте код страницы, найдём нужную проверку.

Answer 2

[Mikhail Osher]

MutationObserver

Comments

[Алексей Уколов]

Раз querySelector всегда возвращает элемент, то, скорее всего, никакого mutation и не происходит. Разве что атрибуты меняются у нужного элемента, но я как раз не могу от автора добиться конкретного кода, чтобы можно было понять, за чем следить. А о существовании MutationObserver он и сам знает, судя по тексту вопроса.

[Mikhail Osher]

Да. Я предположил, что автор знает, как найти нужный DOM элемент, и на него уже повесить обсервер.