Replace a node with an iframe version of itself
Replaces a node with an iframe version of itself. Read the introduction article.
npm install edenspiekermann/iframify
iframify(HTMLElement, [options])
Where options is an object where keys can be:
headExtra
string
bodyExtra
string
htmlAttr
object
{ class: 'no-js', 'data-foo': 'bar' }
bodyAttr
object
{ class: 'body', id: 'top' }
stylesSelector
string
link[rel*=stylesheet], style
link[rel*=stylesheet]:not([href$="styleguide.css"]), style
metaCharset
string
metaViewport
string
sizingTimeout
number
500
1000
// 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.
It does not work on browsers which do not support the
srcdocattribute on out of the box. However, there is a very good polyfill for
srcdocthat 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
scriptsoption.
open tests/index.html