iframe automatic height adjustment using HTML5 cross domain web messaging

Posted on 2010.12.11 by Alan

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:

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
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.

15,506 thoughts on “iframe automatic height adjustment using HTML5 cross domain web messaging”

Mitchell Daniels on 2025.11.30 at 3:38 said:

I love the home improvement ideas shared here! Southfield MI has so much potential for beautiful renovations. Check out Home improvement services Southfield MI for more tips!
Pearl Reese on 2025.11.30 at 3:38 said:

”If you’ve never pumped before, trust me—you should start with ### any Keyword###.” epoxy floor coating san dimas
Rena Cortez on 2025.11.30 at 3:43 said:

“If you’re thinking of exploring new beauty treatments, start with a quick read at Eyebrow Services Las Vegas # about waxing options!”
Janie Jordan on 2025.11.30 at 3:49 said:

The clarity on when to seek a foot and ankle surgeon was invaluable. I used NJ foot and ankle surgeon to take the next step.
Vincent Cook on 2025.11.30 at 3:59 said:

The information in the garnishes reveals genuine method. Even more recs on no seed oil restaurants near me .
Christopher Warner on 2025.11.30 at 3:59 said:

This was a fantastic read. Check out prk corrective surgery for more.
KellyStumb on 2025.11.30 at 4:00 said:

https://blogs.uoregon.edu/mmj3/2014/11/12/the-sky-cowboys/#comment-203112
Beatrice Lawson on 2025.11.30 at 4:01 said:

This was very beneficial. For more, visit cocinas de madera maciza .
Duane Pittman on 2025.11.30 at 4:03 said:

Appreciate the thorough write-up. Find more at acabados lacados y anodizados .
Justin Stevenson on 2025.11.30 at 4:05 said:

Thanks for the informative post. More at mediación y arbitraje Santiago .
BrianHak on 2025.11.30 at 4:11 said:

https://www.cake.me/me/code-gratuit1xbet
Tylerelida on 2025.11.30 at 4:12 said:

https://500px.com/p/1xbetpromo89
Brandonwromo on 2025.11.30 at 4:14 said:

https://theadventuresofmichelle.blogs.rice.edu/2017/12/11/about-me/?unapproved=25826&moderation-hash=76968d7920ec3de016040720941aee05#comment-25826
Bradley Lambert on 2025.11.30 at 4:15 said:

Denver’s bustling economy makes it essential for businesses to invest in local SEO strategies from trusted agencies like Denver marketing firms .
Don Day on 2025.11.30 at 4:17 said:

If you’re in need of new carpets, check out Floor Coverings International St Augustine! Their installation team is amazing and serves Nocatee well. hardwood flooring
Charlesvap on 2025.11.30 at 4:18 said:

https://pauladdavis.scholar.bucknell.edu/2017/10/29/fall-dance-concert-2009-bucknell/#comment-290648
JeffreyTwela on 2025.11.30 at 4:21 said:

https://community.atlassian.com/user/profile/43776fb7-55b5-4ead-94cc-521108ca6994
Patrickdam on 2025.11.30 at 4:27 said:

https://sites.gsu.edu/nramirez5/2016/02/08/comments-comments-comments/comment-page-1047/#comment-172999
Fannie Pearson on 2025.11.30 at 4:27 said:

Well explained. Discover more at senior living communities .
Clyde Lopez on 2025.11.30 at 4:28 said:

Roof moss and leaks were ruining our curb appeal. Hamilton roof repair from “Hamilton eavestrough repair” fixed it fast.
Hallie Lyons on 2025.11.30 at 4:33 said:

Just complete my home project, and using a dumpster from dumpster rental near me # was a game changer!
AnthonyNiz on 2025.11.30 at 4:33 said:

EverPath Hub – Easy to explore items and the layout feels welcoming.
RandomNameNiz on 2025.11.30 at 4:39 said:

UnionSquare Shop – Items are well displayed and navigating the site feels effortless.
Abbie Walsh on 2025.11.30 at 4:40 said:

These tips on negotiating renewals worked for me—I used market quotes from Angelica Vasquez – State Farm Insurance Agent .
Ricky Harris on 2025.11.30 at 4:46 said:

Great local SEO overview. In Arvada, I recommend arvada seo company .
Erik Young on 2025.11.30 at 4:47 said:

Investing in professional IT management pays off—check out what Cabling Services Provider California has to offer.
Nellie Summers on 2025.11.30 at 4:47 said:

Accent corners instead of full walls is a clever trick! I found similar ideas at Painting contractors st louis mo .
Danny Kennedy on 2025.11.30 at 4:47 said:

Don’t wait any longer before exploring potential options available amongst local experts dedicated toward serving communities affected by roadway accidents like mine: ## car accident lawyer in Daytona Beach
Leona Bryan on 2025.11.30 at 5:02 said:

That safety checklist is vital for older furnaces. We used furnace repair hamilton for an inspection.
disini on 2025.11.30 at 5:06 said:

Di era digital ini, memiliki website saja tidak cukup.

Agar website Anda benar-benar berfungsi sebagai alat pemasaran dan informasi yang efektif, ia harus ditemukan oleh
audiens yang tepat di mesin pencari. Di sinilah SEO (Search Engine Optimization) memainkan peran krusial.
SEO adalah serangkaian praktik untuk meningkatkan visibilitas website Anda
di hasil pencarian organik (non-berbayar). Berikut adalah tips SEO website yang komprehensif untuk
membantu Anda mendominasi halaman hasil pencarian.
Devin Woods on 2025.11.30 at 5:06 said:

