Iframes let you build user experiences into embeddable ‘cross-domain components’, which let users interact with other sites without being redirected. They have a terrible reputation; historically they’ve been used pretty much exclusively for advertizing and tracking and they’re slow to load, resulting in a pretty terrible user experience. So here in this post I’ve collected some Javascript libraries to solve some of the major problems with iframes and popups.

Iframe Resizer

Keep same and cross domain iFrames sized to their content with support for window/content resizing, in page links, nesting and multiple iFrames.

Aload

Loads images, background images, scripts, styles, iframes, videos and audios asynchronously.

Windtalk

Simplest way to communicate with iFrames and other windows.

Zoid

A cross-domain component toolkit, supporting, Render an iframe or popup on a different domain, and pass down props, including objects and functions, Call callbacks natively from the child window without worrying about post-messaging or cross-domain restrictions, Create and expose components to share functionality from your site to others, Render your component directly as a React, Vue or Angular component! It’s ‘data-down, actions up’ style components, but 100% cross-domain using iframes and popups!

Postmate

Postmate is a promise-based API built on postMessage. It allows a parent page to speak with a child iFrame across origins with minimal effort.

Iframe Resizer

Keep same and cross domain iFrames sized to their content with support for window/content resizing, in page links, nesting and multiple iFrames.

Iframely

This is the self-hosted version of Iframely’s APIs and parsers. Iframely gives your fast and simple API for responsive web embeds and semantic meta. The parsers cover well over 1800 domains through 200+ custom domain plugins and generic support for oEmbed, Open Graph and Twitter Cards, that are powered by Iframely’s whitelist.

React Frame Component

This component allows you to encapsulate your entire React application or per component in an iFrame.

Lazyframe

Dependency-free library for lazyloading iframes.

Seamless.js

A seamless iframe makes it so that visitors are unable to distinguish between content within the iframe and content beside the iframe. Seamless.js is a JavaScript library (with no dependencies) that makes working with iframes easy by doing all the seamless stuff for you automatically.

Porthole

Porthole is a small Javascript library that makes it safe and easy to communicate with cross domain iFrames. Porthole relies on hidden iFrames (later referred to a as proxy) to exchange information. The caller sets a url fragment with the message to pass. The proxy by virtue of being served from the same origin as the callee, invokes a callback method with an event object that contains the message read from the url fragment. The message signaling mechanism is based on a resize event.

Scroll Frame

Retain your scroll position between pages using an iframe. Especially helpful for infinite scrolling views. scrollFrame will hijack the user’s click for elements that match the query selector you pass in and instead of reloading the page it will append a modal-like iframe that sits on top of your viewport and points to the element’s href. It then uses HTML5 history APIs to make the back-button function as expected.

Responsiveiframe

On a responsive website, all page components must be responsive. There are multiple ways of making an IFrame responsive. Some responsive IFrame use-cases can be solved with simple Javascript and CSS.