在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 相关文章推荐
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 Javascript
jQuery之尺寸调整组件的深入解析
Jun 19 Javascript
jQuery设置div一直在页面顶部显示的方法
Oct 24 Javascript
JS实现自动定时切换的简洁网页选项卡效果
Oct 13 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
Aug 24 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
vue 中的keep-alive实例代码
Jul 20 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
简单了解JavaScript中常见的反模式
Jun 21 Javascript
js实现html滑动图片拼图验证
Jun 24 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
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
PHP的消息通信机制测试实例
2016/11/10 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
JSON JQUERY模板实现说明
2010/07/03 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
2012/04/12 Javascript
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
2014/01/26 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
2018/04/28 jQuery
微信小程序自定义tabBar组件开发详解
2020/09/24 Javascript
JS 自执行函数原理及用法
2019/08/05 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
python之Flask实现简单登录功能的示例代码
2018/12/24 Python
pycharm 安装JPype的教程
2019/08/08 Python
Python类中的魔法方法之 __slots__原理解析
2019/08/26 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
知识竞赛拉拉队口号
2014/06/16 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
党员教师个人对照检查材料范文
2014/09/25 职场文书
体育个人工作总结
2015/02/09 职场文书
Redis IP地址的绑定的实现
2021/05/08 Redis
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis
vue postcss-px2rem 自适应布局
2022/05/15 Vue.js