这下终于可以方便地发表测试型网页代码了（附源码下载）-优快云博客

本文介绍了一个实用的代码运行工具，该工具能直接运行HTML、CSS及JS代码，并支持复制及保存为HTML文件等功能。作者针对Firefox浏览器进行了兼容性改进。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<h4>前言</h4>
<div class="floatRPic">
<a title="优雅的代码" href="http://justinyoung.cnblogs.com/" target="_blank"><img alt="优雅的代[码]" src="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2008_1q/colorCode.PNG"></a> 
色彩斑斓的"马"</div>
虽然利用插入代码功能可以很华丽的插入色彩斑斓的代码，但是就html（Xhtml）代码、js代码、css代码而言，我更喜欢想蓝色理想论坛中的那种：有个文本框，文本框里面是网页代码，然后点击“运行代码”就可以很方便地以文本框中的内容新建一个页面，从而很直观方便的看到代码的运行效果。
所以今天抽了半天的时间做了这个小工具。可以很方便达到那种效果。厚道的说一声：的确参看了蓝色理想的代码，但是自己也修改了很多，因为原来的代码对firefox的兼容性实在是太差了，自己修正了比较多的代码，从而提供了对firefox更好地支持。但是非常遗憾的是，那个保存代码为html文件的功能，虽然很想也修改为能够兼容firefox，但是因为有点超出现阶段我的能力范围，所以留了个遗憾。虽然找到了一些 <a title="firefox的文件操作资料" href="http://developer.mozilla.org/en/docs/FileGuide:IO" target="_blank">比较有价值的资料</a>，但是依然没有能够实现此功能对firefox的支持。如果哪位高手有此经验，还请不吝赐教。其实那个工具，只是为了更方便以后的操作而已，并没有什么技术含量。比较核心的代码如下。
<h4>核心代码</h4>
<div style="border-right: #cccccc 1px solid; padding-right: 5px; border-top: #cccccc 1px solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; border-left: #cccccc 1px solid; width: 98%; padding-top: 4px; border-bottom: #cccccc 1px solid; background-color: #eeeeee;">
/*****运行代码*******************************/ functionrunCode(){ varnewWin=window.open('',"_blank",''); 
newWin.document.open('text/html','replace'); 
newWin.opener=null; vartestCode=document.getElementById("txtTestCode").value; 
newWin.document.write(testCode); 
newWin.document.close(); 
}
</div>

<div style="border-right: #cccccc 1px solid; padding-right: 5px; border-top: #cccccc 1px solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; border-left: #cccccc 1px solid; width: 98%; padding-top: 4px; border-bottom: #cccccc 1px solid; background-color: #eeeeee;">
/*****复制代码到粘贴板*********************/ functioncopyCode(obj){ vartestCode=document.getElementById("txtTestCode").value; if(copy2Clipboard(testCode)!=false) 
{ 
alert("生成的代码已经复制到粘贴板，你可以使用Ctrl+V贴到需要的地方去了哦！"); 
} 
} //很大的一陀是为了对firefox的兼容 copy2Clipboard=function(txt){ if(window.clipboardData){ 
window.clipboardData.clearData(); 
window.clipboardData.setData("Text",txt); 
}elseif(navigator.userAgent.indexOf("Opera")!=-1){ 
window.location=txt; 
}elseif(window.netscape){ try{ 
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); 
}catch(e){ 
alert("您的firefox安全限制限制您进行剪贴板操作，请打开’about:config’将signed.applets.codebase_principal_support’设置为true’之后重试"); returnfalse; 
} varclip=Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard); if(!clip) return; vartrans=Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable); if(!trans) return; 
trans.addDataFlavor('text/unicode'); varstr=newObject(); varlen=newObject(); varstr=Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString); varcopytext=txt; 
str.data=copytext; 
trans.setTransferData("text/unicode",str,copytext.length*2); varclipid=Components.interfaces.nsIClipboard; if(!clip) returnfalse; 
clip.setData(trans,null,clipid.kGlobalClipboard); 
}
</div>

<div style="border-right: #cccccc 1px solid; padding-right: 5px; border-top: #cccccc 1px solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; border-left: #cccccc 1px solid; width: 98%; padding-top: 4px; border-bottom: #cccccc 1px solid; background-color: #eeeeee;">
/*****保存代码为html页面，非常遗憾的现阶段只支持IE******/ functionsaveCode(obj){ varnewWin=window.open('','_blank','top=10000');//这里是个技巧，弹出的页面，虽然去不掉，但是我们可以让它向下移动到屏幕之外 newWin.document.open('text/html','replace'); vartestCode=document.getElementById("txtTestCode").value; 
newWin.document.write(testCode); 
newWin.document.execCommand('saveas','','code.htm');//firefox不兼容的主要原因就是因为ff不支持execCommand('saveas','','filename'); newWin.close(); 
} 
</div>
 <h4>实例演示</h4>
光说不练假把式，下面就是一个完整的例子。点击按钮试试效果吧。

function runCode(){var newWin=window.open('',"_blank",'');newWin.document.open('text/html','replace');newWin.opener=null
var testCode=document.getElementById("txtTestCode").value;newWin.document.write(testCode);newWin.document.close();}
function saveCode(obj){var newWin=window.open('','_blank','top=10000');newWin.document.open('text/html','replace');var testCode=document.getElementById("txtTestCode").value;newWin.document.write(testCode);newWin.document.execCommand('saveas','','code.htm');newWin.close();}
function copyCode(obj){var testCode=document.getElementById("txtTestCode").value;if(copy2Clipboard(testCode)!=false)
{alert("生成的代码已经复制到粘贴板，你可以使用Ctrl+V 贴到需要的地方去了哦！ ");}}
copy2Clipboard=function(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("您的firefox安全限制限制您进行剪贴板操作，请打开’about:config’将signed.applets.codebase_principal_support’设置为true’之后重试");return false;}
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);}}
<textarea id="txtTestCode" style="width: 532px; height: 198px;" rows="12" cols="18"> <!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="YES!B/S!" />
<meta name="Description" content="This page is from http://Justinyoung.cnblogs.com" />
<title>CSS/Javascript demo</title>
</head>
<body>
A testpage from<a href="http://justinyoung.cnblogs.com/" title="博客园Yes！B/S！博客">YES!B/S!</a>
</body>
</html>
</textarea><div style="clear: both;">
<input type="button" value="运行代码"><input type="button" value="复制代码"><input type="button" value="另存代码">
</div>

<h4>完整实例源码下载</h4>
<img alt="博客园实例源码下载" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2007/broadcast.gif">点击下载图标下载 <a title="博客园实例源码下载" href="http://files.cnblogs.com/JustinYoung/runCodeTest.rar" target="_blank"><img alt="博客园实例源码下载" src="http://images.cnblogs.com/cnblogs_com/justinyoung/common/000download.gif"></a>
<hr align="left" width="80%">