zoukankan      html  css  js  c++  java
  • JS Runcode运行网页上的HTML/CSS/Javascrip代码




    <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>runcode-运行HTML/CSS/Jvascrip代码</title> </head> <body> <form> <textarea name="codearea" style="800px; height:600px"> </textarea> <br /> <input name="run" type="button" value="运行代码"> </form> <script> (function(){ function run(code){ var newWin = window.open("", "_blank", ""); newWin.opener = null; // 防止代码对页面修改 newWin.document.open(); newWin.document.write(code); newWin.document.close(); } //遍历页面中运行代码按钮 var executes = document.getElementsByName("run"); for(var i=0; i<executes.length; i++){ executes[i].onclick = function(){ var code = this.form.codearea.value; run(code); }; } }()); </script> </body> </html>

    要在博客中插入可运行的代码:

    一 将博客园后台的文本编辑器切换到的HTML视图下插入代码:

    <form>
        <textarea name="codearea" style="800px; height:600px">
        
        </textarea>
        
        <br />
        <input name="run" type="button" value="运行代码">
    </form>
    

    表单元素的样式可以根据需要调整。

    二 、在textarea中插入需要运行的代码,代码需要经过HTML ENCODE 否则提交的时候会被处理。

    三、在页面底部加入代码:

    <script type="text/javascript" src="http://www.buyed.cn/blog/script/runcode.js"></script>

    或者拷贝runcode.js中的代码到页面上。

    演示:

  • 相关阅读:
    几个关于设计的小问题
    基于建立/保持时间等的参数化时序分析
    Stratix内嵌存储器测试报告
    采用流水线技术实现8位加法器
    运算顺序引发的一系列有趣问题
    PON系统基础知识简介
    某MDU产品OMCI软件升级加速方案
    研究生期间接受的指导(二)
    研究生期间接受的指导(一)
    1063 Set Similarity (25 分)
  • 原文地址:https://www.cnblogs.com/rentj1/p/2716532.html
Copyright © 2011-2022 走看看