Как я могу добавить прослушиватель событий, который запускает при добавлении определенного типа элемента в DOM?

Я хочу вызывать определенный метод всякий раз, когда в текущем окне создается новый iframe . Именно youtube iframe player мне нужно слушать новые iframes всякий раз, когда он создается или включается в текущем окне . возможно ли сделать что-то подобное ? Пожалуйста, дайте мне знать, если есть какой-нибудь способ .Я попробовал приведенный ниже код, но этот код не будет обнаруживать новые iframes, которые создаются динамически . Я попытался в google, но не получил никакой информации 

const iframes = document.getElementsByTagName('iframe');
  forEach(iframes, (iframe) => {
        addEventListeners(iframe);

      }
    }
  });
1 2
javascript iframe youtube-iframe-api

1 ответ:

Вы можете использовать MutationObserver. Он позволяет прослушивать мутации в DOM; это похоже на то, как вы устанавливаете прослушиватель событий на самом dom и слушаете каждый раз, когда к нему добавляется iFrame: 

(new MutationObserver(mutations => {
    mutations[0].addedNodes.forEach(node => {
        if (node.tagName.toLowerCase() === 'iframe') {
            //do stuff
        }
    });
})).observe(document.body, {childList: true});

Здесь мы слушаем document.body, и мы только слушаем изменения в его дочерних узлах (узел добавляется или удаляется). forEach проходит через каждый добавленный узел (если таковой имеется) и проверяет, является ли его iFrame. Если это так, то сделайте то, что вам нужно сделать в строке "делать вещи".

1