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

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

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

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

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

1
<script type="text/javascript">

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

3
</script>

1
</textarea>

2
<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文件地址为:https://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代码

01
window.onload = function(){

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

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

04
    btn.onclick = function(){

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

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

07
        newwin.opener = null;

08
        newwin.document.write(con.value);

09
        newwin.document.close();

10
    }

11
}

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

完