测试网页代码

这下终于可以方便地发表测试型网页代码了（付源码下载）

前言

色彩斑斓的"马"

虽然利用插入代码功能可以很华丽的插入色彩斑斓的代码，但是就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  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();
}

实例演示

光说不练假把式，下面就是一个完整的例子。点击按钮试试效果吧。

<script language="javascript" type="text/javascript"> 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);}} </script> <!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> <p>A testpage from<a href="http://justinyoung.cnblogs.com/" title="博客园Yes！B/S！博客">YES!B/S!</a></p> </body> </html>

 

完整实例源码下载

点击下载图标下载