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

  7. Велосипеды для спортивных соревнований кракен онион тор kraken darknet market kraken darknet ссылка сайт kraken darknet

  11. Среди поставщиков автотоваров кировский магазин Yokohama стоит особняком, предоставляя широкий выбор шин и дисков от топовых производителей вроде Yokohama, Pirelli, Michelin и Bridgestone для легковушек, грузовиков и специальной техники. В ассортименте доступны надежные шины для лета, зимы и всех сезонов, а также элегантные диски, гарантирующие безопасность и удобство в пути, плюс квалифицированный шиномонтаж с гарантией и бесплатной доставкой для наборов колес. Посетители отмечают удобный подбор товаров по параметрам авто, низкие цены и акции, что делает покупки выгодными, а два адреса в Кирове – на ул. Ломоносова 5Б и ул. Профсоюзная 7А – обеспечивают доступность для всех. Для ознакомления с полным каталогом и заказами переходите на https://xn—-dtbqbjqkp0e6a.xn--p1ai/ где опытные консультанты помогут выбрать идеальный вариант под ваши нужды, подчеркивая репутацию магазина как лидера в регионе по шинам и дискам.

  14. Looking for open a merchant account? Visit sharpay.net and see the innovative solutions we offer as a leading fintech platform, namely modern financial services to individuals and businesses. Our platform ensures worldwide availability, round-the-clock protection, and an all-in-one feature set. You can find the full list of our benefits on the website.

  16. ВЕБОФИС — это единый контур для B2B/B2C/B2G, где заявки, продажи, ЭДО и проекты работают как одно целое. Готовые конфигурации, маркетплейс решений и AI-модули ускоряют запуск, а гибкие методологии помогают масштабироваться без боли. Поддерживаются импорт/экспорт Excel, сервис и ремонт в реальном времени, отраслевые сценарии для стройкомпаний. Подробнее на https://xn--90abjn3att.xn--p1ai/ — кейсы, презентация и быстрый старт для вашей команды.

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

  21. Hello folks I came across a 138 great resource that I think you should take a look at. This platform is packed with a lot of useful information that you might find interesting. It has everything you could possibly need so be sure to give it a visit https://bangladesh-parliament.org/casino-online/american-vs-european-roulette-and-the-main-differences-between-them/ And dont neglect everyone which you constantly are able to in the article locate responses for the most the very complicated inquiries. The authors made an effort — explain all of the data via the most most accessible manner.

  32. İspaniya futbolunun ritmini hiss et. LaLiga table 2025 artıq açıqlandı. LaLiga canlı yayımını telefondan açmaq mümkündür. LaLiga rəsmi loqosu artıq yeni rənglərlə. Əgər siz də futbol statistikası ilə maraqlanırsınızsa LaLiga stats bölməsinə baxın. Goal scorer LaLiga siyahısına baxmaq istəyirsiniz?. Bu həftənin LaLiga oyunları çox həyəcanlı olacaq. LaLiga statistika səhifəsində komanda göstəriciləri. Ən çox titul qazanan LaLiga klubları hansılardır?. Futbol azarkeşləri üçün LaLiga livescore bölməsi.

  37. «ПрофПруд» в Мытищах — магазин «всё для водоема» с акцентом на надежные бренды Германии, Нидерландов, Дании, США и России и собственное производство пластиковых и стеклопластиковых чаш. Здесь подберут пленку ПВХ, бутилкаучук, насосы, фильтры, скиммеры, подсветку, биопрепараты и корм, помогут с проектом и шеф-монтажом. Удобно начать с каталога на https://profprud.ru — есть схема создания пруда, статьи, видео и консультации, гарантия до 10 лет, доставка по РФ и бесплатная по Москве и МО при крупном заказе: так ваш водоем станет тихой гаванью без лишних хлопот.

  42. GeoIntellect помогает ритейлу, девелоперам и банкам принимать точные территориальные решения на основе геоаналитики: оценка трафика и потенциального спроса, конкурентное окружение, профилирование аудитории, тепловые карты и модели выручки для выбора локаций. Платформа объединяет большие данные с понятными дашбордами, ускоряя пилоты и снижая риски запуска точек. В середине исследования рынка загляните на https://geointellect.com — команды получают валидацию гипотез, сценарное планирование и прозрачные метрики эффективности, чтобы инвестировать в места, где данные и интуиция сходятся.

  43. Ищете самые выгодные кредитные предложения? Посетите https://money.leadgid.ru/ – это самый выгодный финансовый маркетплейс, где вы найдете отличные предложения по кредитам, вкладам, займам, по кредитным и дебетовым картам, автокредиты и другие предложения. Подробнее на сайте.

  45. Kaiser-russia — официальный интернет-магазин сантехники KAISER с гарантиями производителя: смесители для кухни и ванны, душевые системы, аксессуары, мойки, доставка по России и оплата удобными способами. В карточках — цены, фото, спецификации, коллекции и актуальные акции, есть офлайн-адрес и телефоны поддержки. Перейдите на https://kaiser-russia.su — выберите стиль и покрытие под ваш интерьер, оформите заказ за минуты и получите фирменное качество KAISER с прозрачной гарантией до 5 лет.

  46. Нам нужно было заменить окна в спальне и кухне и мы обратились в Окна СПб. Очень понравился сервис: замер бесплатный консультация подробная. Установка прошла без проблем окна открываются легко. Мы остались довольны результатом https://okna-v-spb.ru/

  47. Складчик даёт возможность покупать курсы со скидками до 99. Я участвовал уже несколько раз и всегда всё работало отлично. Материалы приходят быстро. Очень доволен сервисом – https://v27.skladchik.org/

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>