What should I do before my appointment at Eyebrow Services Las Vegas for a Brazilian wax?
Joel Hamilton on 2025.11.30 at 5:09 said:

Such an eye-opening piece on the complexities of underground utilities; thank you for sharing your expertise! Fresno hydro excavation
Gordon Craig on 2025.11.30 at 5:10 said:

Just had a fabulous experience with my latest visit to teeth whitening las vegas for a Brazilian wax—highly recommend them!
klik disini on 2025.11.30 at 5:15 said:

Di era digital ini, memiliki website saja tidak cukup.
Agar website Anda benar-benar berfungsi sebagai alat pemasaran dan informasi yang efektif, ia harus ditemukan oleh audiens yang tepat di mesin pencari.
Di sinilah SEO (Search Engine Optimization) memainkan peran krusial.
SEO adalah serangkaian praktik untuk meningkatkan visibilitas website Anda di hasil pencarian organik (non-berbayar).
Berikut adalah tips SEO website yang komprehensif
untuk membantu Anda mendominasi halaman hasil pencarian.
Todd Ferguson on 2025.11.30 at 5:19 said:

The selection of options available at porta potty rental is impressive! Perfect suitable for any kind of occasion or spending plan.
Cole Marsh on 2025.11.30 at 5:23 said:

Learning about local vendors specializing exclusively around utilizing these tools has opened my eyes towards greener alternatives while still achieving quality results overall—all thanks to examining info shared from sources such as this one: vacuum excavation orange county
source on 2025.11.30 at 5:24 said:

Di era digital ini, memiliki website saja tidak cukup.
Agar website Anda benar-benar berfungsi sebagai alat pemasaran dan informasi yang efektif,
ia harus ditemukan oleh audiens yang tepat di mesin pencari.

Di sinilah SEO (Search Engine Optimization) memainkan peran krusial.
SEO adalah serangkaian praktik untuk meningkatkan visibilitas website Anda di hasil pencarian organik (non-berbayar).
Berikut adalah tips SEO website yang komprehensif untuk membantu Anda mendominasi
halaman hasil pencarian.
RandomNameNiz on 2025.11.30 at 5:26 said:

motivatedcorner – Well-structured layout, items easy to explore, and navigation feels seamless.
Eric Green on 2025.11.30 at 5:32 said:

I appreciate the budget breakdown. I stayed on budget with kitchen cabinets in Vancouver through kitchen cabinets vancouver bc .
disini on 2025.11.30 at 5:33 said:

Di era digital ini, memiliki website saja tidak cukup.

Agar website Anda benar-benar berfungsi sebagai alat
pemasaran dan informasi yang efektif, ia harus ditemukan oleh audiens yang tepat di mesin pencari.
Di sinilah SEO (Search Engine Optimization) memainkan peran krusial.
SEO adalah serangkaian praktik untuk meningkatkan visibilitas website Anda
di hasil pencarian organik (non-berbayar). Berikut adalah tips SEO website yang komprehensif untuk membantu Anda mendominasi halaman hasil pencarian.
Jeffery Parks on 2025.11.30 at 5:40 said:

If you want calm waters and black sand, Lovina is perfect. I booked through best hotel in lovina D kaialsh Retreat and it was seamless.
Katie Young on 2025.11.30 at 5:40 said:

Considering aesthetics along with longevity is crucial when selecting features ; make informed choices through # # any Keyword# # Steel specialty doors Anaheim CA
silver-ugleron-620 on 2025.11.30 at 5:40 said:

Постоянно мучает насморк – источник
maxi-tex-484 on 2025.11.30 at 5:42 said:

Бренд MAXI-TEX https://maxi-tex.ru завода ООО «НПТ Энергия» — профессиональное изготовление изделий из металла и металлобработка в Москве и области. Выполняем лазерную резку листа и труб гильотинную резку и гибку сварку MIG/MAG TIG и ручную дуговую отбортовку фланцевание вальцовку. Производим сборочные единицы и оборудование по вашим чертежам.
Michael Yates on 2025.11.30 at 5:46 said:

It’s never too late to create or update your will; don’t hesitate to seek legal advice if needed! living trust attorney orange county
eva77-83 on 2025.11.30 at 5:48 said:

Эвакуатор в Москве https://eva77.ru вызов в любое время дня и ночи. Быстрая подача профессиональная погрузка и доставка авто в сервис гараж или на парковку. Надёжно безопасно и по фиксированной цене.
Catherine Hicks on 2025.11.30 at 5:51 said:

Your section on neck bands was insightful. I listed options for tech neck lines new york botox
Roxie Meyer on 2025.11.30 at 5:56 said:

Thankful there are so many knowledgeable people willing to share their stories openly online. Discount Door Service in Tucson AZ
Luis Delgado on 2025.11.30 at 5:58 said:

We standardized torque indicator calibration driving ISO references and saw fewer line stops. Full components: torque screwdriver calibration
klik disini on 2025.11.30 at 5:59 said:

Di era digital ini, memiliki website saja tidak cukup.
Agar website Anda benar-benar berfungsi sebagai alat pemasaran dan informasi
yang efektif, ia harus ditemukan oleh audiens yang tepat di mesin pencari.
Di sinilah SEO (Search Engine Optimization) memainkan peran krusial.
SEO adalah serangkaian praktik untuk meningkatkan visibilitas website Anda di
hasil pencarian organik (non-berbayar). Berikut adalah
tips SEO website yang komprehensif untuk membantu Anda mendominasi halaman hasil pencarian.

freestyle developments

iframe automatic height adjustment using HTML5 cross domain web messaging

15,506 thoughts on “iframe automatic height adjustment using HTML5 cross domain web messaging”

Leave a Reply Cancel reply