如何在博客园的文章/随笔中添加可运行的js代码

 在博客园浏览大牛们写的文章时,经常会看到在文章中混有一些可运行示例,例如司徒正美的博客中:

带有可运行示例

可以点击“运行代码”

  经过一番小小的探索,掌握了这种写博技巧,希望大家也借鉴大牛们的写法,让我们的博客更有表现力~开始~

一、博客中带有可运行javascript示例

  很显然,作者是写了js代码在文章里面了,方法也比较简单,进入后台编辑器的源码编辑模式,在里面直接敲<script>标签,把代码放进去就可以了。同理,也可以敲<style>标签写css代码。保存后,看你的文章,已经可以有“功能”了。我之前也以为这样就OK了,挺方便的嘛!谁知过几天后再访问,发现js失效了!F12查看我的代码,<script>没有了!肯定是博客园进行过滤了。进入后台再更新一下源码,发现又可以生效了,但是过几天后就又失效了。带着疑惑我给博客园技术团队发了封邮件询问,谁知结果非常简单,请看截图:

  

  真晕!所以结论是:要想在文章中使用js代码,请先联系管理员开通权限。

二、点击“运行代码”,在新页面运行文本框中的代码

  这个就稍微有点技术含量了。我之前一直以为是博客园有什么插件提供,后来发现压根没有,这个功能得自己用代码写。基本步骤是这样的:

  ①写好HTML代码

  ②转义,放在textarea中

  ③点击“运行代码”,创建新窗口。var win = window.open();

  ④获取textarea中的代码,反转义,放到win中。win.document.write(html);

  这样就可以在新窗口中运行你的代码了。这中间需要转义和反转义HTML代码,相关的函数如下:

//转义
var REGX_HTML_ENCODE = /"|&|'|<|>|[\x00-\x20]|[\x7F-\xFF]|[\u0100-\u2700]/g;
var encodeHtml = function(s){
return (typeof s != "string") ? s :
s.replace(REGX_HTML_ENCODE,
function($0){
var c = $0.charCodeAt(0), r = ["&#"];
c = (c == 0x20) ? 0xA0 : c;
r.push(c); r.push(";");
return r.join("");
});
}; //反转义
var REGX_HTML_DECODE = /&\w+;|&#(\d+);/g;
var HTML_DECODE = {
"&lt;" : "<",
"&gt;" : ">",
"&amp;" : "&",
"&nbsp;": " ",
"&quot;": "\"",
"&copy;": "©" // Add more
};
var decodeHtml = function(s){
return (typeof s != "string") ? s :
s.replace(REGX_HTML_DECODE,
function($0,$1){
var c = HTML_DECODE[$0]; // 尝试查表
if(c === undefined){
// Maybe is Entity Number
if(!isNaN($1)){
c = String.fromCharCode(($1 == 160) ? 32 : $1);
}else{
// Not Entity Number
c = $0;
}
}
return c;
});
};

  需要的东西就这些了,来试一下:

  怎么样?是不是感觉瞬间高端洋气了呢~看着虽简单,这可是我鼓捣了半天那个编辑器才试成功的,这里不得不吐槽一下博客园的编辑器,太不好用了!而且还有一个重要问题:<script>标签无法被转义,如果代码中含有<script>,转义的时候总是出错,猜测是博客园对script进行的特殊处理。所以,若代码中含有<script>标签,只能自己手动“转义了”,即把<换成&lt;把>换成&gt;并且,把所有手动转义后的代码先写在textarea中。看看我在后台是如何写的吧:

<textarea class="runcode" style="width: 90%; height: 100px;">&lt;script type="text/javascript"&gt;alert(document.getElementsByTagName("li")[0].innerHTML);&lt;/script&gt;
</textarea>
<script type="text/javascript">
var REGX_HTML_ENCODE = /"|&|'|<|>|[\x00-\x20]|[\x7F-\xFF]|[\u0100-\u2700]/g;
var encodeHtml = function(s){
return (typeof s != "string") ? s :
s.replace(REGX_HTML_ENCODE,
function($0){
var c = $0.charCodeAt(0), r = ["&#"];
c = (c == 0x20) ? 0xA0 : c;
r.push(c); r.push(";");
return r.join("");
});
};
var REGX_HTML_DECODE = /&\w+;|&#(\d+);/g;
var HTML_DECODE = {
"&lt;" : "<",
"&gt;" : ">",
"&amp;" : "&",
"&nbsp;": " ",
"&quot;": "\"",
"&copy;": "©"
};
var decodeHtml = function(s){
return (typeof s != "string") ? s :
s.replace(REGX_HTML_DECODE,
function($0,$1){
var c = HTML_DECODE[$0]; // 尝试查表
if(c === undefined){
// Maybe is Entity Number
if(!isNaN($1)){
c = String.fromCharCode(($1 == 160) ? 32 : $1);
}else{
// Not Entity Number
c = $0;
}
}
return c;
});
};
var html = encodeHtml('<ol><li>测试的内容</li><li>测试的内容</li><li>测试的内容</li><li>测试的内容</li></ol>');
$('.runcode').prepend(html);
function runcode(){ var win = window.open(); win.document.write(decodeHtml($('.runcode').html())); }
</script>

  没有想到别的办法,目前只能这么处理了。若大家有好的方法,欢迎告知哦~

  好了,就这些内容了,小伙伴们,快来试试吧~

