Как повесить событие на onload/onresize iframe'a?

Question

[Назар Мокринский]

Есть такой jQuery плагин CSS Template Layout Module Implementation, он давно не обновлялся, и я решил его подпилить. Добавил поддержку разной высоты ячеек в строке, правильного подсчёта отступов, в том числе учитывая box-sizing: border-box, и т.д. Не проверял, соответствует ли это текущей спецификации W3C, но мне была нужна именно такая функциональность. В процессе работы производится подсчёт высоты элементов.

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

$('iframe').live('load', function () {/**/});<br>

Пробовал и другие подобные варианты с $.on(), $.bind(), $.load(), $.delegate() — ничего не получается ни в одном из случаев, событие не возникает. Лезть в TinyMCE не хотелось бы, потому как решение должно быть как можно более универсальным, и работать с любыми другими редакторами подобного типа.

По событию будет производиться пересчёт высоты элементов.

Как ещё можно перехватить эти события, при том, что на момент работы плагина iframe'ы не существуют?

jQuery 1.8.1

Answer 1

[Nodge]

Можно попробовать как-то так:

// редактор создает фрейм
var frame = document.createElement('iframe');
$(document.body).append(frame);

// отлавливаем фреймы
$('iframe').each(function() {
    $(this.contentWindow.document).ready(function() {
        console.log('frame ready');
    });
});

Comments

[Назар Мокринский]

Опять двадцать пять, вы прочитали вопрос полностью?:

Как ещё можно перехватить эти события, при том, что на момент работы плагина iframe'ы не существуют?

Когда и как редактор создает фрейм не знает никто, это может случиться когда угодно. Мне не ловить его нужно, а событие повесить, в заголовке же русским языком написано!

[Nodge]

Тогда есть такое вот событие:

$(document.body).on('DOMNodeInserted', 'iframe', function(e) {
    console.log('inserted', e);
});


var frame = document.createElement('iframe');
$(document.body).append(frame);

Правда работает в IE9+, для старых IE нужно костыли погуглить…

[Назар Мокринский]

Большое спасибо, работает! Устраивает IE10+, так что ваш ваш вариант подходит.

Answer 2

[Nesvet]

Можно в iframe подключить скрипт, в котором $(function () { ... }), который будет выполнять функцию, объявленную в родительском документе, через window.top.myFunction()

Comments

[Назар Мокринский]

И как вы себе представляете не трогая кода редактора всунуть туда подключение скрипта? И чтобы в любом другом редакторе работало. Да что же это такое, изначально написал:

Лезть в TinyMCE не хотелось бы, потому как решение должно быть как можно более универсальным, и работать с любыми другими редакторами подобного типа.