Как отловить создание нового IFrame на странице?

Всем привет.

Как на странице поймать момент создания нового IFrame?

Помимо скрипта, который я могу менять, на странице есть скрипты, которые я менять не могу. Мне надо отловить момент, когда любой другой скрипт на странице создаст IFrame.

Пока ничего кроме как следить за изменением DOMa не нашел. Буду признателен за описание возможных решений.

Спасибо.

EDIT:

Вариант с периодическим обходом всего DOM и поиском новых IFrame, понятное дело, не интересует. Точнее понятно, что можно сделать так, но это будет запасной вариант.
  • Вопрос задан
  • 1769 просмотров
Решения вопроса 1
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
Рекомендуется использовать Mutation Observer вместо Mutation Events (выделено жёлтым). Подробнее почитать тут.
Помимо асинхронности и возможностей больше, и нагрузка ниже.

JS
(function () {
	try {
		var observer = new MutationObserver(function (mutations) {
				mutations.forEach(function (mutation) {
					for (var i = mutation.addedNodes.length; i--;) {
						addedControl(mutation.addedNodes[i]);
					}
				});    
			});

		document.addEventListener('DOMContentLoaded', function (e) {
			observer.observe(document.body, {
				childList: true
			});
		}, false);
	} catch (z) {
		document.addEventListener('DOMNodeInserted', function (e) {
			addedControl(e.target);
		}, false);
	}

	function addedControl (target) {
		console.log(target);
	}
})();

document.addEventListener('click', function (e) {
	if (e.target.tagName == 'BUTTON') {
		document.body.appendChild(document.createElement('iframe'));
	}
}, false);


HTML
<button type="button">Добавить</button>
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Вы можете отслеживать добавление новых элементов на страницу при помощи DOMNodeInserted:
(function (w, d) {
  w.onload = function () {
  	var wrap = d.querySelector('#wrapper'), add = d.querySelector('button');
    wrap.addEventListener('DOMNodeInserted', function(event) {
      var target = event.target;
      alert("На страницу был добавлен " + target.tagName);
    }, false);
    
    add.addEventListener('click', function (e) {
      var el = d.createElement('iframe');
      wrap.appendChild(el);
      e.preventDefault();
    }, false);
  };
}(window, document));

Живой пример.
Работает во всех нормальных браузерах и IE9+
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы