zoukankan      html  css  js  c++  java
  • JS-在线运行代码小工具

    原理:window.open()方法,open一个新的空白页,然后把文本框中粘贴的代码通过DOM操作,写到新的代码页中,

    再利用document.write的功能(写进去之前把其他的全部删掉,并且写进去的html代码是可以解析的。)完成想要的效果。

    window.open打开的新页面也是一个浏览器对象,也具有document.write这个方法;。

     1 <!DOCTYPE html>
     2 <html>
     3     <!--
     4         作者:702004176@qq.com
     5         时间:2017-04-07
     6         描述:在线运行代码小工具
     7     -->
     8     <head>
     9         <meta charset="UTF-8">
    10         <title>在线运行代码</title>
    11         <meta name="author" content="gjf_xing.org1^"/>
    12         <meta name="Description" content="在线运行代码的小工具"/>
    13         <meta name="Keywords" content="小工具,代码运行,运行代码,open方法,新页面,在线调试"/>
    14     </head>
    15     <body>
    16         <textarea name="" rows="13" cols="80" id="txt"></textarea>
    17         <br />
    18         <input type="button" name="" id="btn" value="运行代码" />
    19     </body>
    20     <script type="text/javascript">
    21         window.onload = function(){
    22             var oTxt = document.getElementById("txt"),
    23                 oBtn = document.getElementById("btn");
    24             oBtn.onclick = function(){
    25                 var w = window.open("about:blank","_blank");
    26                 w.document.write(oTxt.value);
    27             };
    28         };
    29     </script>
    30 </html>
  • 相关阅读:
    mongo备份&恢复
    logstash参数配置
    elasticsearch索引自动清理
    Linux将公网ip映射到局域网ip
    普通用户创建ssh无密码访问
    软考介绍
    安装ffmpeg
    Hadoop实战-Flume之自定义Sink(十九)
    Hadoop实战-Flume之自定义Source(十八)
    Hadoop实战-Flume之Sink Load-balancing(十七)
  • 原文地址:https://www.cnblogs.com/padding1015/p/6677103.html
Copyright © 2011-2022 走看看