添加可运行的js代码
如何在博客园的文章/随笔中添加可运行的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 = {
"<" : "<",
">" : ">",
"&" : "&",
" ": " ",
""": "\"",
"©": "©" // 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>标签,只能自己手动“转义了”,即把<换成<把>换成>并且,把所有手动转义后的代码先写在textarea中。看看我在后台是如何写的吧:

<textarea class="runcode" style="width: 90%; height: 100px;"><script type="text/javascript">alert(document.getElementsByTagName("li")[0].innerHTML);</script>
</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 = {
"<" : "<",
">" : ">",
"&" : "&",
" ": " ",
""": "\"",
"©": "©"
};
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代码的更多相关文章
- 如何在文章/随笔中添加可运行的js代码
<script type="text/javascript"> alert("你知道我是怎么弹出的吗?"); </script> 看大神 ...
- 可运行的js代码
canrun <html> <head> <title>测试博客园HTML源码运行程序</title> <meta http-equiv=&quo ...
- 表单添加缩略图及截图js代码
此为表单提交是上传截图的代码,待优化: // 添加小程序图片 function addAvatar(obj){ var file = obj.files[0]; limit($('.avatar_bo ...
- 兼容IE,Firefox,Opera等浏览器的添加到收藏夹js代码实现
function AddToFavorites() { var title = document.title; var url = location.href; if (window.sidebar) ...
- 一行js代码识别Selenium+Webdriver及其应对方案
有不少朋友在开发爬虫的过程中喜欢使用Selenium + Chromedriver,以为这样就能做到不被网站的反爬虫机制发现. 先不说淘宝这种基于用户行为的反爬虫策略,仅仅是一个普通的小网站,使用一行 ...
- javascript--给你的JS代码添加单元测试
通过测试框架为JavaScript应用添加测试,从而保证代码的高质量.这里的笔记例子应用在jaywcjlove/validator.js中. 安装 用到三个工具chai(断言工具),mocha(测试框 ...
- 网页中嵌入可以点击“运行代码”执行html/css/js代码
html代码 <textarea name="textarea" cols="60" rows="10" id="rn01& ...
- Yii2的View中JS代码添加
直接写 <script> $(function(){ alert("aaa"); }); <script> 会提示出错 是因为view中添加js代码的前面没 ...
- 原创:js代码, 让dedecms支持Tag选择, 添加内容更为方便,不用手输Tag
dedecms在编辑修改内容时,TAG标签需要手动输,中文的Tag, 中间还得用半角字符','分隔, 输入法切来切去很不方便, 于是动手改后台代码, 利用后台的tags_main.php, 让d ...
随机推荐
- 【百度地图API】如何制作班级地理通讯录?LBS通讯录
原文:[百度地图API]如何制作班级地理通讯录?LBS通讯录 摘要:班级通讯录必备的功能,比如人员列表,人员地理位置标注,展示复杂信息窗口,公交和驾车等.一般班级人员都不会超过300个,因为可以高效地 ...
- Jquery()核心函数的7个重载方法
(1) jquery() 该函数返回一个空的jQuery对象.在jQuery1.4以后的版本中,改函数返回一个空的jQuery对象.在之后的版本中,该函数会返回一个包含document节点的对象. ( ...
- ListView排序并隔色显示
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.C ...
- C控制语句--分支和跳转
/*C控制语句--分支和跳转*/ /*关键字 if else switch continue break case default goto 运算符:&&(且) ||(或) ?:(三元 ...
- A generic error occurred in GDI+. 上传图片报错
代码就不说了,因为本地测试 ok, 服务端 就不行 ,服务器 环境 阿里云 win2008 r2 64 位 原因 是我没有这是 文件加权限 : 左边 的 少了 权限~ 代码 :含义是 网络图片 裁剪 ...
- JS中5秒中跳转到其他页面
原文:JS中5秒中跳转到其他页面 <head> <meta http-equiv="Content-Type" content="text/html; ...
- centos下mysql 最新版最终成功安装!备份一下几个关键地方
我本来仅仅是为了搭建简单的LAMP环境,亲自己主动手,却发现有这么多的问题会发生.(by default7#zbphp.com) 非常多地方给的安装Mysql的提示是通过yum一键安装.shell命令 ...
- 从一道数学题弹程序员的思维:数学题,求证:(a+b%c)%c=(a+b)%c
在学校论坛看到这道题目,全忘了的感觉. 如果你是高中的,那我觉得你完全没问题.但是,在这个博客园的圈子,觉得全部人都是程(ban)序(zhuan)员(gong)相关的人员,解决这个问题有点难度,毕竟, ...
- java利用poi导出数据到excel
背景: 上一篇写到利用jtds连接数据库获取对应的数据,本篇写怎样用poi将数据到处到excel中,此程序为Application 正文: 第三方poi jar包:poi驱动包下载 代码片段: /** ...
- leetcode第20题--Valid Parentheses
Problem: Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if ...