在Z-Blog中运行代码[html][/html](纯JS版)


Posted in Javascript onMarch 25, 2007

昨天的《利用th,colgroup,col定义表格样式》中,细心点的朋友会发现加了一个“运行代码”的链接:直接点击可以运行Textarea中的内容。其实本身蓝色理想、51JS上也有相关介绍,Z-Blog官方论坛上也有类似帖子,因为自己不太喜欢改asp的内容(将来升级省得替换),所以偷了个小懒,做了一个纯JS版本的。
是否兼容FireFox,还没来得及测试。自己觉得“另存为”和“复制”功能也比较多余,这里也省略掉了。如果需要Fix 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,就有多少个“运行代码”功能,够简单吧?
Javascript 相关文章推荐
JS.elementGetStyle(element, style)应用示例
Sep 24 Javascript
JS实现鼠标单击与双击事件共存
Mar 08 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
Angular2使用vscode断点调试ts文件的方法
Dec 13 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
Jan 22 Javascript
详解使用React制作一个模态框
Mar 14 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 Javascript
Vue仿微信app页面跳转动画效果
Aug 21 Javascript
npm 语义版本控制详解
Sep 10 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
Feb 13 Javascript
JavaScript构造函数原理及实现流程解析
Nov 19 Javascript
JS+CSS实现动态时钟
Feb 19 Javascript
JavaScript判断两种格式的输入日期的正确性的代码
Mar 25 #Javascript
表单(FORM)的一些实用效果代码
Mar 25 #Javascript
推荐dojo学习笔记
Mar 24 #Javascript
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
Mar 24 #Javascript
tbody元素支持嵌套的注意方法
Mar 24 #Javascript
xml 与javascript结合的问题解决方法
Mar 24 #Javascript
用prototype实现的简单小巧的多级联动菜单
Mar 24 #Javascript
You might like
php 获取mysql数据库信息代码
2009/03/12 PHP
php ios推送(代码)
2013/07/01 PHP
PHP小技巧之函数重载
2014/06/02 PHP
php使用GD库创建图片缩略图的方法
2015/06/10 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
PHP 中使用ajax时一些常见错误总结整理
2017/02/27 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
AngularJS内置指令
2015/02/04 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
简单封装js的dom查询实例代码
2016/07/08 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
ElementUI radio组件选中小改造
2019/08/12 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
python 类详解及简单实例
2017/03/24 Python
python实现三维拟合的方法
2018/12/29 Python
python调用opencv实现猫脸检测功能
2019/01/15 Python
把vgg-face.mat权重迁移到pytorch模型示例
2019/12/27 Python
python中如何进行连乘计算
2020/05/28 Python
python3判断IP地址的方法
2021/03/04 Python
岗位竞聘演讲稿
2014/01/10 职场文书
小学数学教学反思
2014/02/02 职场文书
会计毕业生自荐书
2014/06/12 职场文书
教师听课评语大全
2014/12/31 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
PyQt5实现多张图片显示并滚动
2021/06/11 Python
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis
Win11怎么修改电源模式?Win11修改电源模式的方法
2022/04/05 数码科技
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript