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 @   Zjmainstay  阅读(2826)  评论(2)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示
AI IDE Trae