博客园HTML源码运行特制js（原创自Zjmainstay）
canrun
測試運(yùn)行HTML<html> <head><title>測試博客園HTML源碼運(yùn)行程序</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('哈哈，我運(yùn)行咯！！！');</script> </head> <body> </body> </html>
?
參考肥杜的教你如何在博客園放“可運(yùn)行”代碼
自己定制了一個專屬博客園的HTML源碼運(yùn)行js文件。
$(document).ready(function(){//如果帶有canrun標(biāo)簽if($("#cnblogs_post_body p:first").html()&&$("#cnblogs_post_body p:first").html().toLowerCase().indexOf('canrun') != -1){//移除canrun標(biāo)簽$("#cnblogs_post_body p:first").remove();//在文章底部加入運(yùn)行此段代碼HTML，可以觸發(fā)運(yùn)行htmlvar runString = '<input type="button" value="運(yùn)行此段代碼" 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);//為每一段源碼加可運(yùn)行按鈕$.each($(".cnblogs_code"),function(i){$(this).before('<input type="button" class="runBtn" οnclick="doRunCnblogsHtml('+ i +');" style="cursor:pointer;" value="點(diǎn)此運(yùn)行此段代碼（'+ i +'）"/>');});}//運(yùn)行此段代碼點(diǎn)擊觸發(fā)事件$("#runHTML").click(function(){var hid = $("#hid").val(); //獲取輸入的代碼段號doRunCnblogsHtml(hid); //彈窗運(yùn)行相應(yīng)代碼段 });//首頁，直接移除canrun標(biāo)簽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執(zhí)行函數(shù)* @params hid 格式化代碼的個數(shù)index，第一個為0，第二個為1...*/ function doRunCnblogsHtml(hid){if(parseInt(hid) != hid) hid = 0; //數(shù)值型檢測$(".cnblogs_code").eq(hid).click(); //點(diǎn)擊“+”以查看解析前的HTML源碼$(".cnblogs_code").eq(hid).find(".cnblogs_code_copy").find("a").eq(0).click(); //點(diǎn)擊復(fù)制按鈕以得到解析后的HTML源碼openWin($(".cnblogs_code").eq(hid).find('textarea').eq(0).val()); //將解析后的HTML源碼在新窗口運(yùn)行 } /*** 新窗口執(zhí)行HTML函數(shù)* @params content 新窗口內(nèi)容*/ function openWin(content){var newwin = window.open('', "_blank", ''); //為了簡便，這里不設(shè)參數(shù)newwin.document.open('text/html', 'replace');newwin.opener = null;newwin.document.write(content); //將內(nèi)容寫入新窗口 newwin.document.close(); }ZjmainstayRunHTML.js
//修復(fù)3個以上html源出錯問題。
$(".cnblogs_code_copy a").eq(hid).click();
改為：$(".cnblogs_code").find(".cnblogs_code_copy").find("a").eq(0).click();
//新增功能：為每一個格式化源碼增加直接運(yùn)行按鈕οnclick="doRunCnblogsHtml(i);"，并標(biāo)明代碼段號。另，加入了注釋說明。
本段js分析了博客園的HTML源碼結(jié)構(gòu)及源碼獲取方式而得，主要原理是：
博客園每段HTML代碼都有cnblogs_code類，點(diǎn)擊之后源碼會處打開狀態(tài)，再點(diǎn)擊其下的“復(fù)制”按鈕則會將源碼放置
到一個textarea上，此時我們便可以調(diào)用textarea的內(nèi)容，使用新窗口打開源碼，此時HTML源碼將在新窗口中運(yùn)行。
另外，本快捷運(yùn)行有個條件，那就是可運(yùn)行源碼的博文開頭需加上canrun字段，然后換行。如下圖（本文開頭截圖）：
js文件已經(jīng)考慮了博客園首頁及文章頁的情況，博客園首頁將執(zhí)行去除canrun字段處理，不生成可運(yùn)行按鈕。
運(yùn)用方法，在博客園設(shè)置-頁首Html代碼中加入：
<script type="text/javascript" src="http://files.cnblogs.com/Zjmainstay/ZjmainstayRunHTML.js"></script>
即可。
轉(zhuǎn)載于:https://www.cnblogs.com/Zjmainstay/archive/2012/07/15/cnblogs_runHTML.html
總結(jié)
以上是生活随笔為你收集整理的博客园HTML源码运行特制js（原创自Zjmainstay）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 走吧走吧千山万水路还远是什么歌啊
- 下一篇： Spring整合CXF，发布RSETfu