Skip to content

Instantly share code, notes, and snippets.

@toolness

toolness/livepreview.html

Created May 24, 2012 19:42
Show Gist options
  • Save toolness/2783783 to your computer and use it in GitHub Desktop.
Save toolness/2783783 to your computer and use it in GitHub Desktop.
Download ZIP
live preview test
Raw
livepreview.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>live preview test thing</title>
<style>
textarea {
display: block;
width: 100%;
min-height: 200px;
}
iframe {
border: 1px solid black;
width: 100%;
min-height: 200px;
}
</style>
<textarea id="code"
onkeyup="updatePreview()">&lt;h1&gt;hi&lt;/h1&gt;</textarea>
<script>
var iframe,
pageX = 0,
pageY = 0;
function updatePreview() {
var html = document.getElementById("code").value;
if (iframe) {
pageX = iframe.contentWindow.pageXOffset;
pageY = iframe.contentWindow.pageYOffset;
iframe.parentNode.removeChild(iframe);
}
iframe = document.createElement('iframe');
document.body.appendChild(iframe);
var doc = iframe.contentDocument;
var wind = iframe.contentWindow;
doc.open();
doc.write(html);
doc.close();
wind.scroll(pageX, pageY);
}
onload = updatePreview;
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment