Как добавить прослушиватель событий для всплывающего окна onclick In Javascript? - PullRequest
Новая
       5

Как добавить прослушиватель событий для всплывающего окна onclick In Javascript?

0 голосов
/ 14 апреля 2020

Учтите, что есть некоторый тег гиперссылки, который вызывает API-интерфейс к бэкенду.

Пример: 

<a  href="/get/contact-info/" id="ember107" >Contact info </a>

После завершения вызова API бэкэнда это вызовет / откроет всплывающее окно на этой странице.

Всплывающее окно data: (пример данных div) 

<div id="ember"> <h1 id="pv-contact-info"> Contact Name</h1></div>

Моя цель - извлечь данные из этого всплывающего окна (тег выше). Скажем имя контакта из тега h1.

что я пробовал до сих пор: 

let atag = document.getElementById("ember107");
atag.addEventListener('click', () => { 
    document.getElementById("pv-contact-info").innerText; // getting from popup h1 tag
});
atag.click(); // explicit click

Проблема, с которой я столкнулся , равна Uncaught TypeError: Cannot read property 'click' of null, когда этот оператор выполняется document.getElementById("pv-contact-info").innerText;

Я знаю, проблема в том, что всплывающее содержимое не было загружено полностью, поэтому этот код document.getElementById("pv-contact-info") возвращает ноль.

Мой вопрос: есть какая-либо функция прослушивателя, чтобы проверить, загружен ли всплывающий контент полностью, или мы можем сделать это другим способом. Наиболее предпочтительно использовать поддержку браузера / vanilla javascript вместо библиотеки.

Ответы [ 2 ]

1 голос
/ 14 апреля 2020

Вы можете использовать MutationObserver для отслеживания изменений в DOM на странице. MDN .

Если вам нужно поддерживать совместимость со старыми браузерами, используйте событие click, чтобы запустить собственный ручной наблюдатель. Что-то вроде: 

var interval_id = false;
function lookForPopup(){
    if(interval_id){
        clearInterval(interval_id);
    }else{
        interval_id = setInterval(function(){
            var popup = document.getElementById('some-id');
            if(popup){
                // do something

                clearInterval(interval_id);
            }
        },1000);
    }
}
0 голосов
/ 15 апреля 2020

Поскольку @Gavin уже предложил использовать MutationObserver, мне бы хотелось немного подробнее остановиться.

Как я исправил эту проблему, используя MutationObserver. 

MutationObserver has an ability to watch for changes being made to the DOM tree.
 I mention the code below how it fixed my issue/requirement.


 // selecting the href by id and triggering a click event.
 let hrefDoc = document.getElementById("ember");
 divDoc.click();


let m = new MutationObserver(() => {
  let divDoc = document.getElementById("ember");
    new MutationObserver( () => {
          // Finally Extracting the required data
          console.log(document.getElementById("pv-contact-info").innerText);
        }
      }).observe(divDoc || document,observerOptions);
  });
m.observe(hrefDoc,observerOptions);

Как вы можете видеть выше, я добавил еще один дочерний MutationObserver для наблюдения за элементом divDo c. Это потому, что когда событие hrefDoc click вызывает родительский обратный вызов MutationObserver с некоторыми наблюдениями. Но в этом случае я не смог получить свой <div id="ember"> Mutation Node.

Вот почему я добавил еще один оператор let divDoc = document.getElementById("ember"); и ожидал этот targetNode в дочернем элементе MutationObserver. Наконец я извлек данные из этого тега <h1 id="pv-contact-info">

...