10 Cool Javascript Iframe Libraries

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.

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!

Zoid

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.

Postmate

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.

Iframe Resizer

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.

Iframely

React Frame Component

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

React Frame Component

Lazyframe

Dependency-free library for lazyloading iframes.

Lazyframe

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.

Seamless.js

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.

Porthole

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.

Scroll Frame

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.

Responsiveiframe

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.