Responsive iFrame

The problem

We want to deploy statically created content into a dynamically generated, responsive webpage (News story page). The statically created content is deployed and then becomes an archived, journalistic record which needs to persist on the BBC News site forever. The story page though is generated at run time, using content from an API and a templating system.

This templating system is updated bi-weekly, HTML and CSS changes happen with each new release. When the static content is made it is tested against the latest version of the templates then released. But after that the templates will change and produce rendering errors with the statically generated content.

Possible solution: iframe

To stop rendering issues with the statically created content, we need to completely isolate the content from the rest of the page. We've tried doing this with CSS resets, but this has proved impossible. The only way to truely decouple HTML from the rest of the page is via an iFrame. This would be okay, however the page layout is responsive, so the iFrame needs to scale with the rest of the interface.

The experiment above uses JavaScript in the host page, to reset the width and height of the iframe when the page resizes. Inside the iframe, JavaScript is used to store the correct height needed to show all the iFrame content. It stores the value in the name property of the window object, which is esaily referenceable from the host page. iFrame content is in blue.