前言
虽然利用插入代码功能可以很华丽的插入色彩斑斓的代码,但是就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();
}
实例演示
光说不练假把式,下面就是一个完整的例子。点击按钮试试效果吧。
<!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>