在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乱码与contentType属性设置问题解决方案
Jan 07 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
Mar 19 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
jquery制作LED 时钟特效
Feb 01 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
Oct 22 Javascript
JavaScript与ActionScript3两者的同性与差异性
Sep 22 Javascript
js中开关变量使用实例
Feb 24 Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 Javascript
js实现无缝轮播图效果
Mar 09 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
Zend Guard一些常见问题解答
2008/09/11 PHP
php图片添加水印例子
2016/07/20 PHP
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
2010/02/06 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
javascript实现控制浏览器全屏
2015/03/30 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
python正则表达式re模块详细介绍
2014/05/29 Python
python自动化测试之setUp与tearDown实例
2014/09/28 Python
python中Apriori算法实现讲解
2017/12/10 Python
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
Python import与from import使用及区别介绍
2018/09/06 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
PyQt 如何创建自定义QWidget
2021/03/24 Python
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
工程部经理岗位职责
2013/12/08 职场文书
婚假请假条怎么写
2014/04/10 职场文书
小学教师师德承诺书
2014/05/23 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
普通党员整改措施
2014/10/24 职场文书
2015年幼师工作总结
2015/04/28 职场文书
《金色的草地》教学反思
2016/02/17 职场文书
《别在吃苦的年纪选择安逸》读后感3篇
2019/11/30 职场文书
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL