Skip to content

Latest commit

聽

History

History
17 lines (12 loc) 路 1.16 KB

README.md

File metadata and controls

17 lines (12 loc) 路 1.16 KB
Raw

Responsive <iframe /> 馃柤

Description

Showcase project embedding an <iframe /> displayed in full height in host document.

<iframe /> is the way to go when embedding your website into any non third-party website with no configuration and while sandboxing style 馃帹and security 馃敀. However, building a responsive iframe 馃捇馃摫is pretty tricky. Especially displaying the iframe in full height in the host document.

Explanation

  1. The <iframe /> window calculates its height 馃搹 and sends a message 馃摣(with a specific syntax) to its parent using the postMessage API.
  2. The parent has a listener 馃憘to this message 馃摤 and dynamically sets the height of the <iframe />

Demo

This project is hosted on CodeSandbox.

Source

This project is inspired 馃挕& "forked" 馃尡from the Making IFrames Responsive article from bitsofcode and the related source code.