在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 ajax 登录验证实现代码
Sep 23 Javascript
jquery trim() 功能源代码
Feb 14 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
js实现倒计时时钟的示例代码
Dec 17 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
DOM节点深度克隆函数cloneNode()用法实例
Jan 12 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 Javascript
vue实现动态数据绑定
Apr 28 Javascript
npx create-react-app xxx创建项目报错的解决办法
Feb 17 Javascript
微信小程序实现点赞业务
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
php设计模式 Observer(观察者模式)
2011/06/26 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
PHP几个实用自定义函数小结
2016/01/25 PHP
PHP图像识别技术原理与实现
2016/10/27 PHP
php实现socket推送技术的示例
2017/12/20 PHP
动态加载iframe
2006/06/16 Javascript
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
jQuery中scrollLeft()方法用法实例
2015/01/16 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
Python编程pygal绘图实例之XY线
2017/12/09 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
Python smtp邮件发送模块用法教程
2020/06/15 Python
Django框架请求生命周期实现原理
2020/11/13 Python
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
工作自我评价分享
2013/12/01 职场文书
会计专业求职信范文
2014/03/16 职场文书
植树节口号
2014/06/21 职场文书
2014年变电站工作总结
2014/12/19 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书
golang goroutine顺序输出方式
2021/04/29 Golang
发工资啦!教你用Python实现邮箱自动群发工资条
2021/05/10 Python