├── .gitignore ├── History.md ├── Makefile ├── README.md ├── example.html ├── index.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | build 2 | node_modules 3 | -------------------------------------------------------------------------------- /History.md: -------------------------------------------------------------------------------- 1 | 2 | 0.1.2 / 2014-10-21 3 | ================== 4 | 5 | * Use `_blank` for the `_target`. 6 | 7 | 0.1.1 / 2014-09-04 8 | ================== 9 | 10 | * Make resize event bubble. 11 | 12 | 0.1.0 / 2014-09-04 13 | ================== 14 | 15 | * Emit event on resize. 16 | 17 | 0.0.2 / 2014-08-29 18 | ================== 19 | 20 | * Only set style.height on height change. 21 | 22 | 0.0.1 / 2014-07-15 23 | ================== 24 | 25 | * Initial release. 26 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | build: install index.js 2 | mkdir -p build 3 | browserify --standalone iframify index.js -o build/iframify.js 4 | 5 | install: 6 | npm install 7 | 8 | .PHONY: make, install 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # iframify 2 | 3 | Wraps the given HTML code in an iframe that resizes dynamically to fit its contents. 4 | 5 | Useful for displaying embeds that use ` 8 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Module Dependencies 3 | */ 4 | 5 | var query = require('component-query'); 6 | 7 | /** 8 | * A script that periodically checks for changes in page height and notifies the parent 9 | */ 10 | 11 | var script = function(){ 12 | var prevHeight, observer; 13 | var update = function() { 14 | var height = document.documentElement.getBoundingClientRect().height; 15 | if (height != prevHeight) { 16 | window.parent.postMessage({ message: 'iframify height', height: height }, '*'); 17 | prevHeight = height; 18 | } 19 | } 20 | document.addEventListener('DOMContentLoaded', update); 21 | setInterval(update, 500); 22 | if (window.MutationObserver) { 23 | observer = new MutationObserver(update); 24 | observer.observe(document.documentElement, { childList: true, attributes: true, characterData: true }); 25 | } 26 | }; 27 | 28 | var PRELUDE = 'data:text/html;charset=utf-8,'; 29 | var DOCTYPE = escape(''); 30 | var BASE = escape(''); 31 | var STYLE = escape(''); 32 | var SCRIPT = escape('