iframify

by edenspiekermann

edenspiekermann / iframify

Replace a node with an iframe version of itself

207 Stars 9 Forks Last release: Not found MIT License 39 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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
attribute on

 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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.