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

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

[Евгений]

const mutationObserver = new MutationObserver(records => {
    records.forEach(record => record.addedNodes.forEach(({ classList }) => {
        classList?.contains('taskblackout') ? location.reload() : undefined
    }))
})
mutationObserver.observe(
    document.querySelector('body'), {
        childList: true
    }
)
setTimeout(() => {
    document.body.appendChild(
        document.createElement('div')
    ).classList.add('taskblackout')
}, 5000)

P.S. Ну а вообще, Vitsliputsli в комментарии правильно сказал. То есть, вместо создания обсервера для отслеживания одного элемента - можно же просто изменить логику события, которое создаёт этот элемент (поп-ап с затмением) и ожидает действий пользователя на простую принудительную перезагрузку страницы.

Comments

[ReSpawner]

К сожалению страница просто перезагружается каждые 5 секунд, не пытаясь дождатся затемнения.
Это было и со скриптом в первом сообщении.

[Евгений]

ReSpawner, ну дак вот этот кусок убери:

setTimeout(() => {
    document.body.appendChild(
        document.createElement('div')
    ).classList.add('taskblackout')
}, 5000)

А вот здесь:

mutationObserver.observe(
    document.querySelector('body'), {
        childList: true
    }
)

Замени "document.querySelector('body')" на "document.querySelector('#content')"

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

ReSpawner, я же вам написал - у вас этот блок на странице есть всегда, поэтому такие простые проверки не срабатывают. Покажите нам её, и мы вам скажем как проверять.

[Евгений]

ReSpawner, если начнёт бесконечно перезагружаться - значит у тебя этот поп-ап уже создан на странице, предположительно, и если оно так - то тебе не создание элемента надо отслеживать, а изменение аттрибутов, как ранее уже предположили.

[ReSpawner]

Алексей Уколов,



Могу загрузить код всей страницы на pastebin
если конечно тут разрешены ссылки.

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

ReSpawner, ну вот - нужно смотреть на атрибут style, значит. Обновил свой ответ.
MutationObserver тоже можно под это дело адаптировать, но я бы сказал, что это будет оверинжиниринг.

[ReSpawner]

Алексей Уколов, Да, ваш второй дополненный скрипт работает хорошо.
Спасибо!

Answer 3

[Mikhail Osher]

MutationObserver

Comments

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

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

[Mikhail Osher]

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