在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 replace 字符替换实现代码
Dec 02 Javascript
JS 控制小数位数的实现代码
Aug 02 Javascript
Javascript writable特性介绍
Feb 27 Javascript
javascript拖拽效果延伸学习
Apr 04 Javascript
AngularJs Forms详解及简单示例
Sep 01 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
Jan 15 Javascript
Vue之Watcher源码解析(2)
Jul 19 Javascript
总结js中的一些兼容性易错的问题
Dec 18 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
webpack自动打包和热更新的实现方法
Jun 24 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 Javascript
js实现百度登录窗口拖拽效果
Mar 19 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 htmlentities和htmlspecialchars 的区别
2008/08/18 PHP
php header Content-Type类型小结
2011/07/03 PHP
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
PHP时间函数使用详解
2019/03/21 PHP
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
jquery入门必备的基本认识及实例(整理)
2013/06/24 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
jQuery滚动条插件nanoscroller使用指南
2015/04/21 Javascript
使用JavaScript的AngularJS库编写hello world的方法
2015/06/23 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
详解Nodejs之静态资源处理
2017/06/05 NodeJs
微信小程序实现全国机场索引列表
2018/01/31 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
Python常用模块介绍
2014/11/21 Python
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
python 多线程实现检测服务器在线情况
2015/11/25 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
应聘自荐书
2013/10/08 职场文书
硕士研究生自我鉴定范文
2013/12/27 职场文书
党的群众路线教育实践活动宣传方案
2014/02/23 职场文书
前台接待岗位职责
2015/02/03 职场文书
运动会3000米加油稿
2015/07/21 职场文书
导游词之广东佛山(南风古灶)
2019/09/24 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL