iframe automatic height adjustment using HTML5 cross domain web messaging

Posted on by

Yesterday I was working on a site that needed an iframe embedded in the page whose content came from a completely different domain. I try to steer clear of iframes at all costs normally so forgive me if what I’m about to say is pretty obvious.

I didn’t want the content in the iframe to appear as though it was in an iframe, so obviously I stripped off all the default browser styles…well, the border. I wanted the iframe to be as high as the content it was containing so that no scroll bars would appear.

So what I did was just give the iframe a height, however when the user navigated to a different page within the iframe, the height I had previously set was too big or too small.

I instantly thought “right, JavaScript will sort this out for me!” and proceeded to quickly code up a function that would inspect the scrollHeight of the content in the iframe and adjust the iframe height accordingly.

No! Said cross domain policy. I had momentarily forgotten all about that. Since the iframe content came from a different domain, I wasn’t allowed to access the document object of the iframe (or vice versa).

Here is how not to do it

Firefox says “Error: Permission denied to access property ‘document’” and other browsers similar.

I started searching for some kind of workaround.  Of course there isn’t really one…except I did find an interesting hack for Firefox. Which is – an iframe document can alter the url fragment of the parent window’s location object! ha madness.

The idea is that the document in the iframe alters the url fragment to read:

http://freestyle-developments.co.uk/blog/?p=150#138