添加可运行的js代码的更多相关文章

  1. 如何在文章/随笔中添加可运行的js代码

    <script type="text/javascript"> alert("你知道我是怎么弹出的吗?"); </script> 看大神 ...

  2. 可运行的js代码

    canrun <html> <head> <title>测试博客园HTML源码运行程序</title> <meta http-equiv=&quo ...

  3. 表单添加缩略图及截图js代码

    此为表单提交是上传截图的代码,待优化: // 添加小程序图片 function addAvatar(obj){ var file = obj.files[0]; limit($('.avatar_bo ...

  4. 兼容IE,Firefox,Opera等浏览器的添加到收藏夹js代码实现

    function AddToFavorites() { var title = document.title; var url = location.href; if (window.sidebar) ...

  5. 一行js代码识别Selenium+Webdriver及其应对方案

    有不少朋友在开发爬虫的过程中喜欢使用Selenium + Chromedriver,以为这样就能做到不被网站的反爬虫机制发现. 先不说淘宝这种基于用户行为的反爬虫策略,仅仅是一个普通的小网站,使用一行 ...

  6. javascript--给你的JS代码添加单元测试

    通过测试框架为JavaScript应用添加测试,从而保证代码的高质量.这里的笔记例子应用在jaywcjlove/validator.js中. 安装 用到三个工具chai(断言工具),mocha(测试框 ...

  7. 网页中嵌入可以点击“运行代码”执行html/css/js代码

    html代码 <textarea name="textarea" cols="60" rows="10" id="rn01& ...

  8. Yii2的View中JS代码添加

    直接写 <script> $(function(){ alert("aaa"); }); <script> 会提示出错 是因为view中添加js代码的前面没 ...

  9. 原创:js代码, 让dedecms支持Tag选择, 添加内容更为方便,不用手输Tag

    dedecms在编辑修改内容时,TAG标签需要手动输,中文的Tag, 中间还得用半角字符','分隔,  输入法切来切去很不方便,   于是动手改后台代码, 利用后台的tags_main.php, 让d ...

随机推荐

  1. 【百度地图API】如何制作班级地理通讯录?LBS通讯录

    原文:[百度地图API]如何制作班级地理通讯录?LBS通讯录 摘要:班级通讯录必备的功能,比如人员列表,人员地理位置标注,展示复杂信息窗口,公交和驾车等.一般班级人员都不会超过300个,因为可以高效地 ...

  2. Jquery()核心函数的7个重载方法

    (1) jquery() 该函数返回一个空的jQuery对象.在jQuery1.4以后的版本中,改函数返回一个空的jQuery对象.在之后的版本中,该函数会返回一个包含document节点的对象. ( ...

  3. ListView排序并隔色显示

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.C ...

  4. C控制语句--分支和跳转

    /*C控制语句--分支和跳转*/ /*关键字 if else switch continue break case default goto 运算符:&&(且) ||(或) ?:(三元 ...

  5. A generic error occurred in GDI+. 上传图片报错

    代码就不说了,因为本地测试 ok, 服务端 就不行 ,服务器 环境 阿里云 win2008 r2  64 位 原因 是我没有这是 文件加权限 : 左边 的 少了 权限~ 代码 :含义是 网络图片 裁剪 ...

  6. JS中5秒中跳转到其他页面

    原文:JS中5秒中跳转到其他页面 <head> <meta http-equiv="Content-Type" content="text/html; ...

  7. centos下mysql 最新版最终成功安装!备份一下几个关键地方

    我本来仅仅是为了搭建简单的LAMP环境,亲自己主动手,却发现有这么多的问题会发生.(by default7#zbphp.com) 非常多地方给的安装Mysql的提示是通过yum一键安装.shell命令 ...

  8. 从一道数学题弹程序员的思维:数学题,求证:(a+b%c)%c=(a+b)%c

    在学校论坛看到这道题目,全忘了的感觉. 如果你是高中的,那我觉得你完全没问题.但是,在这个博客园的圈子,觉得全部人都是程(ban)序(zhuan)员(gong)相关的人员,解决这个问题有点难度,毕竟, ...

  9. java利用poi导出数据到excel

    背景: 上一篇写到利用jtds连接数据库获取对应的数据,本篇写怎样用poi将数据到处到excel中,此程序为Application 正文: 第三方poi jar包:poi驱动包下载 代码片段: /** ...

  10. leetcode第20题--Valid Parentheses

    Problem: Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if ...