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

Question

[veitmen]

Всем привет.

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

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

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

Спасибо.

EDIT:

Вариант с периодическим обходом всего DOM и поиском новых IFrame, понятное дело, не интересует. Точнее понятно, что можно сделать так, но это будет запасной вариант.

Answer 1

[Евгений Петров]

Рекомендуется использовать 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>

Comments

[veitmen]

Да, похоже на правду. В рабочий день проверю отпишусь. Предварительно - это решение.

[Евгений Петров]

veitmen: Добавил ветку для IE 10 и ниже, на что указал Михаил Горячкин.

[veitmen]

Может быть подскажете, как обойти все дерево фреймов, если в фрейме будет фрейм. Просто ад какой то...

[Евгений Петров]

veitmen: Объект document для каждого окна (читай iframe) свой. Для каждого встроенного окна нужно внедрять описанный алгоритм.
Если документ, загружаемый в добавленный iframe, соответствует политике происхождения, это можно сделать. Если нет — никак.

[veitmen]

В целом решение работает. Не не решает мою задачу. Мне надо подменить confirm во всех фреймах, с учетом тогоЮ что во фрейме может быть фрейм. Пробовал подписаться во всех фреймах на эти события, но какой то ад получается. Может быть есть идеи?

Answer 2

[Михаил Горячкин]

Вы можете отслеживать добавление новых элементов на страницу при помощи 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+

Comments

[Евгений Петров]

Желательно использовать DOMContentLoaded в document. Ну и inline обработчики — не комильфо, раз уж addEventListener задействуете.

[Михаил Горячкин]

Использование DOMContentLoaded, согласен тут будет логичнее. Использовал Mutation Events вместо Mutation Observer по причине, что Mutation Observer из IE держит только IE11, но согласен, что упомянуть его стоило. А вот где вы inline обработчики нашли?

[Евгений Петров]

Михаил Горячкин: window.onload

[Евгений Петров]

Михаил Горячкин: Добавил для старых IE обработку, но ситуация ровно обратная — говорим про Mutation Observer, а про Mutation Events упоминаем.