在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 相关文章推荐
javascript 打开页面window.location和window.open的区别
Mar 17 Javascript
jquery下jstree简单应用 - v1.0
Apr 14 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
Dec 20 Javascript
div模拟选择框示例代码
Nov 03 Javascript
javascript创建和存储cookie示例
Jan 07 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
详解 javascript中offsetleft属性的用法
Nov 11 Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
详解基于Wepy开发小程序插件(推荐)
Aug 01 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
DIY实用性框形天线
2021/03/02 无线电
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
php中session退出登陆问题
2014/02/27 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
JS 建立对象的方法
2007/04/21 Javascript
js检验密码强度(低中高)附图
2014/06/05 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
浅谈javascript构造函数与实例化对象
2015/06/22 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
一文了解Vue中的nextTick
2019/05/06 Javascript
微信小程序实现点击页面出现文字
2020/09/21 Javascript
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
使用基于Python的Tornado框架的HTTP客户端的教程
2015/04/24 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
Matlab使用Plot函数实现数据动态显示方法总结
2021/02/25 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
巴西手表购物网站:eclock
2019/03/19 全球购物
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
初中生学习的自我评价
2013/11/14 职场文书
爱情保证书范文
2014/02/01 职场文书
上班打牌检讨书
2014/02/07 职场文书
护士个人自我鉴定
2014/03/24 职场文书
文明好少年事迹材料
2014/08/19 职场文书
党课心得体会范文
2014/09/09 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
实习班主任自我评价
2015/03/11 职场文书
初中班干部工作总结
2015/08/10 职场文书
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js
Win11运行cmd提示“请求的操作需要提升”的两种解决方法
2022/07/07 数码科技