rednaxi 20 мар 2012 в 13:33

Автоматическая кросс-доменная установка высоты Iframe

4 мин

36K

JavaScript*Веб-разработка*

Туториал

+30

Комментарии 45

hautamaki 20 мар 2012 в 14:25

Всё круто, но ифреймы… как-то я сомневаюсь, что они прям уж так необходимы для организации виджетов. Js-api и дивы милее сердцу.

rednaxi 20 мар 2012 в 14:32

Собственно, изначально разрабатывал для того, чтобы довести до ума виджеты в Piwik — они там были сначала флешовые — было проще, потом они сделали рендеринг всех графиков без флеша и соответственно виджеты стали в iframe.

Нужно было с минимальными затратами сделать, чтобы вставленные на страницы сайта виджеты из статистики (у меня пивик используется в качестве инструмента статистики для поддоменов пользователей) выглядели нормально и автоматически ресайзились под размер.

Тратить свое время на переписывание движка виджетов в пивике в данный момент я не готов, а написать 2 небольших js-файла, которые надо просто подключить и все становится как хочется — почему нет.

Может еще кому пригодится (в piwik я уже отправил патч)

Aleks_ja 20 мар 2012 в 14:42

Если у вас виджет запускается через яваскрипт — то если тот сайт, с которого он запускается взломали — считайте и ваш также взломали (ну либо виджет со стрёмного ресурса взяли). Можно будет сделать любые изменения на вашей странице и, кроме того, вытянуть куки пользователя.

Если сделать window.parent у ифрэйма, который с другого домена — бравзер ругнётся.

spmbt 20 мар 2012 в 14:59

ифреймы… как-то я сомневаюсь, что они прям уж так необходимы для организации виджетов. Js-api и дивы милее сердц

При необходимости размещать защищённые данные в виджетах на чужих доменах иного решения просто нет. Если вы разместите виджет в диве и примете с сайта виджета защищённые данные с каким угодно шифрованием, тело виджета должно содержать расшифровку, следовательно, данные будут уже не защищены от взлома и использования третьими лицами.

При размещении в фрейме вы спокойно работаете с данными и выдаёте наружу только результат, через мембрану фрейма, по postMessage. Защита, разумеется не от пользователя, а от вирусных скриптов, к которым пользователь отношения не имеет. Если его страница заражена, через фрейм скрипты не проберутся, данные виджета будут в безопасности. С дивами этого добиться невозможно.

kocherman 20 мар 2012 в 15:51

Iframe будет жить всегда. Также, как и два бессмертных элемента верстки   и <br />.

poofeg 20 мар 2012 в 19:28

В xhtml нет   там  

НЛО прилетело и опубликовало эту надпись здесь

poofeg 20 мар 2012 в 20:17

я таких не встречал, Opera как натыкается начинает всю страницу парсить как html, a FF вовсе отказываются отображать страницу.

НЛО прилетело и опубликовало эту надпись здесь

poofeg 20 мар 2012 в 21:37

Ну например вот мои  
home.poofeg.ru/test/test.xhtml

НЛО прилетело и опубликовало эту надпись здесь

poofeg 20 мар 2012 в 21:57

А лучше отказаться от   от греха подальше :)

НЛО прилетело и опубликовало эту надпись здесь

kocherman 20 мар 2012 в 19:40

Лично я вместо пробела пользую распорку (прозрачный gif 1х1px или растягиваю его до нужных мне размеров).

AlexeyHoroshavin 20 мар 2012 в 14:31

очень пригодилось. спасибо!

Volshebnyi 20 мар 2012 в 14:35

Спасибо огромное! Как раз была проблема смены высоты фрейма в зависимости от содержимого.

Volshebnyi 20 мар 2012 в 15:43

Переписал код на основной странице на jQuery и добавил animate(). Пока что не видел проблем с погрешностью все ресайзится точно.

rednaxi 20 мар 2012 в 15:45

если пользоваться jQuery на дочерней странице то погрешности и не должно быть

Volshebnyi 20 мар 2012 в 15:59

Хм, почему-то вот это вот:

pm({
	target: window.frames[frame.id],
	type:   "register", 
	data:   {id:frame.id},
	url: frame.contentWindow.location
});

не заработало в ОгнеЛисе. Такое ощущение, что Firefox не умеет window.frames['frame_id']. Переписал так:

var target = undefined;
for (var i=0; i<window.frames.length;i++){
	if (window.frames[i].frameElement == frame){
		target = window.frames[i];
		break;		
	}
}
pm({
	target: target,
	type:   "register", 
	data:   {id:frame.id},
	url: frame.contentWindow.location
});

rednaxi 20 мар 2012 в 16:06

У меня работает — попробуйте фрейму кроме id добавить еще аттрибут name, идентичный этому id

Volshebnyi 20 мар 2012 в 16:11

Да, спасибо, совсем забыл про имя. Похоже Firefox ведет себя правильно, а Chrome слегка упрощает жизнь разработчику, выбирая айфреймы также и по id.

ArtyV 20 мар 2012 в 14:44

В яндексе можно найти множество решений этой проблемы, но большинство из них обладают одной проблемой: они не поддерживают возможность менять размеры окна когда содержимое iframe и родительский элемент находятся на разных доменах.

Видимо искать лучше в гугле, потому что когда мне надо было какое-то кроссдоменное решение, я нашёл это:
benalman.com/code/projects/jquery-postmessage/examples/iframe/
По сути то же самое, что и у вас (postMessage с фоллбеком на location.hash), только сделано 3 года назад :)

rednaxi 20 мар 2012 в 14:46

По сути тоже самое, но требует jQuery в дочернем и родительском документе.

Мое решение обходится без него (хотя конечно присутствие jQuery в дочернем документе упрощает дело)

