在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 相关文章推荐
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
理解JavaScript的caller,callee,call,apply
Apr 28 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
Jul 10 Javascript
javascript删除字符串最后一个字符
Jan 14 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 Javascript
javascript闭包的理解
Apr 01 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
基于Axios 常用的请求方法别名(详解)
Mar 13 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 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
PHP 面向对象程序设计(oop)学习笔记 (二) - 静态变量的属性和方法及延迟绑定
2014/06/12 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
js里的prototype使用示例
2010/11/19 Javascript
在JQuery dialog里的服务器控件 事件失效问题
2010/12/08 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
2016/08/01 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
详解使用vuex进行菜单管理
2017/12/21 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
python 与GO中操作slice,list的方式实例代码
2017/03/20 Python
Python 高级专用类方法的实例详解
2017/09/11 Python
python取代netcat过程分析
2018/02/10 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
Python创建临时文件和文件夹
2020/08/05 Python
TheFork葡萄牙:欧洲领先的在线餐厅预订平台
2019/05/27 全球购物
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
会计专业毕业生自荐信范文
2013/12/20 职场文书
科技开发中心办公室主任岗位责任制
2014/02/10 职场文书
投标服务承诺书
2014/05/28 职场文书
村创先争优活动总结
2014/08/28 职场文书
开会通知短信大全
2015/04/20 职场文书
公司辞职信模板
2015/05/13 职场文书