在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 EasyUI NumberBox(数字框)的用法
Jul 08 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
Oct 25 Javascript
checkbox选中与未选中判断示例
Aug 04 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
Jun 23 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
Jun 26 Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
angular实现表单验证及提交功能
Feb 01 Javascript
微信小程序实战之自定义toast(6)
Apr 18 Javascript
redux-saga 初识和使用
Mar 10 Javascript
react-navigation之动态修改title的内容
Sep 26 Javascript
vue el-table实现行内编辑功能
Dec 11 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 is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
php、mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳)
2017/02/04 PHP
php实现的双色球算法示例
2017/06/20 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
jquery判断单个复选框是否被选中的代码
2009/09/03 Javascript
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
python避免死锁方法实例分析
2015/06/04 Python
django实现前后台交互实例
2017/08/07 Python
python实现名片管理系统
2018/11/29 Python
详解用python写一个抽奖程序
2019/05/10 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
Django实现发送邮件找回密码功能
2019/08/12 Python
Python 实现取多维数组第n维的前几位
2019/11/26 Python
Finishline官网:美国一家领先的运动品牌鞋类、服装零售商
2016/07/20 全球购物
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
学生会主席事迹材料
2014/01/28 职场文书
个人银行贷款担保书
2014/04/01 职场文书
班主任寄语大全
2014/04/04 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
2014年社区卫生工作总结
2014/12/18 职场文书
奖学金个人总结
2015/03/04 职场文书
总经理致辞
2015/07/29 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书