1

Всем привет, как в js сделать проверку на появление элемента на странице?

У меня автоматически через сторонний код подгружается элемент <div id onesignal-popover-dialog>
Нужно проверить, когда появляется это окно, а после вывести хотя бы Alert.

Подскажите как это сделать. После C# в js по-другому как-то циклы и паузы состоят.

1
  • 1
    какой элемент добавляется, можно разметку в вопрос? 30 июн 2019 в 13:38

3 ответа 3

1

Как то так:

// раз в секунду ищем элемент
let i = setInterval(function() {
    if (document.querySelector("#onesignal-popover-dialog")){
        // если нашли останавливаем таймер и вызываем алерт
        clearInterval(i);
        alert("element found")
    }
}, 1000);

// эмуляция асинхронного добавления, через 2 секунды добавим элемент
setTimeout(function(){
  document.write("<div id='onesignal-popover-dialog'>hello</div>")
},1000)

2
  • Спасибо)))))))))
    – Микка
    30 июн 2019 в 18:44
  • @Микка пожалуйста, обращайтесь 30 июн 2019 в 18:45
0

Думаю вам поможет MutationObserver. Можно отслеживать изменения DOM.

-1

В моём ответе я отлавливаю событие click на элементе div с классом click-me. Когда по эл-ту кликнули, срабатывает событие, в котором мы описали появление div с классом alert. А так же вызовется функция('show_info_about_alert'), которая сообщит нам, что отображен div с классом alert.

На нативном:

const cm = document.querySelector(".click-me");
cm.addEventListener("click", function(){
  const al = document.querySelector(".alert");
  al.style.display = 'block';
  show_info_about_alert();
}, false);

show_info_about_alert = () => console.log('Появился alert!');
.alert{
  display:none;
}
<div class="click-me">
  Show alert!
</div>
<div class="alert">
  Super!
</div>

С использованием библиотеки Jquery:

$('.click-me').on('click', function() {
  $('.alert').css('display', 'block');
  show_info_about_alert();
});

show_info_about_alert = () => console.log('Появился alert!');
.alert{
  display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="click-me">
  Show alert!
</div>
<div class="alert">
  Super!
</div>

Так же можно прикладываю сылку на документацию с примерами.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.