Друзья,перелопатил половину интернета, но рабочего решения так и не нашел. В общем, в iframe необходимо загрузить сайт и взять его высоту, пробовал плагин iFrame Resizer, высота не менялась, стандартные 150рх, пробовал easyXDM — ошибка, пробовал вот такую штуку
1 ответ 1
Если я правильно понял Ваш вопрос: Вы хотите загрузить в iframe некоторый контент, но проблема в том, что Вы не знаете высоту загружаемого контента, и соответственно не знаете какую высоту iframe-а Вам нужно указать.
Я сталкивался с подобной проблемой, когда мы разрабатывали виджеты, например для edx.
Вы не можете выставить высоту iframe во «внутренностях» iframe. Как вариант, Вы можете посчитать высоту во «внутренностях» iframe и передать ее в js который подключает iframe в родительском окне. Для того чтобы связать js во «внутренностях» iframe и js в родительском окне, мы использовали библиотеку от Mozilla jschannel.
Обратите внимание, что высота загруженного контента не всегда будет одинаковой, к изменению высоты могут привести как изменение ширины окна браузера (если у Вас респонсив страница) так и действия пользователя внутри iframe — все эти кейсы можно решить добавляя новые события к jschannel.
В случае если у Вас нет доступа к содержимому iframe и Вы хотите получить его высоту, к сожелению, я не знаю что Вам можно посоветовать, и вообще возможноли это.
Иногда требуется разместить iframe на странице сайта содержащий раскрывающийся списки, слайдеры, т.е. высота фрейма может меняться. Но у iframe всегда фиксированная высота и появляются полосы прокрутки.
Чтобы это исправить достаточно добавить jQuery скрипт который будет отслеживать изменения в дереве DOM фрейма и плавно изменять его высоту.
Думаю, многие, кто сталкивался в своей работе с iframe, сталкивались и с задачей установки высоты этого самого айфрейма.
Это может быть необходимо, например, когда ты хочешь дать возможность пользователям ставить виджеты с вашего сайта на их сайт, и хочется, чтобы размер контейнера (iframe) виджета соответствовал размерам содержимого этого виджета.
В яндексе можно найти множество решений этой проблемы, но большинство из них обладают одной проблемой: они не поддерживают возможность менять размеры окна когда содержимое iframe и родительский элемент находятся на разных доменах.
Есть одно неплохое кросс-доменное решение, но оно было написано в 2007 году, а с тех пор многое изменилось. Поэтому пришлось разрабатывать решение этой проблемы самостоятельно, основываясь на приведенном решении.
Собственно, основное, что поменялось — это появился инструмент window.postMessage, который позволяет окнам браузера обмениваться сообщениями. Благодаря этому мы сможем сделать аналог приведенного решения, обладающий следующими преимуществами:
- В новых браузерах не будет спама в hash (и заодно будет корректно работать хеш-навигация на клиентской странице)
- корректная работа в webkit
- более простой и понятный код
Наш код не должен зависеть от каких-то внешних факторов, и для его использования должно быть достаточно на стороне содержимого фрейма подключить 2 js файла (один для postMessage, а ворой — наш), а на стороне клиента — подключить также 2 js файла и добавить айфрейму два аттрибута — id и name (должны быть идентичны), а также на onload повесить регистрацию iframe.
Для работы с postmessage мы будем использовать следующую библиотеку:
postmessage.freebaseapps.com
Эта библиотека является очень удобной оберткой для window.postMessage, которая, кроме прочего, также позволяет пользоваться передачей данных через hash в браузерах, которые не поддерживают window.postMessage.
Логика работы скрипта предельно проста — на клиентской странице мы «регистрируем» iframe — отправляем дочерней странице (которая в iframe) идентификатор этого iframe и подписываемся на сообщения от дочерней страницы. При получении сообщения — изменяем размер.
На стороне дочерней страницы (которая в iframe) мы в свою очередь подписываемся на сообщения о регистрации, когда оно приходит — запоминаем идентификатор и включаем таймер, который при изменении размера содержимого фрейма отправляет родительской странице информацию о том, что нужно поменять размер iframe.
Собственно вот и все. Сам код скриптов:
FrameManager.js («клиентский» скрипт)
Frame.js (скрипт для содержимого фрейма)
И напишем 2 тестовых html-страницы:
В дочерней странице также можно расскомментировать участок кода с подключением jquery — тогда определение высоты будет более точным. Буду благодарен за нормальные кросс-браузерные функции для определения размеров страницы и окна, я использовал первые, которые нашел — они работают, но пикселей на 10 в вебките допускают погрешность.
Для меня это некритично, потому что у меня на стороне клиента (т.е. в дочерней странице) есть jquery, но у кого-то, возможно, его не будет — тогда код все равно сохранит работоспособность.