The HTML element iframe was created in 1997 by Microsoft and standardized in HTML 4.0 and allowed in HTML5. Its pure purpose is to integrate web content from one page into another page. Ever since this technology was abused, e.g. for advertisements and therefore, often considered something to be avoided. So time to clear things up.

Basics

How to use an iframe? It's just a tag and an URL like this:

<html>
    <body>
        <iframe id="my_if" src="my_iframe.htm" name="mine"></iframe>
        <p>
            <a href="https://www.exxcellent.de" target="mine">www.exxcellent.de</a>
        </p>
    </body>
</html>

Using the name attribute allows to control the content from the embedding page. The href will now open in the iframe. But the embedded content can not control anything in the embedding page.

DOM access

The embedding page has access to the iframe by accessing the DOM element:

iframe.contentWindow

The embedded page in the iframe has access to the embedding page by:

window.parent

But access is only allowed according the same-origin policy (must use the same domain).

PostMessage API

To allow bidirectional communication across different domains the post message API can be used since HTML5. But both sides must implement the postMessage API and no mixture of http and https origins is allowed.

// The page containing the iframe
window.onload = function () {
	var iframe = document.getElementById("my_if").contentWindow;
	iframe.postMessage("Post!", "https://www.exxcellent.de");
};

// the embedded page will listen
function displayMessage (event) {
	var message;
	if (evt.origin !== "https://exxcellent.de") {
		return;
	} else {
		message = "I got " + event.data + " from " + event.origin;
	}
}

window.addEventListener("message", displayMessage, false);

Creative solutions

There are some creative solutions / hacks applying the basics mentioned above to leverage some missing features and or unique behavior in the browser.

Responsive hack

Styling the content using the same stylesheet will help to build a seamless user experience across the different content. With a lot of styling postmessage API usage and javascript magic its possible to create responsive iframes. But a solution hard to maintain, because both pages must interact using postMessage API, scripts and styling.

Loading speed hack

A page with an embedded iframe will load the content in parallel. This feature can be used to speed up loading time. Based on my experience this i handy to prevent a lock in javascript, that may involve javascript calls using

Document.write();

These commands cannot be called asynchronously. With an iframe its possible to render other parts of the page and still call the Document.write() command asynchronously.

Embedded single page apps "portal" hack

In a project we sometimes use different client technologies because each fits a certain need, namely Angular and UI5. In fact these applications are usually single purpose apps (e.g. user master data). So we tried to mix the apps to reuse, like mighty supercharged web components.

The solution: An angular component is the embedding single page application and contains a iframe component, allowing to open UI5 apps in an iframe. The user can navigate to different apps seamlessly but there are limits.

Good	Bad
Easy to implement	No easy bidirectional communication
Isolated runtime	Browser Navigation of embedded content not possible
Works best with single purpose apps	Styling has limits
	bad accessibility support

My experience: Its worth using iframes to integrate web apps if you are mixing frameworks but it comes at a cost. If you can live with the bad parts (see above), it's a good enough (and sometimes only) solution.

Session check hack

You can use iframes to detect if a user is sign on or off. This is pretty neat in a single sign on (SSO) scenario. I saw this while setting up Keycloak as Single Sign On Server. A hidden iframe is used to detect and store the status in a cookie. The status is retrieved by reading a cookie - so.this does not require any network traffic. The embedded page will then send the received tokens to the main application by using the postMessage API.

My experience: Works flawless as long as all server are using SSL, see https://www.keycloak.org/docs/latest/securing_apps/

Are iframes bad?

Certainly not. The inline frame has currently no replacement tag in the HTML specification to embed content from another page. But there are limits and At googles I/O 2019 developer conference a new Portal element was presented. Its a kind of link but with a preview, i.e. you can see it, click it and navigate to it. And it has a postMessage API.

Image sources

The cover image used in this post was created by asim alnamat under the following license. All other images on this page were created by eXXcellent solutions under the terms of the Creative Commons Attribution 4.0 International License

Inlineframe#HTML#Portal#JavaScript