rednaxi 20 мар 2012 в 14:54

Ну и еще мое решение лучше тем, что позволяет без обработки напильником расположить на странице любое количество фреймов — достаточно кажому iframe прописать id, name и зарегистрировать (FrameManager.registerFrame(this)) его.

Но все равно спасибо за ссылку.

B_Vladi 20 мар 2012 в 14:54

Я делал реализацию на postMessage + хак с window.opener в старых ослах (как реализовано в Open Social). Соответственно, никаких таймаутов, хешей, 1 скрипт на все страницы.

rednaxi 20 мар 2012 в 14:58

К сожалению, не знаком с Open Social. Поделитесь информацией с хаком window.opener?

Таймаут нужен для отслеживания изменения высоты документа внутри фрейма, насколько мне известно, по-другому это никак не отследишь — onresize срабатывает при изменении размеров окна, а не документа.

B_Vladi 20 мар 2012 в 17:09

Хак заключается в том, что осел позволяет менять свойство opener объекта window у созданного фрейма:

iframe.contentWindow.opener = {
  postMessage: function (data, domain){};
};

Соответственно, из фрейма делаем уже кроссбраузерный вызов:

window.opener.postMessage('data', '*');

Причем, как советует гугл, объект для opener лучше создавать через vbscript из-за соображений безопасности (каких конкретно не помню):

function onMessage(evt, domain) {}; // Обработчик postMessage, в осле evt == evt.data

window._onMessage = onMessage;
window.execScript(
  'Private onMessage\n' +

  'Class PostMsg\n' +
    'Public Sub postMessage(data, domain)\n' +
      'Call onMessage(data, domain)\n' +
    'End Sub\n' +
  'End Class\n' +

  'Set onMessage = window._onMessage\n' +
  'Set window._onMessage = New PostMsg', 'vbscript');

Ну а window._onMessage присваивается как opener в созданные фреймы.

spmbt 20 мар 2012 в 15:21

Аналогичное решение на юзерскрипте делалось в HabrAjax для кнопки Google Plus для передачи количества «лайков» наружу. Кто заинтересуется, может скрипт там посмотреть, он без сторонних библиотек типа postMessage.js, всё на виду. А вообще, планирую на этой неделе написать статью (уже написана) по этой же теме с проекцией на юзерскрипты, потому что из-за них в Хроме есть баг передачи данных через фрейм, который там обойдён.

Homakov 20 мар 2012 в 15:23

#site1
document.domain = 'com'

#site2
document.domain = 'com'

Romanych 20 мар 2012 в 15:44

Таким скриптом вы можете очень хорошо положить #site1, особенно если он вам не принадлежит. Вот сделали такую глупость, а потом вебмастер #site1 не может понять, почему в IE он создаёт frame, пытается к нему достучаться и получает Security Exception.

Homakov 20 мар 2012 в 15:52

по какой причине не может достучаться? Все может.
и можно делать domain='com' только при выполнении условия каких либо

Romanych 20 мар 2012 в 15:56

Вот прекрасное обсуждение: stackoverflow.com/questions/1886547/access-is-denied-javascript-error-when-trying-to-access-the-document-object-of

document.domain = document.domain;

И ты уже не можешь достучаться к динамически созданному IFrame'у.

Homakov 20 мар 2012 в 16:05

это только IE касается чтоли? меня ie вообще никоим образом не интересует.

Romanych 20 мар 2012 в 16:14

IE пользуется значительная часть интернет обывателей. Так что когда речь идёт о массовых и кроссбраузерных решениях, то что конкретно вас ie не интересует, никого больше не интересует.

Homakov 20 мар 2012 в 17:19

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

simpel 20 мар 2012 в 19:00

Не замеряли быстродействие такого метода? Сколько времени занимает один сеанс запрос-ответ между айфреймами? Например, у Facebook JS SDK есть проблема, что фенкция запроса параметров из iFrame занимает от 500мс и до бесконечности (FB.Canvas.getInfo), что очень замедляет работу приложения.

НЛО прилетело и опубликовало эту надпись здесь

can3p 21 мар 2012 в 10:46

Один из самых интересных моментов в этой задаче — общение между доменами, вы скинули на отдельную библиотеку, остальное достаточно просто, и задачу эту не раз уже решали в любом сервисе, который так или иначе держит у себя внешние приложения. См, например метод gadgets.window.adjustHeight в opensocial вообще и в apache shindig в частности. Интереснее было бы, если бы вы предложили архитектуру для предоставления API фреймам внутри сайта для общения с контейнером.

rednaxi 21 мар 2012 в 12:17

Так postMessage это фактически и есть простая обертка (API), позволяющая общаться фреймам внутри сайта с контейнером, а также окнам браузера между собой.

Задачу решать-то решали, но вот найти решение в открытом доступе было достаточно сложно (например, если я никогда не пользовался opensocial — откуда мне знать, что я там смогу найти ответ на мой вопрос?)
Теперь решение есть, и судя по количеству добавлений в избранное — оно достаточно востребованное.

SCINER 21 мар 2012 в 15:57

Как вообще изменить высоту этого iframe на iPad?
В нём он всегда растягивается по высоте содержимого и никак иначе =(

rednaxi 21 мар 2012 в 16:08

Как я понял, проблема в том, что мобильный webkit (на ios, android и т.д.) не имеет нормальной возможности скроллить что-то внутри элемента с фиксированной шириной/высотой, поэтому там все растягивается.

Тем не менее, есть решение:
iScroll

UksusoFF 21 мар 2012 в 18:41

В яндекс виджетах это, кстати, тоже както решено, но без подключения js в дочерние файлы:
api.yandex.ru/wdgt/doc/apiref/reference/widget-adjustiframeheight.xml