JSFiddle - React, Tailwind, and code Playground
HTML
<textarea id="pixel-html">
<script>alert(location.href);</script>
<img src="http://fohn.net/duck-pictures-facts/mallard-duck.jpg"/>
</textarea>
<button>Update</button>
<iframe id="pixel-iframe"></iframe>
CSS
iframe { border: 1px dotted #ccc; }
textarea, iframe { width: 100%; height: 200px; }
JavaScript
$(function(){
$('button').click(function(e){
var doc = $('#pixel-iframe').contents();
docBody = doc.find('body'),
b = docBody[0],
d = doc[0],
data = $($('#pixel-html').val());
data.filter('script').each(function(){
addScript(this, d);
});
docBody.html(data.filter(':not(script)'));
});
function addScript(elem, d){
var script = d.createElement('script');
script.setAttribute('type', 'text/javascript');
if ( elem.src ) {
script.setAttribute('src', elem.src);
} else {
script.text = elem.text ||
elem.textContent ||
elem.innerHTML || "";
}
//if ( elem.parentNode ) {
// elem.parentNode.removeChild( elem );
//}
d.getElementsByTagName('head')[0].appendChild(script);
}
});
//debugger;
//console.log(doc[0].location.href);
//docBody[0].innerHTML = this.value;
//console.log(docBody[0].innerHTML);
//$(this.value, doc).appendTo(docBody);
//frameBody.html(this.value);