Replace a node with an iframe version of itself
JavaScript HTML CSS

README.md

Iframify

Replaces a node with an iframe version of itself. Read the introduction article.

Install

npm install edenspiekermann/iframify

Usage

iframify(HTMLElement, [options])

Where options is an object where keys can be:

  • headExtra
    Type: string
    Default: none
    Description: extra content to be injected at the end of <head>.
    Example: <link rel="stylesheet" href="foo.css" />

  • bodyExtra
    Type: string
    Default: none
    Description: extra content to be injected at the end of <body>. g Example: <script src="/assets/js/main.js"></script>

  • htmlAttr
    Type: object
    Default: none
    Description: An object of attributes to pass to the <html> element.
    Example: { class: 'no-js', 'data-foo': 'bar' }

  • bodyAttr
    Type: object
    Default: none
    Description: An object of attributes to pass to the <body> element.
    Example: { class: 'body', id: 'top' }

  • stylesSelector
    Type: string
    Default: link[rel*=stylesheet], style
    Description: The selector to use to define what styles to import.
    Example: link[rel*=stylesheet]:not([href$="styleguide.css"]), style

  • metaCharset
    Type: string
    Default: the one in the outer document (if any).
    Description: The string representation of the charset <meta> tag to import.
    Example: <meta charset="utf-8" />

  • metaViewport
    Type: string
    Default: the one in the outer document (if any).
    Description: The string representation of the viewport <meta> tag to import.
    Example: <meta name="viewport" content="width=device-width, initial-scale=1">

  • sizingTimeout
    Type: number
    Default: 500
    Description: Number of milliseconds to wait before sizing the height of the iframe based on its content. Can be useful when injecting asynchronously loaded content.
    Example: 1000

Examples

// Single node
var component = document.querySelector('.component');
var iframe = iframify(component);
// Collection of nodes
var components = document.querySelectorAll('.component');
var iframes = Array.prototype.map.call(components, function (component) {
  return iframify(component, {});
});
// With options
var component = document.querySelector('.component');
var iframe = iframify(component, {
  headExtra: '<style>.component { color: red; }</style>',
  metaViewport: '<meta name="viewport" content="width=device-width">'
});

Check out the demo on CodePen.

Notes

It does not work on browsers which do not support the srcdoc attribute on <iframe> out of the box. However, there is a very good polyfill for srcdoc that you could include after iframify to make it work on these browsers.

Other major thing to note: JavaScript is not imported into the iframes, but can be with scripts option.

Tests

open tests/index.html