Tips:点此可运行HTML源码

博客园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，可以触发运行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();
}
ZjmainstayRunHTML.js

//修复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="https://files.cnblogs.com/Zjmainstay/ZjmainstayRunHTML.js"></script>

即可。

posted @ 2012-07-15 12:24  Zjmainstay  阅读(2818)  评论(2)  编辑  收藏  举报