在Z-Blog中运行代码[html][/html](纯JS版)_javascript技巧

昨天的《利用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,就有多少个“运行代码”功能,够简单吧?

时间: 2024-08-01 06:43:45

在Z-Blog中运行代码[html][/html](纯JS版)_javascript技巧的相关文章

js实现运行代码需要刷新的解决方法_javascript技巧

现在大多网站都有"运行代码"的功能,搜索吧也很早就实现了这个功能,但最近在做一个项目时,发现有些需要刷新才能看到结果,自己摸索了下,其实解决方法很简单,看如下代码: function runCode(cod1) {      cod=document.getElementById(cod1)      var code=cod.innerText;      var newwin=window.open('','','');      newwin.opener = null;    

三种动态加载js的jquery实例代码另附去除js方法_javascript技巧

复制代码 代码如下: !-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js");就ok了. <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.

页面右下角弹出提示框示例代码js版_javascript技巧

复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+r

在百度知道团队中快速审批新成员的js脚本_javascript技巧

本人热衷于解答网友的技术类问题,于是在百度知道栏目创办了"挨踢五四三"团队. 自团队创办以来,每天都有大量网友申请加入我的团队,于是审核团队新成员成了一个费力气的活儿. 在此情况下,我写了个脚本,自动计算他们的回答采纳率,采纳率低于20%的自动打勾 选中,等级太低的人也自动打勾选中. 然后只要点击一下"拒绝"按钮就可以了. 使用方法: 进入"审批新成员"的页面,再按住键盘上的shift键 并点击"审批新成员"选项卡,这样可以使

html5-Phonegap项目在eclipse中运行,修改html和js不生效

问题描述 Phonegap项目在eclipse中运行,修改html和js不生效 最近刚接触phonegap,通过命令行创建phonegap项目后,导入eclipse中进行开发,但是将index.html修改后,点击eclipse的运行,改后的代码没有生效. 必须重新在命令行中:phonegap run android 后才能将效果加载. 求解有没有办法直接通过eclipse中的运行就让html中改后的代码生效. ps:建立phonegap项目的过程 phonegap create my-app

在JavaScript中对HTML进行反转义详解_javascript技巧

在JavaScript中对字符串进行转义和反转义操作,常用的方法莫过于使用encodeURI (decodeURI).encodeURIComponent (decodeURIComponent)这几个方法,具体使用方法和区别. 但是如何在JavaScript中对HTML进行反转义操作呢?例如下面这段代码: var jsonData = { title: "<%= data.name? data.name : title %>", desc: "<%= da

给blog加上运行代码功能_应用技巧

在和尚那里看到他给z-blog加上了运行代码功能,放了几天假,有些怕怕再这样闲下去会生锈的,在补了一个半小时的觉之后,也给blog加上运行功能,因为是从L-Blog修改而来,因此同样适用于L-Blog,另外,FBS也是L-Blog修改而来,应该也可以使用本文中的方法来添加运行代码功能.另外,由于复制代码和保存代码还没有找到兼容各浏览器的解决方法,就没有加进来了. 示例: 步骤如下: 1. 在 include/common.js 中添加如下代码: 复制代码 代码如下: function runCo

给blog加上运行代码功能

在和尚那里看到他给z-blog加上了运行代码功能,放了几天假,有些怕怕再这样闲下去会生锈的,在补了一个半小时的觉之后,也给blog加上运行功能,因为是从L-Blog修改而来,因此同样适用于L-Blog,另外,FBS也是L-Blog修改而来,应该也可以使用本文中的方法来添加运行代码功能.另外,由于复制代码和保存代码还没有找到兼容各浏览器的解决方法,就没有加进来了. 示例: 步骤如下: 1. 在 include/common.js 中添加如下代码: 复制代码 代码如下: function runCo

在.NET中取得代码行数的方法_实用技巧

文章目的 介绍在.NET中取得代码行数的方法 代码 复制代码 代码如下: [STAThread] static void Main(string[] args) { ReportError("Yay!"); } static private void ReportError(string Message) { StackFrame CallStack = new StackFrame(1, true); Console.Write("Error: " + Messa