在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 相关文章推荐
js 判断 enter 事件
Feb 12 Javascript
js动态设置div的值下例子
Oct 29 Javascript
JS在可编辑的div中的光标位置插入内容的方法
Nov 20 Javascript
jQuery代码实现对话框右上角菜单带关闭×
May 03 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
微信小程序 wx:key详细介绍
Oct 28 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
Jan 03 Javascript
Jquery获取radio选中的值
May 05 jQuery
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
PostgreSQL Node.js实现函数计算方法示例
Feb 12 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
Feb 13 Javascript
微信小程序使用前置摄像头拍照
Oct 22 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
linux下 C语言对 php 扩展
2008/12/14 PHP
PHP 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
PHP实现采集中国天气网未来7天天气
2014/10/15 PHP
PHP制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
PHP使用http_build_query()构造URL字符串的方法
2016/04/02 PHP
WordPress中设置Post Type自定义文章类型的实例教程
2016/05/10 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
PHP获取访问设备信息的方法示例
2019/02/20 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
2016/01/08 Javascript
浅谈js中的in-for循环
2016/06/28 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
JSON 数据格式详解
2017/09/13 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
[01:01:36]Optic vs paiN 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
python爬虫之线程池和进程池功能与用法详解
2018/08/02 Python
css3的过滤效果简单实例
2016/08/03 HTML / CSS
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
Square Off美国/加拿大:世界上最聪明的国际象棋棋盘
2018/12/06 全球购物
总经理工作职责范文
2014/03/14 职场文书
投资意向书
2014/07/30 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
放假通知
2015/04/14 职场文书