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
  .
  Example:

• bodyExtra

  
  Type:

  string

  
  Default: none
  Description: extra content to be injected at the end of
  . g Example:

• htmlAttr

  
  Type:

  object

  
  Default: none
  Description: An object of attributes to pass to the
  element.
  Example:

  { class: 'no-js', 'data-foo': 'bar' }

• bodyAttr

  
  Type:

  object

  
  Default: none
  Description: An object of attributes to pass to the
  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
  tag to import.
  Example:

• metaViewport

  
  Type:

  string

  
  Default: the one in the outer document (if any).
  Description: The string representation of the viewport
  tag to import.
  Example:

• 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: '',
  metaViewport: ''
});

Check out the demo on CodePen.

Notes

It does not work on browsers which do not support the

srcdoc

srcdoc

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

scripts

Tests

open tests/index.html