这下终于可以方便地发表测试型网页代码了(附源码下载)
前言
虽然利用插入代码功能可以很华丽的插入色彩斑斓的代码,但是就html(Xhtml)代码、js代码、css代码而言,我更喜欢想蓝色理想论坛中的那种:有个文本框,文本框里面是网页代码,然后点击“运行代码”就可以很方便地以文本框中的内容新建一个页面,从而很直观方便的看到代码的运行效果。
所以今天抽了半天的时间做了这个小工具。可以很方便达到那种效果。厚道的说一声:的确参看了蓝色理想的代码,但是自己也修改了很多,因为原来的代码对firefox的兼容性实在是太差了,自己修正了比较多的代码,从而提供了对firefox更好地支持。但是非常遗憾的是,那个保存代码为html文件的功能,虽然很想也修改为能够兼容firefox,但是因为有点超出现阶段我的能力范围,所以留了个遗憾。虽然找到了一些 比较有价值的资料,但是依然没有能够实现此功能对firefox的支持。如果哪位高手有此经验,还请不吝赐教。其实那个工具,只是为了更方便以后的操作而已,并没有什么技术含量。比较核心的代码如下。
核心代码
/*****运行代码*******************************/
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 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 copyCode(obj){
var testCode=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);
}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);
}
function copyCode(obj){
var testCode=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);
}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);
}
/*****保存代码为html页面,非常遗憾的现阶段只支持IE******/
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');//firefox不兼容的主要原因就是因为ff不支持execCommand('saveas','','filename');
newWin.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');//firefox不兼容的主要原因就是因为ff不支持execCommand('saveas','','filename');
newWin.close();
}
实例演示
光说不练假把式,下面就是一个完整的例子。点击按钮试试效果吧。
完整实例源码下载


【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· [AI/GPT/综述] AI Agent的设计模式综述