Заказать звонок
Логин
Пароль
Зарегистрироваться
После регистрации на сайте вам будет доступно отслеживание состояния заказов, личный кабинет и другие новые возможности

Динамическое изменение размеров IFRAME или общение окон между собой.

24.08.2019

Искал решение для измерения высоты body в iframe и следовательно выставление этой высоты у самого iframe. Но потом мне понадобилось изменять длину iframe динамично и вот тут встал вопрос об обмене данными между окнами. А оказалось, что динамическое изменение размеров IFRAME или общение окон между собой возможно даже и на разных доменах.

В общем есть в javascript такая "волшебная" функция, как: postMessage. Именно она и помогла в решении моей проблемы.

Вот конкретно мое решение (пример с iframe)

В странице, куда будете вставлять iframe (не забудьте поменять ID_MYFRAME на свой id вашего iframe):

// Ловим динамичный параметр длины страницы
window.addEventListener('message', function (e) {
	if (typeof(e.data)=='number') document.getElementById('ID_MYFRAME').height = e.data;
});

А вот на странице, которая является iframe теперь надо отослать сообщение нашей "волшебной" функцией:

// Отправляем в сообщении длину документа
parent.postMessage(document.documentElement.scrollHeight, '*');

Крутость в этой функции состоит еще в том, что она не имеет задержек между отправкой и приемом сообщений! Вот что пишут:

Задержки между отправкой и получением нет, совсем.

Если для setTimeout стандарт предусматривает минимальную задержку 4мс, то для postMessage она равна 0мс. Поэтому postMessage можно, в том числе, использовать как мгновенную альтернативу setTimeout.