在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 相关文章推荐
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 Javascript
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
JS 非图片动态loading效果实现代码
Apr 09 Javascript
javascript日期格式化示例分享
Mar 05 Javascript
node.js中的fs.appendFileSync方法使用说明
Dec 17 Javascript
javascript日期操作详解(脚本之家整理)
Sep 05 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
Jquery操作cookie记住用户名
Mar 29 Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
在Uni中使用Vue的EventBus总线机制操作
Jul 31 Javascript
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
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
PHPMyadmin 配置文件详解(配置)
2009/12/03 PHP
smarty模板引擎之分配数据类型
2015/03/30 PHP
PHP ADODB实现分页功能简单示例
2018/05/25 PHP
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
javascript中的深复制详解及实例分析
2016/12/29 Javascript
js放大镜放大购物图片效果
2017/01/18 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
解决vue页面刷新或者后退参数丢失的问题
2018/03/13 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
详解JQuery基础动画操作
2019/04/12 jQuery
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
浅谈vue权限管理实现及流程
2020/04/23 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
在Python中使用NLTK库实现对词干的提取的教程
2015/04/08 Python
Django中Model的使用方法教程
2018/03/07 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
门卫岗位安全职责
2013/12/13 职场文书
经济管理专业毕业生自荐信范文
2014/01/02 职场文书
小学生作文评语大全
2014/04/21 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
基层党建工作汇报材料
2014/08/15 职场文书
2014年祖国生日寄语
2014/09/19 职场文书
防震减灾主题班会
2015/08/14 职场文书
2016全国“质量月”活动标语口号
2015/12/26 职场文书
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android