Как выполнить код JavaScript после того, как элемент создан без jquery?

Question

Я разрабатываю расширение Chrome, которое будет изменять элемент на веб-сайте. Этот веб-сайт отправляет много вызовов ajax после загрузки основного документа для получения содержимого страницы (архитектура фреймворка GWT). Мне нужно изменить содержимое этой веб-страницы, и элемент, который я хочу изменить, будет создан только после всех вызовов ajax.

давайте предположим, что id элемента, который я хочу изменить, равен #idContainer > div > div.container.container\--wider.\\30, который будет доступен только после завершения вызова ajax.

, так как выполнить код js (через расширение chrome -> скрипт содержимого) после того, как этот элемент станет доступен.

Примечание: я видел много похожих вопросов в stackOverflow, но ни на один из них не было ответов без использования jQuery.

Answer 1

Если вы пишете расширение для Chrome, вам, вероятно, следует использовать API chrome.webRequest и onCompleted событие

chrome.webRequest.onCompleted.addListener(function callback)

Answer 2

Рассмотрите возможность использования Mutation Observer . Вот пример некоторых моих проектов, в которых мне приходилось решать точно такую ​​же проблему.

// observer callback
const callback = (mutations) => {
  const matching = [];
  for (const {addedNodes} of mutations) { // for each mutation
    for (const node of addedNodes) { // iterate through all added nodes
      if (node.nodeType !== Node.ELEMENT_NODE) {
        continue; // only react to real element nodes
      }
      if (node.children[0]) { // Here you can check for what you want
        matching.push(...node.getElementsByTagName('pre'));
      }
    }
  }
  if (matching.length === 2) { // I needed the second pre tag
    ipcRenderer.send('note-result', matching[1].innerText);
  }
};

// intialize the observer with the callback
const observer = new MutationObserver(callback);
// pass a targetNode and an options object in the observe method
observer.observe(document.body, {attributes: true, childList: true, subtree: true}); 

В этом примере меня заинтересовал textContent второго тега pre, появившегося вDOM.

Вы также можете прекратить наблюдение с помощью метода отсоединения:

observer.disconnect();

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