iFrame - dynamic content

Create an iFrame and write data to it. Would be useful for a bookmarklet.

by Oliver Kelso

HTML

<p>test iframe</p>

JavaScript

var test = document.title;

var html = '<head>';
html += '<style>body{background:#FFF;font-family:helvetica;}h1{font-size:15px;}</style>';
html += '</head>';
html += '<body>';
html += '<h1 class="header">'+ test +'</h1>';
html += '<a href="#" onclick="parent.document.test(document.title)">test</a>';
html += '</body>';

var iframe = document.createElement('iframe');
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
iframe.id="randomid";
document.body.appendChild(iframe);

console.log('iframe.contentWindow =', iframe.contentWindow);

function test(msg){
    alert(msg);
};

var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = 'https://s3.amazonaws.com/articulate.io/app-ui-themes/verizon-default/latest/css/articulate.min.css';
document.head.appendChild(link);