Z-Blog纯JS实现代码运行功能

Z-Blog纯JS实现代码运行功能

在之前的《利用th,colgroup,col定义表格样式》一文中，细心的读者可能注意到添加了一个“运行代码”链接：点击即可直接执行Textarea中的内容。虽然蓝色理想、51JS等网站也有类似介绍，Z-Blog官方论坛也有相关帖子，但由于我不喜欢修改ASP文件（为了后续升级方便，避免替换麻烦），因此偷懒制作了一个纯JS版本。

该方案是否兼容FireFox，我尚未进行测试。个人觉得“另存为”和“复制”功能略显多余，因此在此省略。如果需要修复Bug或获取技术支持，欢迎留言^_^ 具体代码如下：

function RunCode() {
var ele = document.getElementsByTagName("textarea");
for (var i=0; i<ele.length; i++) {
with (ele[i]) {
if (className != "code") continue;
var o = document.createElement("p");
var a = document.createElement("a");
var em = document.createElement("em");
o.className = "runCode";
a.href = "javascript:;";
a.innerHTML = "运行代码";
a.onclick = function() {
var win = window.open('', "_blank", '');
win.document.open('text/html', 'replace');
win.document.writeln(this.parentNode.previousSibling.value.replace(/\u00a0/gi, " "));
win.document.close();
      }  
em.innerHTML = "（提示：您可以先修改部分代码再运行）";
o.appendChild(a);
o.appendChild(em);
insertAdjacentElement("afterEnd",o);
    }  
  }  
} 

目前“运行代码”功能是放在Textarea下方的，如果想放在上方，改动以下代码即可。

insertAdjacentElement("afterEnd",o);

this.parentNode.previousSibling.value

其中的replace(/\u00a0/gi, " ")主要是为了将被c_function.asp文件替换的空格（ ）和Tab（  ）还原回来。使用方面当然是在所需页面onload进来即可，有多少个className为code的Textarea，就有多少个“运行代码”功能，够简单吧？