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

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

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

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

<textarea cols="" rows="" id="con">
<script type="text/javascript">
      alert("你知道我是怎么弹出的吗？");
</script>
</textarea>
<input value="运行代码" type="button" id="btn" />

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

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

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

      .准备一个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。接着，咱们要将这文件上传到博客园上，将在页面引用它。请看第步：

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

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

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

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

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

粗糙的代码就是不行，今天放代码时遇到这样一个问题，在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();
    }
}