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.

109 thoughts on “iframe automatic height adjustment using HTML5 cross domain web messaging”

  1. Hi! That is my 1st trip to your website! Were a new staff associated with volunteers in addition to commencing a brand new motivation inside a group from the exact same specific niche market. Your website presented all of us practical info to work on. You’ve got completed a fantastic career!

  2. It helps you decrease your stress and cease eating an extreme amount of because of your emotions.

  4. In severe pediatric instances, vitamin D deficiency can cause bowed legs or rickets, which can lead to skeletal deformities, Hodson adds.

  6. In the Louis Vuitton 2022 resort series, these garments are more robust and capable in the characteristic shoulder design, and also add more aura, making the figure more upright. The clothing also has different colors, The emergence of fabrics and other materials makes the layering more distinct, and with some futurism, it shows a softer fashion trend.

  7. Potentiation of warfarin anticoagulation by topical testosterone ointment priligy dapoxetine 30mg

  8. clomiphene metoprolol lek paralele But the North Bay based railway is also taking some extra measures in the wake of the disaster earlier this month that killed 47 people when an unattended 72 car Montreal Maine Atlantic Railway train carrying oil derailed caught fire and exploded levelling the Quebec city s downtown core can priligy cure pe

  9. Hi there! Would you mind if I share your blog with my facebook
    group? There’s a lot of folks that I think would really enjoy your content.
    Please let me know. Cheers

    Here is my web site :: visit here

  10. This is of importance as the question arises as to whether the benefits of eplerenone are maintained in the setting of higher doses of these agents buy priligy 30 mg x 10 pill Monitor Closely 1 carbinoxamine and marijuana both increase sedation

  11. priligy at walgreens Have you addressed a dental trigger and noticed that it helped resolve Hashimoto s symptoms or just made you feel better in general

  12. According to that clomid needs to be run at 150mg to match the effects of 20mg nolva on LH FSH and testosterone where can i buy misoprostol cytotec 5 Given its overall tolerability and effectiveness naproxen can be considered a first line treatment for a variety of clinical situations requiring analgesia

  17. # Harvard University: A Legacy of Excellence and Innovation

    ## A Brief History of Harvard University

    Founded in 1636, **Harvard University** is the oldest and
    one of the most prestigious higher education institutions in the United States.
    Located in Cambridge, Massachusetts, Harvard has built a global reputation for academic excellence, groundbreaking research,
    and influential alumni. From its humble beginnings as a small college
    established to educate clergy, it has evolved into a world-leading university that
    shapes the future across various disciplines.

    ## Harvard’s Impact on Education and Research

    Harvard is synonymous with **innovation and intellectual leadership**.

    The university boasts:

    - **12 degree-granting schools**, including the renowned **Harvard Business School**, **Harvard
    Law School**, and **Harvard Medical School**.

    - **A faculty of world-class scholars**, many of whom are Nobel laureates,
    Pulitzer Prize winners, and pioneers in their fields.
    - **Cutting-edge research**, with Harvard leading initiatives in artificial intelligence, public health, climate change, and more.

    Harvard’s contribution to research is immense,
    with billions of dollars allocated to scientific discoveries and
    technological advancements each year.

    ## Notable Alumni: The Leaders of Today and Tomorrow

    Harvard has produced some of the **most influential figures** in history, spanning politics, business, entertainment, and science.
    Among them are:

    - **Barack Obama & John F. Kennedy** – Former U.S. Presidents

    - **Mark Zuckerberg & Bill Gates** – Tech visionaries (though Gates did not graduate)

    - **Natalie Portman & Matt Damon** – Hollywood icons
    - **Malala Yousafzai** – Nobel Prize-winning activist

    The university continues to cultivate future leaders who shape industries and drive global progress.

    ## Harvard’s Stunning Campus and Iconic Library

    Harvard’s campus is a blend of **historical charm and modern innovation**.
    With over **200 buildings**, it features:

    - The **Harvard Yard**, home to the iconic **John Harvard Statue** (and
    the famous “three lies” legend).
    - The **Widener Library**, one of the largest university libraries in the world, housing **over 20 million volumes**.

    - State-of-the-art research centers, museums,
    and performing arts venues.

    ## Harvard Traditions and Student Life

    Harvard offers a **rich student experience**,
    blending academics with vibrant traditions, including:

    - **Housing system:** Students live in one of 12 residential houses, fostering a strong sense
    of community.
    - **Annual Primal Scream:** A unique tradition where students de-stress by running
    through Harvard Yard before finals!
    - **The Harvard-Yale Game:** A historic football rivalry that unites alumni and students.

    With over **450 student organizations**, Harvard students engage in a diverse range
    of extracurricular activities, from entrepreneurship to performing arts.

    ## Harvard’s Global Influence

    Beyond academics, Harvard drives change in **global policy, economics, and technology**.
    The university’s research impacts healthcare, sustainability,
    and artificial intelligence, with partnerships across industries worldwide.
    **Harvard’s endowment**, the largest of any university, allows it to
    fund scholarships, research, and public initiatives, ensuring a legacy of impact for generations.

    ## Conclusion

    Harvard University is more than just a school—it’s a **symbol of excellence, innovation, and leadership**.

    Its **centuries-old traditions, groundbreaking discoveries,
    and transformative education** make it one of the most influential
    institutions in the world. Whether through its distinguished
    alumni, pioneering research, or vibrant student life, Harvard continues to
    shape the future in profound ways.

    Would you like to join the ranks of Harvard’s legendary scholars?
    The journey starts with a dream—and an application!

    https://www.harvard.edu/

  22. Проверял разные ссылки, но только кракен сайт даркнет
    сработал. Доступ через TOR
    идеальный. Пользуюсь ежедневно.
    |
    кракен ссылка даркнет помог мне зайти, когда все остальные сайты были заблокированы.
    Очень удобно и быстро. Всем советую попробовать.
    |
    Мой друг посоветовал кракен ссылка официальная, и я не пожалел.
    Всё стабильно и безопасно. Доступ теперь есть всегда.
    |
    Когда сайт перестал открываться,
    я нашел кракен ссылка онион.
    Это зеркало реально выручает.
    Работает даже без VPN. |
    Мой друг посоветовал кракен сайт как
    зайти, и я не пожалел. Всё стабильно и
    безопасно. Доступ теперь есть всегда.
    |
    Сначала не верил, что кракен ссылка тор на сайт работает.
    Но попробовал — и зашел без проблем.
    Теперь это мой основной способ доступа.
    |
    Я давно искал рабочую ссылку и нашел кракен даркнет ссылка.

    Все загрузилось моментально. Теперь всегда пользуюсь только этим зеркалом.
    |
    Благодаря сайт кракен зеркало я смог быстро оформить заказ.
    Сайт открывается через TOR без
    задержек. Очень рад, что нашел это зеркало.
    |
    Я давно искал рабочую ссылку и нашел kraken ссылка
    тор. Все загрузилось моментально.
    Теперь всегда пользуюсь только этим зеркалом.
    |
    Не знал, как попасть на сайт, пока не нашел ссылка кракен маркетплейс ссылка
    онион. Это зеркало открылось с первого раза.
    Теперь сохраняю его всегда. |
    Я давно искал рабочую ссылку и нашел кракен даркнет ссылка.
    Все загрузилось моментально. Теперь
    всегда пользуюсь только этим
    зеркалом. |
    Я давно искал рабочую ссылку и нашел ссылка
    кракен наркотики. Все загрузилось
    моментально. Теперь всегда
    пользуюсь только этим зеркалом.

    |
    В очередной раз заблокировали площадку, но кракен сайт магазин
    снова помог. Сразу открылось, как обычно.
    Настоящее спасение! |
    Мой друг посоветовал кракен зеркало 2025, и я не пожалел.
    Всё стабильно и безопасно.
    Доступ теперь есть всегда.
    |
    кракен зеркало ссылка помог мне зайти, когда все остальные сайты были
    заблокированы. Очень удобно и быстро.
    Всем советую попробовать. |
    Я давно искал рабочую ссылку и нашел кракен ссылка актуальная.
    Все загрузилось моментально.
    Теперь всегда пользуюсь
    только этим зеркалом. |
    Каждый раз, когда возникает проблема со входом, я использую кракен ссылка onion. Работает стабильно и быстро.
    Надёжный способ входа. |
    Благодаря кракен ссылка официальная я смог быстро оформить
    заказ. Сайт открывается через TOR без задержек.
    Очень рад, что нашел это зеркало.
    |
    кракен ссылка впн помог мне зайти, когда все остальные сайты были заблокированы.
    Очень удобно и быстро. Всем советую попробовать.

    |
    Каждый раз, когда возникает проблема со входом, я
    использую сайт кракен онион ссылка.
    Работает стабильно и быстро.
    Надёжный способ входа. |
    Не знал, как попасть на сайт, пока не нашел kraken ссылка onion.
    Это зеркало открылось с первого раза.

    Теперь сохраняю его всегда. |
    Не знал, как попасть на сайт, пока не нашел ссылка кракен зеркало.
    Это зеркало открылось с первого раза.
    Теперь сохраняю его всегда.
    |
    Я давно искал рабочую ссылку и нашел кракен зеркало вход.
    Все загрузилось моментально.
    Теперь всегда пользуюсь только этим зеркалом.
    |
    Не знал, как попасть на сайт, пока не нашел ссылка кракен.
    Это зеркало открылось с первого раза.

    Теперь сохраняю его всегда.
    |
    В очередной раз заблокировали площадку, но кракен ссылка onion снова помог.
    Сразу открылось, как обычно.
    Настоящее спасение! |
    kraken ссылка тор помог мне зайти,
    когда все остальные сайты были заблокированы.

    Очень удобно и быстро. Всем советую попробовать.
    |
    Каждый раз, когда возникает проблема со входом, я использую ссылка кракен даркнет маркет.
    Работает стабильно и быстро.
    Надёжный способ входа. |
    Я давно искал рабочую ссылку и нашел кракен ссылка onion. Все загрузилось моментально.

    Теперь всегда пользуюсь только этим
    зеркалом. |
    Мой друг посоветовал кракен ссылка, и я не пожалел.
    Всё стабильно и безопасно. Доступ
    теперь есть всегда. |
    Мой друг посоветовал сайт кракен это, и я не пожалел.
    Всё стабильно и безопасно. Доступ теперь есть всегда.

    |
    Благодаря kraken зеркало onion я смог быстро оформить заказ.
    Сайт открывается через TOR без
    задержек. Очень рад, что нашел это зеркало.

    |
    Мой друг посоветовал сайт кракен
    не работает, и я не пожалел.

    Всё стабильно и безопасно.
    Доступ теперь есть всегда. |
    Каждый раз, когда возникает проблема со входом, я использую кракен маркетплейс зеркало.
    Работает стабильно и быстро.
    Надёжный способ входа. |
    Мой друг посоветовал кракен ссылка
    актуальная, и я не пожалел. Всё
    стабильно и безопасно. Доступ теперь есть всегда.
    |
    Благодаря кракен зеркало тг я смог быстро оформить заказ.
    Сайт открывается через TOR без задержек.
    Очень рад, что нашел это зеркало.
    |
    В очередной раз заблокировали площадку, но кракен сайт телеграм
    снова помог. Сразу открылось, как обычно.
    Настоящее спасение! |
    В очередной раз заблокировали площадку, но
    кракен зеркало рабочее снова помог.

    Сразу открылось, как обычно. Настоящее спасение!

    |
    Мой друг посоветовал сайт кракен даркнет, и я
    не пожалел. Всё стабильно
    и безопасно. Доступ теперь есть всегда.
    |
    Благодаря кракен сайт даркнет я смог быстро оформить заказ.
    Сайт открывается через
    TOR без задержек. Очень рад, что нашел это зеркало.
    |
    Не знал, как попасть на сайт, пока не нашел сайт кракен ссылка.
    Это зеркало открылось с первого раза.
    Теперь сохраняю его всегда. |
    Благодаря кракен ссылка сайт я смог быстро
    оформить заказ. Сайт открывается через TOR без задержек.
    Очень рад, что нашел это зеркало.
    |
    kraken зеркало onion помог мне
    зайти, когда все остальные сайты были заблокированы.
    Очень удобно и быстро. Всем советую
    попробовать. |
    Когда сайт перестал открываться, я нашел кракен сайт реклама.
    Это зеркало реально выручает.
    Работает даже без VPN. |
    Мой друг посоветовал кракен
    ссылка на сайт, и я не пожалел.
    Всё стабильно и безопасно. Доступ теперь есть всегда.
    |
    Сначала не верил, что кракен зеркало ссылка работает.
    Но попробовал — и зашел без проблем.
    Теперь это мой основной способ
    доступа. |
    Благодаря кракен зеркало тор я смог быстро оформить заказ.
    Сайт открывается через TOR без задержек.

    Очень рад, что нашел это зеркало.

    |
    Сначала не верил, что кракен зеркало вход работает.
    Но попробовал — и зашел без проблем.
    Теперь это мой основной способ доступа.
    |
    кракен зеркало вход помог мне зайти, когда все остальные сайты были заблокированы.
    Очень удобно и быстро. Всем советую попробовать.
    |
    Сначала не верил, что кракен зеркало вход работает.
    Но попробовал — и зашел без проблем.
    Теперь это мой основной способ доступа.
    |
    Я давно искал рабочую ссылку и
    нашел кракен зеркало вход.
    Все загрузилось моментально.
    Теперь всегда пользуюсь только этим
    зеркалом. |

  29. Если бы можно было вернуться в прошлое даже пожертвовав другом я бы согласилась и вернулась к тебе потому что я не в силах забыть твои объятия и поцелуи. Они в моих мыслях навсегда. Локк https://citaty-o-sebe.citaty-tsitaty.ru

  32. Наставник сказал: «Благородный муж держит себя в строгости но не устраивает споров с людьми он может жить в согласии со всеми но не вступит ни с кем в сговор». https://kuroko-tecuya.citaty-tsitaty.ru

  34. Содержит от 50 до 100 миллиардов нейронов. Пирамида уровней Дилтса-Короткова

  35. Третья позиция восприятия. Поместите ладони друг напротив друга ощутите энергию между ними. Почувствуйте энергию между ладонями на разных расстояниях. Пирамида логических уровней Короткова.

  36. В 1994 году Интернет стал доступен обычным пользователям. Пирамида Дилтса-Короткова. Логические уровни 2.0

  37. Морфогенетические поля. Противоположность внутренней игры. Исследуя физическую форму движений можно научиться выражать внутренние состояния в других ситуациях. Пирамида логических уровней 2.0 Короткова.

  38. В генеративном сотрудничестве каждый создает свой пузырь и наблюдает за их соединением. Упражнение 2: обобщение ресурсного паттерна увеличивает доступ к состоянию в других действиях. Универсальная метамодель пирамида Короткова.

  39. Нейро-логические уровни и язык. Пациент был шокирован увидев кровь что подтвердило его убеждения. Естественные иерархии классификаций информации и знаний. Универсальная метамодель пирамида Короткова.

  40. Сайт переписки. Чат переписка. Сайт психологической помощи.

  41. Психолог онлайн анонимно. Услуги психолога. Психолог помогающий искать решения в непростых психологических ситуациях.

  45. Сервис по подбору психолога Кпт курган. 976 оценок

  46. На прием Клинцы. Психотерапевт Оренбург. 570 оценок

  47. Психотерапевт Белгород. Психотерапевт Челны. 746 оценок

  48. Психотерапевты Самара. Психотерапевт Оренбург. 471 оценок

  49. Психотерапевт Пенза. Сервис по подбору психолога 904 оценок

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>