rear-window

Iframe manager

0.5.0
latest
Source
npm

Version published: 9 years ago

Maintainers: 1

Created: 9 years ago

Source

Rear Window

Rear Window lets you easily create iframes with HTML contents.

Example Usage

// assuming browserify is in place
var RW = require('rear-window');

var container = document.createElement('div');
document.body.appendChild(container);

var options = {
  styleString: 'body { color: rgb(255, 0, 0); }',
  content: '<p>Lorem Ipsum</p>'
}
var iframe = RW.create(container, options);

// note - update() overwrites any existing body contents
RW.update(iframe, '<h1>New Content</h1><p>Overwrites existing content.</p>');

Installation

Rear Window is written with a module definition to support:

Global inclusion in a browser, just include the rear-window.js file and you will get RW in the global scope
AMD / RequireJS - require(['rear-window/rear-window'], function(RW) {/* ...*/ })
CommonJS-style / Browserify - var RW = require('rear-window')

API

`RW.create(HTMLElement container, Object options)`

Creates a new iframe, appended to container.
Returns the HTMLIFrame element.
Supports the following options:

Option	Type	Description
`options.iframeAttributes`	Object	Attributes to apply to the iframe, such as `id`, `style`, `frameborder`, etc. The key `classString` will be mapped to the `class` attribute.
`options.styleString`	String	Will be inserted into the head of the iframe, as the contents of a `<style>` tag
`options.styleLink`	[String\|Array]	Will be inserted into the head of the iframe as the href of one or more `<link rel="stylesheet"/>` tags
`options.content`	String	Contents to inject into the `<body>` of the new iframe

Example:

// assuming global <script> inclusion
var RW = window.RW;

var container = document.createElement('div');
document.body.appendChild(container);

var options = {
  iframeAttributes: {
    classString: 'iframe-noborder full-height etc' // mapped to 'class'
    id: 'one-and-only-iframe',
    'data-foo': 'bar'
  },
  styleString: 'body { color: #ff0000; }',
  styleLink: 'styles/iframe.css', // an array of URLs is also acceptable
  content: '<h1>Sample Content</h1><p>No need to call update()</p>'
};

var iframe = RW.create(container, options);

`RW.update(HTMLIFrameElement iframe, String contents)`

Updates the <body> content of an existing iframe.
Does not have to be an iframe created by rear-window.
Overwrites existing content.
Leaves the <head> untouched.

Example

// assuming browserify is in place
var RW = require('rear-window');

var container = document.createElement('div');
document.body.appendChild(container);

var iframe = RW.create(container);
RW.update(iframe, '<h1>Sample Content</h1>');
// note - update() overwrites any existing body contents
RW.update(iframe, '<h1>New Content</h1><p>Overwrites existing content.</p>');

Keywords

FAQs

What is rear-window?

Is rear-window well maintained?

Package last updated on 05 Nov 2015

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install