与我联系

纯js实现多个可在页面运行代码实例?

2015-5-12 一诺 js+jquery+ajax

纯js实现多个可在页面运行代码实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>纯js实现多个可在页面运行代码实例</title>
</head>
<body>
  <div class='text-code'>
    <textarea class="code-vessel" name="textarea" rows="10">
  <h2>
    他放不下陈年往事高调了一世<br>
    没落贵族守着仅剩的自尊仍傲慢固执<br>
    磨损的钻石<br>
    狂妄不羁的城市<br>
    在梦里依旧豪华极致<br>
    ——许哲佩《没落贵族》
  </h2>
    </textarea><br>
    <button class="run-code">运行代码</button><span class="run-info">您可以修改框中代码后运行查看<span>
  </div><br>
  <div class='text-code'>
    <textarea class="code-vessel" name="textarea" rows="10">
  <h2>
    我们的爱 只爱到一半<br>
    约好的幸福 不能靠岸<br>
    慢慢的习惯 享受着孤单<br>
    偶尔也会被寂寞拆穿<br>
    我们的爱只爱到一半<br>
    手牵手的旅程 忘了走完<br>
    曾经的浪漫 已被风吹散<br>
    埋在心底的遗憾<br>
    时间会替我们保管<br>
    ——魏晨《只爱到一半》
  </h2>
    </textarea><br>
    <button class="run-code">运行代码</button><span class="run-info">您可以修改框中代码后运行查看<span>
  </div><br>
  <div class='text-code'>
    <textarea class="code-vessel" name="textarea" rows="10">
  <h2>
    如果有一天 我们再见面<br>
    时间会不会倒退一点<br>
    也许我们都忽略<br>
    互相伤害之外的感觉<br>
    如果哪一天 我们都发现<br>
    好聚好散不过是种遮掩<br>
    如果我们没发现<br>
    就给彼此多一点时间<br>
    ——梁静茹《如果有一天》
  </h2>
    </textarea><br>
    <button class="run-code">运行代码</button><span class="run-info">您可以修改框中代码后运行查看<span>
   </div>
  <script>
    //运行文本域代码 原生js实现
    window.onload=function(){
      var oRunCode=getByClass('button','run-code',1);
      for(var i=0,len=oRunCode.length;i<len;i++){
        oRunCode[i].onclick=function(){
          var oParent=this.parentNode;
          var codeVessel=getByClass(oParent,'code-vessel',0);
          runCode(codeVessel[0]);
        }
      }
    };
    function runCode(cod1) {
      var codeValue = cod1.value;
      if (codeValue != "") {
            //pageURL 为子窗口路径, name为子窗口句柄, parameters为窗口参数(各参数用逗号分隔)
          var newwin = window.open('', '', ''); //打开一个窗口并赋给变量newwin。
          newwin.opener = null; // 防止代码对论坛页面修改
          newwin.document.write(codeValue); //向这个打开的窗口中写入代码,这样就实现了运行代码功能。
          newwin.document.close();
      }
    }
    function getByClass(oParent, sClass,bool){
      var aResult=[];
      if(bool){
        var aEle=document.getElementsByTagName(oParent);
      }else{
        var aEle=oParent.getElementsByTagName('*');
      }
      for(var i=0;i<aEle.length;i++){
        if(aEle[i].className==sClass){
          aResult.push(aEle[i]);
        }
      }
      return aResult;
    }

    // 或者使用jquery
    /*
        新窗口运行代码js
    */
    /*
     $(function(){
       $('.run-code').click(function(){
         var codeVessel=$(this).parent().find('.code-vessel').val();
         runCode(codeVessel);
       });
       function runCode(cod1) {
         if (cod1 != "") {
               //pageURL 为子窗口路径, name为子窗口句柄, parameters为窗口参数(各参数用逗号分隔)
            var newwin = window.open('', '', ''); //打开一个窗口并赋给变量newwin。
            newwin.opener = null; // 防止代码对论坛页面修改
            newwin.document.write(cod1); //向这个打开的窗口中写入代码,这样就实现了运行代码功能。
            newwin.document.close();
         }
       }
     })();
    */
  </script>
</body>
</html>

标签: js js页面运行代码 js新窗口运行代码

分享这篇文章
赞助鼓励:如果觉得内容对您有所帮助,您可以支付宝(左)或微信(右):

声明:如无特殊注明,所有博客文章版权皆属于作者,转载使用时请注明出处。谢谢!

发表评论:

皖ICP备15010162号-1 @2015 勿恨水长东
qq:1614245331 邮箱:13515678147@163.com Powered by
emlog