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代码中加入：

<script type="text/javascript" src="http://files.cnblogs.com/Zjmainstay/ZjmainstayRunHTML.js"></script>

即可。

转载于:https://www.cnblogs.com/Zjmainstay/archive/2012/07/15/cnblogs_runHTML.html

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

  1. nanotime java 博客园_JVM源码分析之System.currentTimeMillis及nanoTime原理详解

    JDK7和JDK8下的System.nanoTime()输出完全不一样,而且差距还非常大,是不是两个版本里的实现不一样,之前我也没注意过这个细节,觉得非常奇怪,于是自己也在本地mac机器上马上测试了一 ...

  2. java毕业设计个人博客系统mybatis+源码+调试部署+系统+数据库+lw

    java毕业设计个人博客系统mybatis+源码+调试部署+系统+数据库+lw java毕业设计个人博客系统mybatis+源码+调试部署+系统+数据库+lw 本源码技术栈: 项目架构:B/S架构 开 ...

  3. 计算机毕业设计Java抑郁症患者博客交流平台(系统+源码+mysql数据库+Lw文档）

    计算机毕业设计Java抑郁症患者博客交流平台(系统+源码+mysql数据库+Lw文档) 计算机毕业设计Java抑郁症患者博客交流平台(系统+源码+mysql数据库+Lw文档) 本源码技术栈: 项目架构 ...

  4. JAVA计算机毕业设计抑郁症患者博客交流平台Mybatis+源码+数据库+lw文档+系统+调试部署

    JAVA计算机毕业设计抑郁症患者博客交流平台Mybatis+源码+数据库+lw文档+系统+调试部署 JAVA计算机毕业设计抑郁症患者博客交流平台Mybatis+源码+数据库+lw文档+系统+调试部署 ...

  5. 最新基于ThinkPHP5.0+BootStrap框架开发的自适应WAP手机端响应式界面博客系统PHP源码

    <h2>源码介绍</h2> 分享一款基于ThinkPHP5.0框架开发的自适应WAP手机端响应式界面博客系统PHP源码,前端界面采用BootStrap框架设计,使得博客系统界面 ...

  6. 简单开源java ssm_[VIP源码]【S006】SSM(Spring+Spring MVC+Mybatis) java开源博客管理系统项目源码...

    java源码项目名称:SSM(Spring+Spring MVC+Mybatis) java开源博客管理系统项目源码  java项目源码 1 ?, R, _* q  n8 v) S$ R7 ?百度网盘 ...

  7. pbootcms黑色风格响应式新闻资讯博客整站源码

    演示 (自适应手机版)响应式新闻资讯技术博客织梦模板 游戏新闻网站源码下载51138.cn 更适合新手上传即用可改mysql数据库语言程序:PHP 5.2+ SQLite前端规范:html+css+j ...

  8. java毕业生设计抑郁症患者博客交流平台计算机源码+系统+mysql+调试部署+lw

    java毕业生设计抑郁症患者博客交流平台计算机源码+系统+mysql+调试部署+lw java毕业生设计抑郁症患者博客交流平台计算机源码+系统+mysql+调试部署+lw 本源码技术栈: 项目架构:B ...

  9. 简洁大气好看的个人博客模板HTML源码

    介绍: 简洁大气好看的个人博客模板HTML源码 网盘下载地址: http://kekewangLuo.net/QS8TH7AM63w0 图片:

最新文章

  1. 计算机视觉 | 图像描述与注意力机制
  2. mysql5.7.22并行回放_MySQL 5.7并行复制时代
  3. 命名规范(1)大小写约定
  4. C#下载文件(可显示进度)的方法实现
  5. Php的定界符有哪些了,php中定界符
  6. 视觉SLAM笔记（28） Ceres
  7. MTK modem 通话无声
  8. 智能交通|智慧产业园区管理系统集成搭建
  9. 高可用MySQL：构建健壮的数据中心
  10. mysql学习一 常用语句
  11. 适合Java零基础学习的视频教程资源合集（小白入门到项目实战）
  12. Keil开发环境安装教程
  13. linux+极点五笔输入法,Linux技巧之Ubuntu11.04下安装极点五笔输入法
  14. 【千峰网安学习】利用PE破解系统密码
  15. 在matlab中如何求偏导数,求解 PDE 并计算偏导数
  16. 大数据之初识Doris
  17. win10远程桌面_怎么选择Win10系统版本？家庭版与专业版的对比介绍
  18. 【CRC笔记】CRC-16 KERMIT C语言实现
  19. 如何进行git ssh文件的配置
  20. java基础 面试题

热门文章

  1. html5调用系统声音1s响一次_HTML5声音录制/播放功能的实现代码
  2. 中国对计算机科学与技术人才的需求,计算机科学与技术整体概况之人才需求分析_跨考网...
  3. php sql中regexp,[NCTF2019]SQLi(regexp注入)
  4. php asort,PHP asort()：对数组排序（升序），并保持索引关系
  5. 【点云重采样Resampling】Python-pcl 基于多项式平滑点云及法线估计的曲面重建
  6. PCL基础3：点云程序运行时间计时
  7. C语言：十六进制(HEX)和浮点类型(float、double)转换
  8. （2017年11月）天池医疗AI大赛肺部结节智能诊断在线分享
  9. 数据结构与算法（7-4）最短路径（迪杰斯特拉(Dijkstra)算法、弗洛伊德(Floyd)算法）
  10. 计算机网络管理的常用命令,网络管理常用命令图文详解.pdf