If you post any client-side code on your website, it would be nice for people to be able to work with it and test or preview it live. This code uses an iframe to enable real-time viewing of your code. You could use this simply as a DHTML code editor, or you could even extend it to create your own WYSIWYG editor for your web application!
If you receive a JavaScript permission error when you're putting this on a test page, try closing and opening the page instead of just hitting refresh.
Here's an example of it in use:
Just change this text/code to whatever code you want to display. Click 'run code!' to preview the output of the code.
Free and open web programming scripts
<div align="center">
<table style="width:500px; border:solid 1px #666;background:#f8f8f8">
<tr>
<td valign="top"><form name="form1">
<textarea name="code" wrap="soft" onclick="focus(this.code);"
style="border:solid 1px #999; padding:5px; width:250px; height:264px; scroll:auto;">
my test code
</textarea>
</form></td>
<td valign="top">
<iframe src="about:blank" name="preview"
style="border:solid 1px #999;height:275px; width:250px; background:#ffffff" frameborder="0"></iframe>
</td>
</tr>
</table>
<input type="button" value="run code!"
onclick="preview.document.write(document.form1.code.value); preview.document.close(); preview.focus()" />
<input type="button" value="clear"
onclick="document.form1.code.value=";preview.document.write(document.form1.code.value); preview.document.close(); preview.focus()" />
</div>
Sign up for our daily email newsletter:
You must log in to post a comment.