实现方式并非这一种，下面代码仅供参考。
<!DOCTYPE html><html><head><meta content="‘text/html;" charset="utf-8" http-equiv="Content-Type" /><title>测试代码</title><script>//运行代码function doRun(param) ?{ ????????cod=document.getElementById(param) ?????var code=cod.value; ?????if (code!=""){ ?????????var newwin=window.open(‘‘,‘‘,‘‘); ???????????newwin.opener = null ??????????newwin.document.write(code); ???????????newwin.document.close(); ???}}//复制代码function doCopy(param) { ????if (document.all){ ????????textRange = document.getElementById(param).createTextRange(); ?????????textRange.execCommand("Copy"); ????} ???else{ ????????//alert("此功能只能在IE上有效"); ????????copyToClipboard(document.getElementById(param).value); ???}}//另存为代码function saveCode(param) { ???cod=document.getElementById(param) ???var code=cod.value; ???if (code!=""){ ???????var winname = window.open(‘‘, ‘_blank‘, ‘top=10000‘); ???????winname.document.open(‘text/html‘, ‘replace‘); ???????winname.document.write(code); ???????winname.document.execCommand(‘saveas‘,‘‘,‘code.htm‘); ???????winname.close(); ???}}function copyToClipboard(txt) { ????if(window.clipboardData) { ????????????window.clipboardData.clearData(); ????????????window.clipboardData.setData("Text", txt); ????} else if(navigator.userAgent.indexOf("Opera") != -1) { ?????????window.location = txt; ????} else if (window.netscape) { ?????????try { ??????????????netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); ?????????} catch (e) { ??????????????alert("被浏览器拒绝！\n请在浏览器地址栏输入‘about:config‘并回车\n然后将‘signed.applets.codebase_principal_support‘设置为‘true‘"); ?????????} ?????????var clip = Components.classes[‘@mozilla.org/widget/clipboard;1‘].createInstance(Components.interfaces.nsIClipboard); ?????????if (!clip) ??????????????return; ?????????var trans = Components.classes[‘@mozilla.org/widget/transferable;1‘].createInstance(Components.interfaces.nsITransferable); ?????????if (!trans) ??????????????return; ?????????trans.addDataFlavor(‘text/unicode‘); ?????????var str = new Object(); ?????????var len = new Object(); ?????????var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString); ?????????var copytext = txt; ?????????str.data = copytext; ?????????trans.setTransferData("text/unicode",str,copytext.length*2); ?????????var clipid = Components.interfaces.nsIClipboard; ?????????if (!clip) ??????????????return false; ?????????clip.setData(trans,null,clipid.kGlobalClipboard); ????}}</script><style>.btn { ???background-color: #A5A5A5; /* Green */ ???//border: none; ???color: white; ???padding: 5px 10px; ???text-align: center; ???text-decoration: none; ???display: inline-block; ???font-size: 16px;}.textarea { ???background-color: #CCE8CF; ???padding: 5px 10px; ???text-decoration: none; ???display: inline-block; ???font-size: 16px;}</style><script> /* 实现方式二 ?// ?window.open 弹出新窗口的命令； // ?‘page.html‘ 弹出窗口的文件名； // ‘newwindow‘ 弹出窗口的名字（不是文件名），非必须，可用空‘‘代替； // height=100 窗口高度； // width=400 窗口宽度； // top=0 窗口距离屏幕上方的象素值； // left=0 窗口距离屏幕左侧的象素值； // toolbar=no 是否显示工具栏，yes为显示； // menubar，scrollbars 表示菜单栏和滚动栏。 // resizable=no 是否允许改变窗口大小，yes为允许； // location=no 是否显示地址栏，yes为允许； // status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许； ???function doRun() { ???????????var winEx2 =window.open(‘‘, ‘newwindow‘, ‘height=300, width=400, top=200px, left=300px, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no‘); ???????????????//window.open("", "winEx2", "width=500,height=300,status=yes,menubar=no,scrollbars=yes,resizable=yes"); ???????????????//window.open(‘‘, ‘newwindow‘, ‘height=300, width=400, top=200px, left=300px, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no‘); ???????winEx2.document.open(‘text/html‘, ‘replace‘); ???????winEx2.document ???????????????.write(unescape(event.srcElement.parentElement.children[0].value)); ???????winEx2.document.close(); ???} ???function saveFile() { ???????var win = window.open(‘‘, ‘‘, ‘top=10000,left=10000‘); ???????win.document.write(document.all.t1.innerText) ???????win.document.execCommand(‘SaveAs‘, ‘‘, ‘a.html‘) ???????win.close(); ???} ???*/</script></head><body > ???????<div align="center" class="UBBContent"> ???<!--textarea 中的html内的‘<‘,‘>‘需要转义‘<‘,‘>‘ --> ???????<textarea id="t1" name="textfield" class="textarea" rows="30" cols="100"><!Doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>测试程序</title></head><body><scriptsrc="http://code.jquery.com/jquery-1.4.1.js"></script><script type="text/javascript"> ???//字数限制 ???window.onload = function() { ???????//（document） ???????document.getElementById(‘note‘).onkeyup = function() { ???????????????????document.getElementById(‘text-count‘).innerHTML=this.value.length; ???????} ???//（jquery） ???????$(‘#note2‘).keyup(function() { ???????// ???var val=$(‘#note2‘).val(); ???????// ???var len=val.length; ???????var len=this.value.length ???????????????????$(‘#text-count2‘).text(len); ???????}) ???}</script><div><textarea cols="40" rows="5" id="note"name="note" maxlength="100" value=""onkeyup="this.value=this.value.substring(0, 100)"placeholder="最多可输入100字"></textarea><span id="text-count" value="">0</span>/100</div><div><textarea cols="40" rows="5" id="note2"name="note2" maxlength="100" value=""onkeyup="this.value=this.value.substring(0, 100)"placeholder="最多可输入100字"></textarea><span id="text-count2" value="">0</span>/100</div> </body></html> ???????</textarea><br><br> ????????<input name="Button" class="btn" onclick="doRun(‘t1‘)" type="button" value="运行代码" /> ????????????<input name="Button" class="btn" onclick="t1.select(‘t1‘)" type="button" value="全选" /> ?????????????<input name="Button" class="btn" onclick="t1.value=‘‘" type="button" value="清空" /> ????????????<input onclick="saveCode(‘t1‘);" class="btn" type="button" value="保存代码" /><br> ????????????<span>[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</span><br> ???????<!--实现方式二 ???????????????????????<input name="Button" class="btn" onclick="doRun()" type="button" value="运行代码" /> ????????????<input name="Button" class="btn" onclick="t1.select()" type="button" value="全选" /> ?????????????<input name="Button" class="btn" onclick="t1.value=‘‘" type="button" value="清空" /> ????????????<input onclick="saveFile();" class="btn" type="button" value="保存代码" /> ??--> ???</div></body></html>具体效果 请看上篇！！！
网页在线运行HTML——实现代码
原文地址：http://www.cnblogs.com/libf/p/7490014.html