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>
  • 相关阅读:
    .net常用框架总结
    微信小程序 语音转换
    nginx+redis实现session共享 .NET分布式架构
    Redis 安装及注册服务
    WebApi跨域
    Uri各个属性取值测试
    一些常用的FFMPEG命令集合
    动态规划重学习笔记
    给自己的电脑时间进行精准校时
    [NOI题库][POJ2536][匈牙利算法][二分图最大匹配]Gopher II
  • 原文地址:https://www.cnblogs.com/padding1015/p/6677103.html
Copyright © 2011-2022 走看看