这下终于可以方便地发表测试型网页代码了(附源码下载)

前言

优雅的代[码]
色彩斑斓的"马"

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

实例演示

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

 

完整实例源码下载

博客园实例源码下载点击下载图标下载
博客园实例源码下载
posted @ 2008-01-04 17:03 杨正祎(阿一) 阅读(4447) 评论(51)  编辑 收藏

  回复  引用  查看    
#1楼 2008-01-04 17:30 | Zhuang miao      
好!!
  回复  引用  查看    
#2楼 2008-01-04 17:39 | Osamede      
以前看到过一个网页,就俩个iframe
上面写进去html
下面立刻把效果显示出来,比这个好多了,而且非常非常的简单:-)
http://htmledit.squarefree.com/

  回复  引用  查看    
#3楼 [楼主]2008-01-04 17:40 | 杨正祎      
@Osamede
iframe的坏处,我想已经没有必要再说了。呵呵。。

这样还有个好处就是:你可以现在框里面修改代码然后再执行。阅读者可以自行的修改框中的运行代码,然后查看运行效果。

  回复  引用  查看    
#4楼 2008-01-04 17:42 | 玉开      
bucuo
  回复  引用  查看    
#5楼 2008-01-04 17:46 | webqsoft [未注册用户]
点击[复制代码],如果在谈出的对话框中选择[Not allow Access],后面效果表现异常
  回复  引用  查看    
#6楼 2008-01-04 17:50 | PerfectDesign      
不错,避开了iframe
  回复  引用  查看    
#7楼 [楼主]2008-01-04 18:01 | 杨正祎      
@webqsoft
你的应该是firefox吧。
  回复  引用  查看    
#8楼 2008-01-04 19:23 | zzz [未注册用户]
偶都是弄个div,再设置innerHTML。。。
script style这类标记就appendChild上去

不太喜欢window.open这东西,宁愿弹出一个像jquery的dialog这类东西
  回复  引用  查看    
#9楼 2008-01-04 19:41 | airwolf2026      
var newWin = window.open('', '_blank', 'top=10000');//这里是个技巧,弹出的页面,虽然去不掉,但是我们可以让它向上移动到屏幕之外



(*^__^*) 嘻嘻…….楼主,你的这个值好像还不够大哈.
俺的显示器在"另存代码"的时候还是可以看到弹出的窗口哈.
19''1440*900分辨率
  回复  引用  查看    
#10楼 [楼主]2008-01-04 20:40 | 杨正祎      
@airwolf2026
1w还不够呀。呵呵~~
不好意思,这里有个低级错误,整数应该是向下,负数才是向上。呵呵。。。
  回复  引用  查看    
#11楼 [楼主]2008-01-04 20:41 | 杨正祎      
@zzz
个人感觉,主要是比较方便浏览者。
  回复  引用  查看    
#12楼 2008-01-04 21:17 | 大石头      
太有意思了,很多年来,我也一直喜欢这个。

请问,我是否可以把它用于我的商业项目中?
  回复  引用  查看    
#13楼 [楼主]2008-01-04 21:29 | 杨正祎      
@大石头
“请问,我是否可以把它用于我的商业项目中?”
——没有问题。既然贴出来就是和大家一起分享的。你可以尽情的使用。
当然,如果可能请非常隐蔽的带上我的博客地址。例如,采用注释标一下即可。
  回复  引用  查看    
#14楼 2008-01-04 21:38 | 早班火车~      
不错,挺新鲜的,虽然在无忧脚本,
蓝色理想老见到,但还真没想过研究一下哈。
  回复  引用  查看    
#15楼 [楼主]2008-01-04 22:12 | 杨正祎      
@早班火车~
的确,我也是因为看到蓝色理想代码运行框,因为喜欢才稍微研究一下的。不过,蓝色理想的那个对firefox的兼容性的确不是很好,所以自己又修正了一些代码。
  回复  引用  查看    
#16楼 2008-01-04 22:23 | 蛙蛙池塘      
你那色彩斑斓的马和正文是什么关系?对比?衬托还是装饰?
  回复  引用  查看    
#17楼 2008-01-04 22:27 | 蛙蛙池塘      
楼主第一季度的计划8错,我也该定一个。
  回复  引用  查看    
#18楼 [楼主]2008-01-05 02:08 | 杨正祎      
@蛙蛙池塘
没有半毛钱关系。一个是马,一个是码,读音相同而已。呵呵~~
  回复  引用  查看    
#19楼 [楼主]2008-01-05 02:10 | 杨正祎      
@蛙蛙池塘
非常惭愧地说,上个季度的任务没有全部完成。唉~
定计划的时候感觉太简单,时间结束的时候才发现,要完成很难。
眼高手低说的就是我呀。
  回复  引用  查看    
#20楼 2008-01-05 08:26 | 韩现龙      
很不错。
遗憾的是今天早晨再看的时候忽然发现标题中有个“通假字”,哈哈,希望楼主能把它改成“通真字”
  回复  引用  查看    
#21楼 2008-01-05 10:32 | 破曉之陽      
不錯。。我也去試試。嘿嘿。
  回复  引用  查看    
#22楼 2008-01-05 11:06 | 大石头      
--引用--------------------------------------------------
杨正祎: @大石头
“请问,我是否可以把它用于我的商业项目中?”
——没有问题。既然贴出来就是和大家一起分享的。你可以尽情的使用。
当然,如果可能请非常隐蔽的带上我的博客地址。例如,采用注释标一下即可。
--------------------------------------------------------

代码里面可能就不加注释了,系统专门有地方说明各个模块的主要技术点出处的^_^
  回复  引用  查看    
#23楼 2008-01-05 11:26 | 蛙蛙池塘      
俺的第一季度的计划如下
看完几本书:《应用程序框架设计》《lucene in action》《P2P网络技术原理与系统开发案例》
蛙兔网进度:
Tracing,Perfcounter,DbAccess基础组件要完善;
站内搜索要实现;
发主题,发贴,发评论的功能实现;
初步的性能优化、SEO优化,界面优化和web标准优化;
  回复  引用  查看    
#24楼 2008-01-05 12:08 | 破曉之陽      
@杨正祎
為什么。textarea 里面的預設值不能寫JAVASCRIP腳本啊。
我看別人的 好像都可以哦。有什么解決的方案不。
  回复  引用  查看    
#25楼 2008-01-05 12:51 | 老夫子系      
很不错.呵呵

  回复  引用  查看    
#26楼 [楼主]2008-01-05 13:14 | 杨正祎      
@大石头
那也没有问题,如果不方便,不加也是可以到。技术共享才是第一位的。呵呵。。
  回复  引用  查看    
#27楼 [楼主]2008-01-05 13:16 | 杨正祎      
@韩现龙
付下载已经改为“附”下载。呵呵,拼音输入法,老是打错别字。唉~~
  回复  引用  查看    
#28楼 [楼主]2008-01-05 13:18 | 杨正祎      
@蛙蛙池塘
关于计划,以前的pm有很经典的话。
计划跟不上变化,但是如果没有计划,那连个想变化的东西都没有。
  回复  引用  查看    
#29楼 [楼主]2008-01-05 13:19 | 杨正祎      
应该是可以到呀。

<!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>


<textarea id="" rows="" cols="">
<script type="text/javascript" language="javascript" >
alert(1);
</script>
</textarea>
</body>

</html>
  回复  引用  查看    
#30楼 [楼主]2008-01-05 13:20 | 杨正祎      
@老夫子系
谢谢夸奖。呵呵。。
  回复  引用  查看    
#31楼 [楼主]2008-01-05 13:25 | 杨正祎      
@webqsoft
也有可能是ie7,因为这个要访问本地的粘贴板功能,所以浏览器设置的必要严格的话,就会询问一下。
  回复  引用  查看    
#32楼 2008-01-05 13:28 | TerryLee      
cool!
  回复  引用  查看    
#33楼 [楼主]2008-01-05 13:32 | 杨正祎      
@TerryLee
李兄,可是我很敬仰的人物呀!
瓦咔咔~真是感到很荣幸呀。呵呵~
  回复  引用  查看    
#34楼 2008-01-05 13:43 | Anytao      
@杨正祎
杨兄的每篇文章读来都很舒服,这里的感觉太好了。

  回复  引用  查看    
#35楼 [楼主]2008-01-05 14:53 | 杨正祎      
@Anytao
首先恭喜一下新的mvp诞生了。呵呵。
然后回复: 唉~没有办法,因为文章一直没有什么技术含量,所以只能在排版上下点功夫,好在已经有了一套模板,所以处理起来还不是很费力。呵呵~
  回复  引用  查看    
#36楼 2008-01-05 15:10 | Midapex Village      
就是斑马啊!!!
  回复  引用  查看    
#37楼 2008-01-05 15:28 | Anytao      
@杨正祎
呵呵,你太客气了,我每次都能从这里受益,虽然经常潜水,但是心存感激呀:-)
  回复  引用  查看    
#38楼 2008-01-05 15:41 | 破曉之陽      
@杨正祎
你也許沒有明白我所說的,我的意思是說。當我第一次打開你的這篇文章后。
那個運行代碼上面的內容如果是
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>dhtmlpos</title>
</head>
<body>
<textarea>DTHML is so cool!
</textarea>
</body>
<SCRIPT LANGUAGE="JavaScript">
var s = "";
s += "\r\n屏幕可用工作区宽度:"+ window.screen.availWidth;
alert(s);
</SCRIPT>
</html>

該如何處理啊,我下了你的代碼下來。直接把上面的代碼替換掉,但是我第一次打開的時候買就彈出了對話框,而不是我點運行代碼的時候彈出的對話框。


也就是說。。我替換的內容中不能有textarea 標簽。
  回复  引用  查看    
#39楼 2008-01-05 16:46 | music000      
呵呵,谢谢分享!
在蓝色看过,想着研究下,但从没动过手,省力气了,哈哈...
  回复  引用  查看    
#40楼 [楼主]2008-01-05 21:12 | 杨正祎      
@破曉之陽
我了解你的意思了,那是因为html把里面的那个当成对话框那个textarea的结束标签了。
你可以这样处理。
把里面的那个textarea的结束标签的"<" 换成&lt; 就可以了。
例子你可以展开下面这段代码看看(注意第13行的代码):
点击展开这段代码,注意第13行


  回复  引用  查看    
#41楼 [楼主]2008-01-05 21:16 | 杨正祎      
@music000
我也是一直很想研究一下,但一直比较懒,最近才动手的。呵呵。。惰性,人人都会有的。
  回复  引用  查看    
#42楼 2008-01-05 23:54 | STS [未注册用户]
这里基本没有人贴HTML/JS代码...
  回复  引用  查看    
#43楼 [楼主]2008-01-06 00:48 | 杨正祎      
@STS
我就经常贴呀。。
  回复  引用  查看    
#44楼 2008-01-06 12:25 | 破曉之陽      
@杨正祎
谢谢。。你是从那里知道要用这个&lt;才可以的啊。
  回复  引用  查看    
#45楼 [楼主]2008-01-06 14:35 | 杨正祎      
@破曉之陽
分析呀。既然浏览器把里面的那个当成了外面的那个texearea的结束标签,那么我们把它改一下,别让浏览器误以为就可以了呀。那就把“<”转义一下就可以了呀。
呵呵。。
  回复  引用  查看    
#46楼 2008-01-06 21:53 | shengsheng [未注册用户]
呵呵 不错的
谢谢
  回复  引用  查看    
#47楼 2008-01-07 09:38 | MS_Frank      

这个我想应该不难吧!
首先firefox浏览器我没有用过,我一直都用IE的。
在JS中document对象有execCommand这么一方法。这个方法可用于执行指定的命令。我一般常用它调用浏览器菜单上的命令。

即然不可以直接实现,我们可以变向实现。
我想每个浏览器都有一个可以将当前页面另存为的功能吧?
你可以在你的页面中放置一个iframe然后将其隐藏。将你须要另存为的代码,输出到iframe里面。然后调用 iframe.document.execCommand("命令字符串");就可以将iframe里面的代码另存为。
理论上是可以的,我机器上没firefox要不然就帮你试试了。

  回复  引用  查看    
#48楼 2008-01-08 14:37 | 容宇博通      
不错,真不错
  回复  引用  查看    
#49楼 2008-01-09 11:47 | 中华职业网 [未注册用户]
赞个~
  回复  引用  查看    
#50楼 2008-01-14 16:51 | Zhuang miao      
http://www.w3school.com.cn/tiy/t.asp?f=hdom_tablerow_innerhtml
这个貌似也不错,刚刚看见的,
  回复  引用  查看    
#51楼 2008-01-25 17:35 | webqsoft [未注册用户]
@杨正祎
是IE7
谢谢!


标题  
姓名  
主页
Email (只有博主才能看到) 
验证码 *  看不清,换一张
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2008-02-25 16:11 编辑过
 
向地震灾区捐赠爱心