在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的输入框在光标位置插入内容, 并选中
Oct 29 Javascript
判断某个字符在一个字符串中是否存在的js代码
Feb 28 Javascript
js中数组排序sort方法的原理分析
Nov 20 Javascript
XML文件转化成NSData对象的方法
Aug 12 Javascript
js实现的奥运倒计时时钟效果代码
Dec 09 Javascript
jQuery简单实现MD5加密的方法
Mar 03 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
js实现一个简单的MVVM框架示例
Jan 15 Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
利用d3.js力导布局绘制资源拓扑图实例教程
Jan 08 Javascript
Angular2实现的秒表及改良版示例
May 10 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
Feb 10 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
Terran建筑一览
2020/03/14 星际争霸
php不用正则采集速度探究总结
2008/03/24 PHP
Drupal7中常用的数据库操作实例
2014/03/02 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
ThinkPHP5.1的权限控制怎么写?分享一个AUTH权限控制
2021/03/09 PHP
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
2011/03/01 Javascript
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
iframe父页面获取子页面参数的方法
2014/02/21 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
jquery图片轮播特效代码分享
2020/04/20 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
2016/09/28 Javascript
浅谈JS中String()与 .toString()的区别
2016/10/20 Javascript
jQuery实现背景滑动菜单
2016/12/02 Javascript
基于JavaScript实现的顺序查找算法示例
2017/04/14 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
JavaScript原型对象原理与应用分析
2018/12/27 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
Python爬取APP下载链接的实现方法
2016/09/30 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
python之PyQt按钮右键菜单功能的实现代码
2019/08/17 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
献爱心标语
2014/06/21 职场文书
雷锋之歌观后感
2015/06/10 职场文书
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL
python中的getter与setter你了解吗
2022/03/24 Python
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