Where 138 is the height of the iframe document (obviously you could be a bit more fancy and send other parameters and name them e.g #height:138 but for simplicity I’ve just set the value). The parent then reads this value and sets the iframe height accordingly:

var iFrameHeight = parseInt(location.hash.replace('#', ''));

So…yeah, that’s pretty interesting, but not really a solution. Check out the example implementation here.

Anyway, what to do? HTML5 web messaging to the rescue! Sweet! HTML5 web messaging is cross domain messaging done right. Not only does the messenger choose who should receive messages, but the recipient also chooses who to receive messages from.

The idea is that after the iframe document has loaded, it sends a message to the parent window telling it what it’s scrollHeight is. The parent listens for messages, and sets the height of the iframe when it receives a message.

A couple of things to note:

  1. There has to be communication between the two documents. i.e. the document on the external domain needs to actively send this message. Which can be a complete show stopper if you have no control over the document on the external domain
  2. This isn’t going to work on IE < 9. I tested the implementation linked below is working on FireFox 4 (Beta 7), Safari 5.0.2, Chrome 8, Opera 10.63 and Internet Explorer 9 Platform Preview 7. Which is a pretty good spread to be honest

Check out the example HTML5 web messaging implementation here.

1,493 thoughts on “iframe automatic height adjustment using HTML5 cross domain web messaging”

  1. Женский портал https://prins.kiev.ua всё о красоте моде отношениях здоровье и саморазвитии. Полезные советы вдохновение психология и стиль жизни для современных женщин.

  2. Онлайн женский портал https://replyua.net.ua секреты красоты стиль любовь карьера и семья. Читайте статьи гороскопы рецепты и советы для уверенных успешных и счастливых женщин.

  3. Современный женский https://novaya.com.ua портал о жизни моде и гармонии. Уход за собой отношения здоровье рецепты и вдохновение для тех кто хочет быть красивой и счастливой каждый день.

  4. Интересный женский https://muz-hoz.com.ua портал о моде психологии любви и красоте. Полезные статьи тренды рецепты и лайфхаки. Живи ярко будь собой и вдохновляйся каждый день

  5. Женский портал https://z-b-r.org ваш источник идей и вдохновения. Советы по красоте стилю отношениям карьере и дому. Всё что важно знать современной женщине.

  6. ВЕБОФИС — платформа, которая сводит воедино внешние и внутренние процессы в B2B, B2C и B2G, обеспечивая быстрый старт и прозрачное масштабирование. AI-линейка, маркетплейс и 25+ готовых конфигураций помогают подобрать модульный набор: личные кабинеты, ЭДО, гибкое управление проектами. Регулярные обновления добавляют инструменты импорта/экспорта Excel и отраслевые сервисные модули. Ищете электронный документооборот в crm? Запишитесь на презентацию на xn--90abjn3att.xn--p1ai и оцените, как платформа контролирует результат.

  7. Авто портал https://psncodegeneratormiu.org мир машин в одном месте. Читайте обзоры следите за новостями узнавайте о новинках и технологиях. Полезный ресурс для автолюбителей и экспертов.

  8. Авто портал https://bestsport.com.ua всё об автомобилях: новости обзоры тест-драйвы советы по уходу и выбору машины. Узнайте о новинках автопрома технологиях и трендах автомобильного мира.

  9. Онлайн авто портал https://retell.info всё для автолюбителей Актуальные новости обзоры новинок рейтинги тест-драйвы и полезные советы по эксплуатации и обслуживанию автомобилей.

  10. Автомобильный портал https://autoguide.kyiv.ua для водителей и поклонников авто. Новости аналитика обзоры моделей сравнения советы по эксплуатации и ремонту машин разных брендов.

  11. Современный авто портал https://necin.com.ua мир автомобилей в одном месте. Тест-драйвы сравнения новости автопрома и советы экспертов. Будь в курсе последних тенденций автоиндустрии

  15. ВЕБОФИС — это единый цифровой контур для B2B, B2C и B2G, который объединяет внешние и внутренние процессы, ускоряет запуск и делает масштабирование управляемым. Готовые конфигурации, маркетплейс решений и AI-линейка позволяют быстро собрать нужный стек: от личных кабинетов до электронного документооборота и управления проектами по Agile/Scrum. Регулярные обновления добавляют инструменты импорта/экспорта Excel и отраслевые сервисные модули. Ищете нейроконсультант? Запишитесь на презентацию на xn--90abjn3att.xn--p1ai и оцените, как платформа контролирует результат.

  16. Портал про стройку https://dcsms.uzhgorod.ua всё о строительстве ремонте и дизайне. Полезные советы статьи технологии материалы и оборудование. Узнайте о современных решениях для дома и бизнеса.

  17. Строительный портал https://msc.com.ua о ремонте дизайне и технологиях. Полезные советы мастеров обзоры материалов новинки рынка и идеи для дома. Всё о стройке — от фундамента до отделки. Учись строй и вдохновляйся вместе с нами

  18. Портал про стройку https://keravin.com.ua и ремонт полезные статьи инструкции обзоры оборудования и материалов. Всё о строительстве домов дизайне и инженерных решениях

  19. Онлайн-портал про стройку https://donbass.org.ua и ремонт. Новости проекты инструкции обзоры материалов и технологий. Всё что нужно знать о современном строительстве и архитектуре.

  21. Ищете онлайн-курсы в России, цены, рейтинги и настоящие отзывы? Посетите https://kedu.ru/ – это самый большой каталог образования в России. Вы найдете все учебные заведения, рейтинги, стоимость, а также скидки и акции. Сравнивайте ВУЗы, колледжи, учебные центры, репетиторов и вы обязательно найдете для себя лучших специалистов!

  22. Womontrue — женский онлайн-журнал, где мода, красота, здоровье и психология встречаются в умных, вдохновляющих материалах без клише. Каждый день — практичные подборки образов, бьюти-гайды, заметки о семье и путешествиях, плюс советы экспертов, которые хочется сохранить. Откройте свежие тренды и темы, близкие вам, на https://womontrue.ru/ — удобная навигация, актуальные рубрики и живой язык. Здесь легко найти поддержку и идеи, чтобы чувствовать себя уверенно и жить ярче.

  24. Ищете профессиональный блог о контекстной рекламе? Посетите сайт https://real-directolog.ru/ где вы найдете полноценную информацию и различные кейсы, связанные с контекстной рекламой, без воды. Ознакомьтесь с различными рубриками о конверсиях, продажах, о Яндекс Директ. Информация будет полезна как новичкам, так и профессионалам в своем деле.

  25. CasiFree — это умный навигатор по бонусам и фрибетам, который экономит ваше время и бережет банкролл. Ищете бонусы в казино? На casifree.website вы найдете аккуратно собранные акции, бездепозиты, промокоды и фриспины с понятными условиями: вейджер, сроки, лимиты ставки и потолок на вывод. Команда вручную проверяет детали, помечает изменения и честно указывает риски, поэтому выбрать подходящий оффер становится проще. Удобные фильтры, короткие разборы «стоит брать/лучше мимо» и ежедневные обновления помогают играть осознанно.

  26. Советы по строительству https://vodocar.com.ua и ремонту своими руками. Пошаговые инструкции современные технологии идеи для дома и участка. Мы поможем сделать ремонт проще а строительство — надёжнее

  27. Сайт о строительстве https://valkbolos.com и ремонте домов квартир и дач. Полезные советы мастеров подбор материалов дизайн-идеи инструкции и обзоры инструментов. Всё что нужно для качественного ремонта и современного строительства

  29. Полезный сайт https://stroy-portal.kyiv.ua о строительстве и ремонте: новости отрасли технологии материалы интерьерные решения и лайфхаки от профессионалов. Всё для тех кто строит ремонтирует и создаёт уют.

  30. Информационный портал https://smallbusiness.dp.ua про строительство ремонт и интерьер. Свежие новости отрасли обзоры технологий и полезные лайфхаки. Всё что нужно знать о стройке и благоустройстве жилья в одном месте

  31. Строительный сайт https://teplo.zt.ua для тех кто создаёт дом своей мечты. Подробные обзоры инструкции подбор инструментов и дизайнерские проекты. Всё о ремонте и строительстве в одном месте.

  32. МосСтройАльянс — когда крыша нужна «под ключ» без сюрпризов. Бригады промальпинистов работают круглосуточно, соблюдают СНиП и ГОСТ, берут на себя подбор и доставку материалов, а гарантия прописывается в договоре на 7–15 лет. От мембранной и мягкой кровли до фасадных работ и зимнего устранения протечек — реагируют срочно, цены держат на уровне прайс-листа без навесов. Подробности и расчёт сметы ищите на https://mos-stroi-alians.ru/ — надёжность, подтверждённая десятками реализованных проектов в Москве и области.

  33. Corporate Legal Launch (CLL) https://corpll.com/ — международная команда с 10-летним опытом сопровождения бизнеса в Европе и офшорных юрисдикциях. Мы помогаем предпринимателям и инвесторам: регистрируем компании (s.r.o., UAB, OU, LTD), оформляем лицензии (MiCA, CASP, EMI, PI, банковские, iGaming), открываем счета в банках и финтех-системах, разрабатываем AML/KYC-политики и предоставляем бухгалтерское сопровождение.

  34. Строим и ремонтируем https://buildingtips.kyiv.ua своими руками Инструкции советы видеоуроки и лайфхаки для дома и дачи. Узнай как сделать ремонт качественно и сэкономить бюджет.

  35. Энциклопедия строительства https://kero.com.ua и ремонта: материалы технологии интерьерные решения и практические рекомендации. От фундамента до декора — всё что нужно знать домовладельцу.

  36. Пошаговые советы https://tsentralnyi.volyn.ua по строительству и ремонту. Узнай как выбрать материалы рассчитать бюджет и избежать ошибок. Простые решения для сложных задач — строим и ремонтируем с уверенностью

  37. Новостной портал https://kiev-online.com.ua с проверенной информацией. Свежие события аналитика репортажи и интервью. Узнавайте новости первыми — достоверно быстро и без лишнего шума.

  38. Главные новости дня https://sevsovet.com.ua эксклюзивные материалы горячие темы и аналитика. Мы рассказываем то что действительно важно. Будь в курсе вместе с нашим новостным порталом

  39. Флойд Мейвезер ар дайым мыкты формада болот. Флойд Мейвезердин акыркы беттеши көп талкуу жараткан. Жаңы жаңылыктарды окуу үчүн floyd-mayweather-kg.com барагына өтүңүз. Флойд Мейвезердин ар бир беттеши чыныгы спектакль. Флойд Мейвезер – мыкты стратегиянын ээси. Анын акыркы жаңылыктарын укпай калган адам жок. Анын ар бир интервьюсу көңүл борборунда. Флойд Мейвезердин ийгилик сыры эмгек жана туруктуулук. Флойд Мейвезер ар дайым өзүнө ишенген. Флойд Мейвезердин мурасы келечек муундар үчүн үлгү.

  40. Ищете накрутку поведенческих факторов для SEO в Яндекс и Google? Посетите сайт https://clickolov.ru/ – ознакомьтесь с этапами работ по улучшению поведенческих факторов, а также наши тарифы и стоимость. При необходимости посмотрите наши кейсы. Мы проводим бесплатный тест, обсуждаем ваши цели и задачи, а также предоставляем подробную аналитику по видимости сайта, динамике позиций и росту трафика, чтобы вы могли отслеживать прогресс на каждом этапе.

  41. Балторганик задаёт планку эффективности для органических и органоминеральных удобрений: гранулы, прошедшие глубокую термообработку при 450°C, помогают восстанавливать плодородие почв, повышают качество урожая и сокращают негативное воздействие на экосистемы. Производитель разрабатывает решения для зерновых, овощей, бобовых и технических культур, ориентируясь на долгосрочный баланс почвы и реальную экономику поля. Узнайте больше о линейке и кейсах на https://baltorganic.ru/ — и выберите удобрение, которое работает, а не обещает.

  44. Строим и ремонтируем https://srk.kiev.ua грамотно Инструкции пошаговые советы видеоуроки и экспертные рекомендации. Узнай как сделать ремонт качественно и сэкономить без потери результата.

  45. Обустраивайте дом https://stroysam.kyiv.ua со вкусом Современные идеи для ремонта и строительства интерьерные тренды и советы по оформлению. Создайте стильное и уютное пространство своими руками.

  46. Строительный портал https://sitetime.kiev.ua для мастеров и подрядчиков. Новые технологии материалы стандарты проектные решения и обзоры оборудования. Всё что нужно специалистам стройиндустрии.

  47. Сайт о стройке https://samozahist.org.ua и ремонте для всех кто любит уют и порядок. Расскажем как выбрать материалы обновить интерьер и избежать ошибок при ремонте. Всё просто полезно и по делу.

  48. Как построить https://rus3edin.org.ua и отремонтировать своими руками? Пошаговые инструкции простые советы и подбор инструментов. Делаем ремонт доступным и понятным для каждого

  50. InterNews — информационный портал с аккуратной подборкой тем: технологии, экономика, общество, здоровье. Материалы выходят регулярно, в них — понятные заголовки, факты с ссылками и вменяемая структура, чтобы вы сразу видели главное. С навигацией просто: рубрики, поиск, лента записей и архив. Пролистайте последние заметки и кейсы на https://internewspro.ru/ — читайте в удобном формате с телефона или ноутбука и оставайтесь в курсе без перегрузки.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>