@Galdar
Web, JS, PHP, NGINX, Linux

Как из iframe обратиться к родителю?

Каким образом можно обратиться из iframe к основному HTML блоку или хотя бы к самому тегу iframe. Все способы которые я находил они сделаны для обращения из родителя к тегу iframe но не на оборот.

HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>IFRAME</title>
  </head>
  <body>
    <iframe src="page/banner.html" width="468" height="60" align="left">
              <!DOCTYPE html>
              <html>
                      <head>
                             <meta charset="utf-8" />
                             <title>IFRAME</title>
                      </head>
                      <body>
                      </body>
              </html>
    </iframe>
  </body>
</html>


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

1 - Показано загружаемое приложение которое меняет высоту стандартного блока iframe, по дефолту она 600 px
1
5f6de0ebd4544262829852.png

2 - Показан DIV блок в который записан STYLE, которого нет по умолчанию
2
5f6de0f3c8773758502383.png

3 - Ну и стиль который записан, в моем приложении он пустой.
3
5f6de0fc86082798011802.png


Как только не пытался записать стиль, но не ID iframe ни CLASS не видно из iframe. Кто знает как решить такую проблему?
  • Вопрос задан
  • 1908 просмотров
Пригласить эксперта
Ответы на вопрос 1
zkrvndm
@zkrvndm
Архитектор решений
Чтобы послать сигнал из фрейма в родительской документ, в родителе ставите обработчик message:
window.addEventListener('message', function(event) {
	var message = event.data;
	console.log('Получено сообщение из фрейма: ' + message);
});

Далее внутри фрейма попробуйте выполнить:
window.parent.postMessage('Какое-нибудь произвольное сообщение', '*');

И увидите, как сработал обработчик в родителе. Разумеется вместо сообщения, вы можете послать наружу, например, высоту фрейма или вовсе какой-нибудь произвольный JS-код, который потом можно выполнить внутри обработчика.

Больше информации вы можете добыть самостоятельно, через поиск Яндекса:
https://yandex.ru/search/?text=JavaScript%20postMe...
Если мой ответ помог, отметьте его решением.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы