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

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

　　
　　完整实例源码下载
　　
　　点击下载图标下载
　　
　　
　　
　　Tag标签:JavaScript execCommand,execcommand,js execcommand,execcommand 参数,firefox execCommand
　　posted on 2008-01-04 17:03 杨正祎阅读(804) 评论(17) 编辑 收藏
　　
　　
　　评论:
　　#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错，我也该定一个。
　　回复 引用 查看
　　刷新评论列表
　　标题
　　姓名
　　主页
　　Email (只有博主才能看到)邮件地址无效
　　请输入验证码 验证码 *
　　
　　
　　内容(请不要发表任何与政治相关的内容) 请输入评论内容
　　
　　Remember Me?
　　登录 使用高级评论 新用户注册 返回页首 恢复上次提交
　　[使用Ctrl+Enter键可以直接提交]
　　该文被作者在 2008-01-04 21:56 编辑过
　　
　　博客园首页 小组 博问 闪存 新闻频道 招聘频道 专题
　　

本文转自
http://www.cnblogs.com/JustinYoung/archive/2008/01/04/run-code-for-test.html