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，可以觸發運行html var 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" onclick="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();
//新增功能：為每一個格式化源碼增加直接運行按鈕onclick="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>
即可。