canrun
测试运行HTML<html> <head><title>测试博客园HTML源码运行程序</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Language" content="zh-CN" /><script type="text/javascript">alert('哈哈，我运行咯！！！');</script> </head> <body> </body> </html>
参考肥杜的教你如何在博客园放“可运行”代码
自己定制了一个专属博客园的HTML源码运行js文件。
$(document).ready(function(){//如果带有canrun标签if($("#cnblogs_post_body p:first").html()&&$("#cnblogs_post_body p:first").html().toLowerCase().indexOf('canrun') != -1){//移除canrun标签$("#cnblogs_post_body p:first").remove();//在文章底部加入运行此段代码HTML，可以触发运行htmlvar runString = '<input type="button" value="运行此段代码" id="runHTML" />';if($(".cnblogs_code").length > 1) runString += '<input type="text" size="5px" id="hid" value="0" />Tips:0表示第一段代码，1表示第二段...';$("#cnblogs_post_body").append(runString);//为每一段源码加可运行按钮$.each($(".cnblogs_code"),function(i){$(this).before('<input type="button" class="runBtn" οnclick="doRunCnblogsHtml('+ i +');" style="cursor:pointer;" value="点此运行此段代码（'+ i +'）"/>');});}//运行此段代码点击触发事件$("#runHTML").click(function(){var hid = $("#hid").val(); //获取输入的代码段号doRunCnblogsHtml(hid); //弹窗运行相应代码段 });//首页，直接移除canrun标签var postCons = $(".postCon");for(var i=0;i<postCons.length;i++){if(postCons.eq(i).children('p:first').html()&&postCons.eq(i).children('p:first').html().toLowerCase().indexOf('canrun') != -1){postCons.eq(i).children('p:first').remove();}} }); /*** 博客园格式化HTML执行函数* @params hid 格式化代码的个数index，第一个为0，第二个为1...*/ function doRunCnblogsHtml(hid){if(parseInt(hid) != hid) hid = 0; //数值型检测$(".cnblogs_code").eq(hid).click(); //点击“+”以查看解析前的HTML源码$(".cnblogs_code").eq(hid).find(".cnblogs_code_copy").find("a").eq(0).click(); //点击复制按钮以得到解析后的HTML源码openWin($(".cnblogs_code").eq(hid).find('textarea').eq(0).val()); //将解析后的HTML源码在新窗口运行 } /*** 新窗口执行HTML函数* @params content 新窗口内容*/ function openWin(content){var newwin = window.open('', "_blank", ''); //为了简便，这里不设参数newwin.document.open('text/html', 'replace');newwin.opener = null;newwin.document.write(content); //将内容写入新窗口 newwin.document.close(); }
//修复3个以上html源出错问题。
$(".cnblogs_code_copy a").eq(hid).click();
改为：$(".cnblogs_code").find(".cnblogs_code_copy").find("a").eq(0).click();
//新增功能：为每一个格式化源码增加直接运行按钮οnclick="doRunCnblogsHtml(i);"，并标明代码段号。另，加入了注释说明。
本段js分析了博客园的HTML源码结构及源码获取方式而得，主要原理是：
博客园每段HTML代码都有cnblogs_code类，点击之后源码会处打开状态，再点击其下的“复制”按钮则会将源码放置
到一个textarea上，此时我们便可以调用textarea的内容，使用新窗口打开源码，此时HTML源码将在新窗口中运行。
另外，本快捷运行有个条件，那就是可运行源码的博文开头需加上canrun字段，然后换行。如下图（本文开头截图）：
js文件已经考虑了博客园首页及文章页的情况，博客园首页将执行去除canrun字段处理，不生成可运行按钮。
运用方法，在博客园设置-页首Html代码中加入：
<script type="text/javascript" src="http://files.cnblogs.com/Zjmainstay/ZjmainstayRunHTML.js"></script>
即可。
