當前位置：首頁 >

博客园HTML源码运行特制js（原创自Zjmainstay）

發布時間：2023/11/27 29 豆豆

生活随笔收集整理的這篇文章主要介紹了博客园HTML源码运行特制js（原创自Zjmainstay）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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();
}

ZjmainstayRunHTML.js

//修復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代碼中加入：

即可。

轉載于:https://www.cnblogs.com/Zjmainstay/archive/2012/07/15/cnblogs_runHTML.html

總結

以上是生活随笔為你收集整理的博客园HTML源码运行特制js（原创自Zjmainstay）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。