iframe automatic height adjustment using HTML5 cross domain web messaging

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.

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

  1. Современный автомобильный https://mallex.info портал: автообзоры тесты ремонт и обслуживание страхование и рынок. Всё что нужно водителям и любителям автомобилей.

  2. Автомобильный портал https://autonovosti.kyiv.ua новости автопрома обзоры моделей тест-драйвы и советы по эксплуатации. Всё для автолюбителей: от выбора авто до обслуживания и ремонта.

  3. Строительный сайт https://novostroi.in.ua с полезными статьями о ремонте отделке и дизайне. Обзоры стройматериалов проекты домов инструкции и советы экспертов для профессионалов и новичков.

  4. Портал для родителей https://detiwki.com.ua и детей — всё для счастливой семьи. Воспитание образование здоровье отдых и полезные материалы для мам пап и малышей.

  5. Сайт для женщин https://stylewoman.kyiv.ua с интересными статьями о моде красоте семье и здоровье. Идеи для кулинарии путешествий и вдохновения.

  6. Универсальный сайт https://virginvirtual.net для женщин — секреты красоты тренды моды советы по отношениям и карьере рецепты и стиль жизни.

  7. Журнал садовода https://mts-agro.com.ua полезные советы по уходу за садом и огородом. Сезонные работы выращивание овощей фруктов и цветов современные технологии и секреты урожая.

  8. Латунный квадрат в машиностроении его применение и особенности
    Применение латунного квадрата в машиностроении и его преимущества для отрасли
    Для достижения высокой прочности и износостойкости в конструкциях стоит обратить внимание на сплавы меди.
    Их состав обеспечивает устойчивость к коррозии и благоприятные механические свойства, что делает такие материалы подходящими для различных промышленных целей.

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

    Важно тоже отметить, что сплавы меди имеют хорошую электропроводность и теплоотведение, что делает их идеальными для изготовления электрических компонентов.

    При этом данное решение позволяет снизить
    общие затраты на производство за счет уменьшения веса и
    сокращения затрат на последующую обработку.

    Латунный квадрат в разработке механизмов:
    применение и характеристики
    Использование этого металлического изделия таких форматов, как четырехугольник,
    обосновано в различных
    областях, включая конструкцию оборудования и детали механизмов.
    Благодаря своей прочности и коррозионной устойчивости,
    он активно применяется в производствах, связанных с обработкой жидкостей
    и газов, а также в электрических системах.

    Металл может легко обрабатываться, что делает
    его идеальным для создания деталей точной геометрической формы.
    При выборе этот элемент следует
    учитывать высокую степень проводимости, что
    особенно важно для электрических соединений.
    Структура позволяет применять его в системах, требующих надежной электроизоляции, сохраняя при этом диапазон температур.

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

    В процессе работ по упаковке, соединению или креплению элементов необходимо учитывать толщину и размеры, чтобы обеспечить надежность соединения и минимизировать зазоры.
    Правильная эксплуатация в сочетании с периодическим обслуживанием позволит продлить срок службы детали и сохранить функциональность всей
    системы.
    Технические характеристики и
    выбор материала
    Для успешного выбора металлоизделий на основе медно-цинкового
    сплава следует обратить внимание на
    несколько ключевых параметров.
    Основные характеристики включают в
    себя механические свойства, коррозионную стойкость и
    теплопроводность. Сопротивление растяжению у сплавов составляет около 400-600 МПа, что делает их удачными для строительных и механических задач.

    Твердость может варьироваться от 50
    до 100 HB, а это значит, что эти сплавы имеют хорошую обработку и способны выдерживать нагрузки.
    Если требуется высокая стойкость к коррозии, сплавы с добавлением никеля или олова обеспечивают отличные результаты в агрессивных средах.
    Теплопроводность может достигать 200 Вт/(м·К), из-за чего они часто используются в теплотехнических системах.

    Что касается электрических свойств, показатели электропроводности достигают 20% от серебряной.
    Это делает их идеальными для применения в электротехнике и электронике.
    Если необходима высокая прочность при снижении веса конструкции, стоит
    выбирать варианты с низким содержанием цинка,
    поскольку это позволит уменьшить вероятность усталостных разрушений.

    Сравнение различных марок помогает в точном выборе.
    Применение (зависит от конкретных условий эксплуатации) несет
    важные последствия для долговечности изделий.
    Всегда учитывайте характер нагрузки, химическую среду и требования
    к обработке перед закупками особей.

    Правильная оценка характеристик
    способствует выбору оптимального материала, что
    приводит к более долговечным и надежным решениям в проекте.

    Способы обработки и сварки латунного квадрата в производственных условиях
    Для достижения качественной обработки проката
    из сплавов меди важно использовать соответствующие инструменты и технологии.
    Рекомендуется применять фрезы с вольфрамовыми наплавками, которые обеспечивают высокую стойкость
    и чистоту реза. Скорость резания должна находиться в пределах 600–800 м/мин, а подача – 0,1–0,
    3 мм за оборот.
    Сварка данного материала
    требует особого внимания.
    Рекомендуется использовать метод газовой аргонодуговой сварки (TIG).
    Это обеспечивает аккуратный шов и
    минимальные деформации.
    Важно использовать неплавящиеся электроды
    и защитные газы, чтобы избежать окисления.

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

    Температура нагрева заготовок до сварки не должна
    превышать 200°C для предотвращения разрушения структуры металла.

    Для уменьшения риска трещин рекомендуется применять предварительный подогрев шва до 150°C.

    Также стоит следить за скоростью
    охлаждения; использование воды или воздуха
    может вызвать термическое напряжение,
    поэтому предпочтительнее применение медленных процессов охлаждения.

    После завершения сварки следует провести термообработку
    для снятия внутренних напряжений.

    Операции отжига изготавливаются при температуре 400–600°C на протяжении
    1–2 часов.
    Выбор специализированных присадочных материалов, таких как сплавы с добавками никеля и олова, улучшает свариваемость и механические характеристики готовых изделий.
    Не забывайте про контроль качества сварного соединения с помощью вентиляционных и визуальных методов.

    My web-site https://rms-ekb.ru/catalog/latun/

  9. Сайт обо всём https://vybir.kiev.ua энциклопедия для повседневной жизни. Красота здоровье дом путешествия карьера семья и полезные советы для всех.

  10. Студия дизайна https://lbook.com.ua интерьера и архитектуры. Создаём стильные проекты квартир домов и офисов. Индивидуальный подход современные решения и полный контроль реализации.

  11. Портал про ремонт https://hydromech.kiev.ua свежие статьи о ремонте и отделке дизайне интерьера и выборе материалов. Полезные советы для мастеров и тех кто делает ремонт своими руками.

  12. Интересный сайт https://whoiswho.com.ua обо всём: статьи лайфхаки обзоры и идеи на самые разные темы. Всё что нужно для вдохновения и развития в одном месте.

  13. Онлайн портал https://esi.com.ua про ремонт: идеи для интерьера подбор материалов практические рекомендации и пошаговые инструкции для самостоятельных работ.

  14. Репортажи в больших https://infotolium.com фотографиях: самые обсуждаемые события уникальные кадры и впечатляющие истории. Новости и жизнь в формате визуального рассказа.

  15. Информационный портал https://reklama-region.com про ремонт: ремонт квартир домов офисов. Практические рекомендации современные решения и обзоры стройматериалов.

  16. Сайт про авто https://autoinfo.kyiv.ua свежие новости автопрома обзоры моделей тест-драйвы и советы по эксплуатации. Всё о машинах для водителей и автолюбителей.

  17. Сайт про автомобили https://black-star.com.ua новинки рынка цены тест-драйвы и обзоры. Советы экспертов по выбору и уходу за машиной тюнинг и автоуслуги.

  18. Автомобильный онлайн-журнал https://allauto.kyiv.ua свежие новости автопрома тест-драйвы обзоры новых моделей советы по эксплуатации и ремонту. Всё для водителей и автолюбителей.

  19. Онлайн-журнал https://autoiceny.com.ua для автолюбителей: автомобили новости индустрии тест-драйвы тюнинг и советы по обслуживанию.

  20. Тугоплавкие металлы для катодов в электронике
    Тугоплавкие металлы в создании катодов
    Для создания высокопроизводительных электроэлементов рекомендуется рассмотреть использование вольфрама, молибдена и рения в качестве материалов.
    Эти соединения обладают превосходной термостойкостью
    и стабильностью, что делает их идеальными кандидатами для создания эффективных источников энергии.

    Вольфрам демонстрирует выдающиеся электрические и теплопроводные характеристики, что позволяет значительно увеличить срок
    службы устройств. При температуре работы до 3400°C он остается стабильным
    и надежным, что обеспечивает безопасность работы электронных
    систем.
    Молибден также зарекомендовал себя
    как надежный выбор благодаря своей устойчивости к коррозии и высокой
    прочности. Он позволяет повысить эффективность переходных процессов в цепях и минимизирует потери энергии.

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

    Выбор тугоплавких металлов для проектирования катодов в энергетических применениях
    При проектировании катодов важное внимание следует уделить выбору ниобия и вольфрама.
    Эти материалы обладают высокой термостойкостью и коррозионной стойкостью,
    что делает их идеальными кандидатами
    для использования в агрессивных средах.

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

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

    Выбор должна определять не только теоретическая эффективность, но и практическое применение.
    Назначение катодов в конкретных устройствах требует
    анализа условий эксплуатации, температуры и
    вероятных механических воздействий.
    В некоторых случаях может быть разумным комбинирование различных веществ,
    чтобы достичь оптимального баланса свойств.

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

    Влияние свойств тугоплавких элементов на производительность катодов в полупроводниковых устройствах
    Оптимизированный выбор материалов повышает эффективность
    работы современных полупроводниковых компонентов.

    Сплавы с высокой температурой плавления, такие как
    вольфрам и молибден, демонстрируют выдающиеся электрические свойства, что обеспечивает минимальные потери энергии
    при передаче.
    Хорошая проводимость тока напрямую зависима от кристаллической структуры.

    К примеру, вольфрам, обладая корпусной структурой с высокой симметрией,
    дает возможность достичь меньшего сопротивления на границах зерен, что крайне важно
    для уменьшения тепловых потерь.
    Рассматривая различные фазы,
    следует акцентировать внимание на тех, которые обеспечивают максимальную плотность тока.

    Несмотря на свою прочность, такие материалы также подвержены окислению.

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

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

    Следует отметить, что сочетание свойств проводимости и
    термостойкости создает условия для более точного
    управления электрическими процессами.
    Структурные изменения в высоконагруженных
    зонах могут негативно повлиять на надежность.

    Использование многослойных конструкций может презентовать решение данной проблемы, позволяя комбинировать разные
    группы металлов для повышения устойчивости созидательных
    процессов.
    На основе экспериментов, показано, что элементы,
    обладающие высокой степенью чистоты, создают
    более однородные электрические поля.
    Снижение примесей в исходном материале позволяет избежать локальных дефектов, что в свою очередь приводит к
    повышению производительности.

    Review my web-site; https://uztm-ural.ru/catalog/redkozemelnye-i-redkie-metally/

  21. Авто-журнал https://bestauto.kyiv.ua источник информации для автолюбителей. Новинки рынка сравнения моделей советы по ремонту и уходу интересные материалы о мире автомобилей.

  22. Новостной портал https://gau.org.ua круглосуточные новости комментарии экспертов события регионов и мира. Политика бизнес культура и общество.

  23. Авто портал https://avtomobilist.kyiv.ua всё об автомобилях: новые модели цены рынок подержанных авто тюнинг и автотехнологии. Полезные материалы для автовладельцев.

  24. Онлайн авто-журнал https://mirauto.kyiv.ua с актуальными новостями аналитикой и обзорами. Тесты автомобилей тюнинг технологии и советы по эксплуатации.

  25. Мужской портал https://hooligans.org.ua новости лайфхаки обзоры техники спорт здоровье и авто. Советы для уверенной и гармоничной жизни.

  26. Портал о ремонте https://dki.org.ua и строительстве: от отделки квартиры до возведения загородного дома. Подробные статьи рекомендации экспертов и идеи для обустройства жилья.

  27. Портал о стройке https://sushico.com.ua и ремонте. Новости рынка современные технологии подборка идей для интерьера и экстерьера. Всё что нужно для дома и дачи.

  28. Онлайн сайт https://mramor.net.ua о строительстве и ремонте. Всё о возведении домов ремонте квартир отделке и обустройстве жилья. Обзоры материалов советы экспертов и свежие идеи.

  29. Всё о стройке https://aziatransbud.com.ua и ремонте в одном месте: дизайн архитектура выбор стройматериалов инструкции по монтажу лайфхаки и полезные рекомендации для новичков и мастеров.

  30. Сайт о строительстве https://juglans.com.ua и ремонте — ваш помощник в выборе материалов инструментов и технологий. Всё о ремонте квартир строительстве домов и дизайне интерьеров.

  31. Онлайн журнал https://vitamax.dp.ua о строительстве: проекты домов ремонт квартир выбор стройматериалов дизайн и интерьер. Советы экспертов и свежие идеи для комфортной жизни.

  32. Портал про строительство https://texha.com.ua новости рынка обзоры технологий инструкции и идеи для ремонта. Материалы для застройщиков мастеров и тех кто делает своими руками.

  33. Новости Украины https://gromrady.org.ua онлайн: политика экономика спорт культура и события регионов. Оперативные материалы аналитика и комментарии экспертов круглосуточно.

  34. Авто портал https://road.kyiv.ua с актуальной информацией: новинки рынка цены обзоры страхование и тюнинг. Полезные статьи и аналитика для автомобилистов.

  35. Портал про авто https://automobile.kyiv.ua свежие новости автопрома тест-драйвы обзоры моделей и советы по ремонту. Всё о машинах для водителей и автолюбителей.

  36. Фильмы и сериалы сериал смотреть онлайн в хорошем в качестве бесплатно Онлайн-кинотеатр без регистрации и смс: тысячи фильмов и сериалов бесплатно.

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>