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,524 thoughts on “iframe automatic height adjustment using HTML5 cross domain web messaging”

  1. В наше динамичное время, насыщенное напряжением и беспокойством, анксиолитики и транквилизаторы оказались надежным средством для огромного количества людей, позволяя преодолевать панические приступы, генерализованную тревогу и прочие нарушения, мешающие нормальной жизни. Эти препараты, такие как бензодиазепины (диазепам, алпразолам) или небензодиазепиновые варианты вроде буспирона, действуют через усиление эффекта ГАМК в мозге, снижая нейрональную активность и принося облегчение уже через короткое время. Они особенно ценны в начале курса антидепрессантов, поскольку смягчают стартовые нежелательные реакции, вроде усиленной раздражительности или проблем со сном, повышая удобство и результативность терапии. Однако важно помнить о рисках: от сонливости и снижения концентрации до потенциальной зависимости, поэтому их назначают короткими курсами под строгим контролем врача. В центре “Эмпатия” опытные специалисты, включая психиатров и психотерапевтов, подбирают индивидуальные схемы, минимизируя противопоказания вроде проблем с дыханием или беременности. Подробнее о механизмах, применении и безопасном использовании читайте на https://empathycenter.ru/articles/anksiolitiki-i-trankvilizatory/, где собрана вся актуальная информация для вашего спокойствия.

  3. Trainz Simulator остается одним из самых увлекательных симуляторов для любителей железных дорог, предлагая бесконечные возможности для кастомизации благодаря разнообразным дополнениям и модам. Ищете мвпс для trainz? На сайте trainz.gamegets.ru вы сможете скачать бесплатные модели локомотивов, такие как тепловоз ТЭМ18-182 или электровоз ЭП2К-501, а также вагоны вроде хоппера №95702262 и пассажирского вагона, посвященного 100-летию Транссиба. Эти дополнения совместимы с версиями игры от 2012 до 2022, включая TANE и 2019, и обеспечивают реалистичное управление с упрощенными опциями для новичков. Регулярные обновления, включая карты реальных маршрутов вроде Печорской магистрали или вымышленных сценариев, позволяют создавать аутентичные приключения, от грузовых перевозок до скоростных поездок. Эти дополнения не просто улучшают игровой процесс, но и мотивируют разбираться в истории железных дорог, превращая каждую игру в увлекательное странствование по путям.

  4. A reliable partner https://terionbot.com in the world of investment. Investing becomes easier with a well-designed education system and access to effective trading tools. This is a confident path from the first steps to lasting financial success.

  6. Покупка недвижимости — это не лотерея, если с вами работает команда, которая знает рынок Ставропольского края изнутри. Arust подбирает лучшие объекты, юридически проверяет продавца и документы, сопровождает на всех этапах — от заявки до регистрации в Росреестре. Хотите безопасную сделку и честную цену? Ищете arust26? За подробностями — ar26.ru Здесь консультируют, считают риски и помогают принять взвешенное решение без лишних нервов и потерь. Мы работаем прозрачно: фиксируем условия, держим в курсе каждого шага и объясняем сложное простыми словами.

  11. KAISER — это когда дизайн встречается с надежностью и продуманной эргономикой. В официальном интернет-магазине вы найдете смесители, душевые системы, мойки и аксессуары с гарантией производителя до 5 лет и быстрой доставкой по России. Ищете смеситель для душа kaiser? На kaiser-russia.su удобно сравнивать модели по сериям и функционалу, смотреть цены и наличие, выбирать комплекты со скидкой до 10%. Эксперты подскажут совместимые решения под вашу ванную или кухню, а четкие условия оплаты и обмена избавят от лишних хлопот.

  16. Ищете купить ноутбук HUAWEI MateBook D 15 R7/8/512/WIN Space Gray (53013TUD)? В каталоге v-electronic.ru/noutbuki/ собраны модели от бюджетных N100 и i3 до мощных Ryzen 9 и Core i7, включая тонкие ультрабуки и игровые решения с RTX. Фильтры по брендам, экранам, памяти и SSD ускоряют подбор, а детальные карточки с характеристиками и отзывами снимают вопросы. Следите за акциями и рассрочкой — так легче взять «тот самый» ноутбук и не переплатить.

  23. В «AVPrintPak» упаковка становится частью брендинга: конструкторы и производственные линии выпускают коробки любой сложности — от хром-эрзаца и микрогофрокартона до тубусов и круглых коробок для цветов и тортов. Премиальные решения дополняют тиснение, выборочный лак, конгрев и точные ложементы. Собственный парк офсетного и цифрового оборудования обеспечивает стабильное качество и оперативные тиражи, конструкторы создают тестовые образцы под ваш продукт. Ищете упаковка заказать? Подробности и портфолио — на сайте avprintpak.ru

  24. Ищете инструкции швейных машин? На shveichel.ru вы найдёте швейные и вязальные машины, отпариватели, оверлоки и многое другое, включая промышленное швейное оборудование. Хотите быстро отыскать инструкции к швейным машинам или посмотреть их обзоры? Доступны детальные обзоры и видео-руководства по швейным машинам — удобно и наглядно. За деталями переходите на сайт: там легко сравнить технику и задать вопросы эксперту.

  27. Пансионаты «Друзья» предлагают пожилым гостям заботу, безопасность и комфортное проживание в Подмосковье. Круглосуточный уход, 5-разовое диетическое питание, контроль приема лекарств, программы реабилитации и доступная среда поддерживают здоровье и самостоятельность постояльцев. Разнообразный досуг и регулярное общение делают быт насыщенным, а семь адресов вокруг столицы позволяют выбрать удобную локацию. Ищете частный пансионат для пожилых москва? Подробнее — на сайте friends-pansionat.ru

  29. I’m not sure why but this site is loading very slow for me.

    Is anyone else having this problem or is it a problem
    on my end? I’ll check back later on and see if the problem
    still exists.

  32. GBISP — это про системность и порядок: разделы логично связаны, информация изложена четко и без перегрузки, а поиск работает быстро. В середине маршрута удобно перейти на https://gbisp.ru и найти нужные материалы или контакты в пару кликов. Аккуратная вёрстка, корректное отображение на мобильных и прозрачные формы обратной связи создают ощущение продуманного ресурса, который помогает с решением задач вместо того, чтобы отвлекать деталями.

  33. Кит-НН — спецодежда и СИЗ в Нижнем Новгороде: летние и зимние комплекты, обувь, защитные перчатки, каски, экипировка для сварщиков и медработников, нанесение символики. Работают с розницей и бизнесом, дают 3% скидку при заказе на сайте, консультации и удобную доставку. На https://kitt-nn.ru/ легко подобрать по сезону и задачам, сверить характеристики и цены, оформить онлайн. Адрес: Новикова-Прибоя, 6А; горячая линия +7 (963) 231-76-83 — чтобы ваша команда была защищена и выглядела профессионально.

  34. Tightrope Game – a balance challenge with obstacles. Quick addictive and perfect for testing focus: Tightrope game for kids

  35. Ищете изготовление вывесок и наружной рекламы в Екатеринбурге? Посетите сайт РПК Пиксель https://rpk-pixel.ru/ – и вы найдете широкий спектр рекламных инструментов для привлечения клиентов в ваш бизнес. Мы предложим вам: световые короба, объемные буквы, баннеры, стелы АЗС, неоновые вывески и многое другое. Заказать вывеску в самые сжатые сроки можно у нас. Подробнее на сайте.

  36. Качественные алюминиевые рамы для всех моделей актуальные зеркала kraken kraken onion kraken onion ссылка kraken onion зеркала

  39. Mines mines strategy mines 1win mines game mines casino 1win mines mine 1win best mines strategy mines game strategy mines win mines mines pattern strategy mines bonus cave mines 1win 1 win mines mines gambling strategy mines casino game strategy mines online the mines mines app mines slot mines game bonus mines casino game mines game online mine strategy mine game

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>