[转]教你如何在博客园放“可运行代码

本文转自：http://www.cnblogs.com/littledu/archive/2011/05/08/2040298.html

教你如何在博客园放“可运行"代码

自从看到别人的博客可以放上面那种可运行的代码后，我一直在研究这种效果是怎么弄出来的，我知道蓝色理想上面可以在编辑器里直接将代码放进一个可运行的代码框，发布后就是可运行的了。但博客园的默认的三个编辑器里，死活找不到那可运行的按钮。直到昨天，在群里某高手提示说可以自己写一个，然后他给我说了思路，并提供了一个demo，就是在页面嵌入一个textarea，然后单击运行代码时，将textarea里的所有内容在新open的页面里执行，就行了。我在本地测试，实践结果是可行的，但一放上博客园这里，<script>总给过滤掉了，实在是郁闷得很。无奈，昨天又以失败告终。

今天，就在刚刚，我又在某群发问了，另一高手回答了我的问题，我才知道，怎样才能让script不被过滤。下面，是步骤：

1.首先，准备一个textarea，这个文本框里放上我们所要执行的代码，可以是任意代码，比如一个标准的html页，也可以像我下面一样，直接放上一段js代码，如下：

1	`<textarea cols="20"` `rows="8"` `id="con">`

<script type="text/javascript">

alert("你知道我是怎么弹出的吗？");

</script>

1 2	`</textarea>` `<input value="运行代码"` `type="button"` `id="btn"` `/>`

要运行的代码准备好了，但我们并不能直接将他放在页面，请看下一步骤：

2.单击如图所示红圈中的HTML按钮：

，在弹出的对话框里将第一步骤里准备的代码放到所要放的位置上。（注：如果放上去后更新后，发现文本框里的<script>并不能正常显示，如多了个&mce：码或者其他什么的，请重新单击HTML，将多余转码删除。）

基本条件已具备，现在就需要一个JS来获取这个文本框里的内容，并open一个新页，将这些内容放在新页里执行了。这，是关键内容。请看第3步：

3.准备一个js文件，js文件里放上以下代码:

window.onload = function(){

var btn = document.getElementById("btn");

var con = document.getElementById("con");

btn.onclick = function(){

var sun = window.open("");

sun.document.write(con.value);

}

这代码是跟上面的textarea对应的，如果修改了textarea或button的id，则这里也要修改，并不是通用的呵呵，只是我写的粗糙的测试代码。

代码准备好后，保存为一个js文件，我这里保存为littledu.js。接着，我们要将这文件上传到博客园上，将在页面引用它。请看第4步：

4.单击博客首页的“管理”，进入管理页面，在管理页面里单击“文件”选项卡，进入，并上传littledu.js文件，上传完毕后单击该文件，复制地址栏的地址，此为该js文件的地址。如，我的littledu.js文件地址为:http://files.cnblogs.com/littledu/littledu.js。接着，最关键的一步来了，请看第5步:

5.按照第4步的步骤，进入管理页面，但这次，我们要进入“设置”选项卡，在设置选项卡下的“页首html代码”框里，放上我们的js文件地址，如图:

到这里，就已经完成了。发布后，单击运行代码，效果出来啦！！！

整个世界是如此的美好，阿门。

/*****************************华丽的分隔线********2011-5-10日修改****************************/

粗糙的代码就是不行，今天放代码时遇到这样一个问题，在ff和ie里，运行的页面需要刷新一次才能正常运行，而chrome里干脆只执行了html和css，对js是完全忽略掉了。很是奇怪，但别人的不管在什么浏览器都正确运行啊，没理由是我的浏览器问题。

最后，想到会不会是我的littledu.js里的代码不够好，为了测试是不是这样的，我专门去firebug了某高手的博客，提取到了他的open代码，替换掉我上面的粗糙代码，还真的是，所以浏览器都正常了，唉！！！！！！！！！

下面是新的littledu.js代码

window.onload = function(){

var btn = document.getElementById("btn");

var con = document.getElementById("con");

btn.onclick = function(){

var newwin = window.open('', "_blank", '');

newwin.document.open('text/html', 'replace');

newwin.opener = null;

newwin.document.write(con.value);

newwin.document.close();

}

也可以直接通过http://files.cnblogs.com/littledu/littledu.js这里下载。

转载于:https://www.cnblogs.com/freeliver54/p/3956750.html

[转]教你如何在博客园放“可运行代码相关推荐

改进博客园Markdown显示功能(加代码行号、显示代码所用编程语言)
博客园的markdown模式下的代码高亮功能使用的是highlight.js,没有行号和显示相应编程语言的功能,只好自己将其改造了一下(将这两种功能一并实现了)~ 先看一下效果,再详细介绍方法~ 查看 ...
博客园页面定制html代码,博客园代码定制
博客园代码定制版本:2019-08-11 本文基于Simple Memory模板,且已获取CSS和JS权限,此版本并非最终版本. 如有错误请指出,代码开源可以修改完善,仅用于学习交流,转载时请注明出 ...
博客园页首html代码,可爱的博客园样式美化、自定义博客园主题样式
cute-cnblogs 说明 "我经常有那种感觉,如果这个事情来了,你却没有勇敢地去解决掉,它一定会再来.生活真是这样,它会一次次地让你去做这个功课直到你学会为止." -- &l ...
博客园页面定制html代码,博客园主题分享
博客园主题分享选择Custom主题页面定制CSS代码 /*评论框祖传猫猫*/ .comment_textarea{ background:#f5f5f5 url(https://files-cd ...
博客园页面定制html代码,可爱的博客园样式美化、自定义博客园主题样式
cute-cnblogs 说明 "我经常有那种感觉,如果这个事情来了,你却没有勇敢地去解决掉,它一定会再来.生活真是这样,它会一次次地让你去做这个功课直到你学会为止." -- &l ...
博客园页面定制html代码,你要的博客园主题都有！！！
基于最近很多小伙伴加我微信想要我的博客园主题,那我就把博客园主题整理一下,送给喜欢的小伙伴,园友们喜欢可以收藏,关注,博客园主题仅供参考,博主顺便再多说一句,虽然我可以分享给你们,但是我更愿意你们加我 ...
博客园页面定制CSS代码
更新时间:2019-02-18 花了一点时间修改自己的博客背景设置,现在分享一下代码.希望对大家有帮助.我的比较简单,主要代码模板来源于另外一个博主,然后我在基础上进行了部分修改.原博主的连接:htt ...
博客园背景设置CSS代码
/配色参考->>->>>//https://zh.spycolor.com/color-index,a*/ #home { margin: 0 auto; width: ...
WordPress博客里面放谷歌广告代码
申请谷歌广告很久了,但一直都没怎么管理,也没有啥收入,今天想放一个google adsense广告代码在文章单页的右上角,由于不太懂代码,自己搞了半天,最后还是按照网上说的方法才放上来. 这里是分享的 ...
2013年微软编程之美大赛初赛第二题（博客园居然可以插入代码！！）
描述对于两个长度相等的字符串,我们定义其距离为对应位置不同的字符数量,同时我们认为距离越近的字符串越相似.例如,"0123"和"0000"的距离为 3,&qu ...

[转]教你如何在博客园放“可运行代码

[转]教你如何在博客园放“可运行代码相关推荐

最新文章

热门文章