网页在线运行HTML——实现代码

最新推荐文章于 2024-06-24 23:10:14 发布
weixin_30591551
最新推荐文章于 2024-06-24 23:10:14 发布
阅读量1k
点赞数
文章标签：前端 javascript ViewUI
原文链接：http://www.cnblogs.com/libf/p/7490014.html
版权
实现方式并非这一种，下面代码仅供参考。
<!DOCTYPE html>
<html>
<head>
<meta content="'text/html;" charset="utf-8" http-equiv="Content-Type" />
<title>测试代码</title>
<script>
//运行代码
function doRun(param)  {
    
     cod=document.getElementById(param)
      var code=cod.value;
      if (code!=""){
          var newwin=window.open('','','');  
          newwin.opener = null 
          newwin.document.write(code);  
          newwin.document.close();
    }
}
//复制代码
function doCopy(param) { 
    if (document.all){
         textRange = document.getElementById(param).createTextRange(); 
         textRange.execCommand("Copy"); 
    }
    else{
         //alert("此功能只能在IE上有效");
         copyToClipboard(document.getElementById(param).value);
    }
}
//另存为代码
function saveCode(param) {
    cod=document.getElementById(param)
    var code=cod.value;
    if (code!=""){
        var winname = window.open('', '_blank', 'top=10000');
        winname.document.open('text/html', 'replace');
        winname.document.write(code);
        winname.document.execCommand('saveas','','code.htm');
        winname.close();
    }
}
function copyToClipboard(txt) {
     if(window.clipboardData) {
             window.clipboardData.clearData();
             window.clipboardData.setData("Text", txt);
     } else if(navigator.userAgent.indexOf("Opera") != -1) {
          window.location = txt;
     } else if (window.netscape) {
          try {
               netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
          } catch (e) {
               alert("被浏览器拒绝！\n请在浏览器地址栏输入'about:config'并回车\n然后将'signed.applets.codebase_principal_support'设置为'true'");
          }
          var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
          if (!clip)
               return;
          var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
          if (!trans)
               return;
          trans.addDataFlavor('text/unicode');
          var str = new Object();
          var len = new Object();
          var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
          var copytext = txt;
          str.data = copytext;
          trans.setTransferData("text/unicode",str,copytext.length*2);
          var clipid = Components.interfaces.nsIClipboard;
          if (!clip)
               return false;
          clip.setData(trans,null,clipid.kGlobalClipboard);
     }
}
</script>
<style>
.btn {
    background-color: #A5A5A5; /* Green */
    //border: none;
    color: white;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
.textarea {
    background-color: #CCE8CF;
    padding: 5px 10px;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
</style>
<script>
 /* 实现方式二
  //  window.open 弹出新窗口的命令； 
　//  'page.html' 弹出窗口的文件名； 
　//　'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替； 
　//　height=100 窗口高度； 
　//　width=400 窗口宽度； 
　//　top=0 窗口距离屏幕上方的象素值； 
　//　left=0 窗口距离屏幕左侧的象素值； 
　//　toolbar=no 是否显示工具栏，yes为显示； 
　//　menubar，scrollbars 表示菜单栏和滚动栏。 
　//　resizable=no 是否允许改变窗口大小，yes为允许； 
　//　location=no 是否显示地址栏，yes为允许； 
　//　status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；
    function doRun() {
    
        var winEx2 =window.open('', 'newwindow', 'height=300, width=400, top=200px, left=300px, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no');
        
        //window.open("", "winEx2", "width=500,height=300,status=yes,menubar=no,scrollbars=yes,resizable=yes");
        
        //window.open('', 'newwindow', 'height=300, width=400, top=200px, left=300px, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no');
        winEx2.document.open('text/html', 'replace');
        winEx2.document
                .write(unescape(event.srcElement.parentElement.children[0].value));
        winEx2.document.close();
    }
    function saveFile() {
        var win = window.open('', '', 'top=10000,left=10000');
        win.document.write(document.all.t1.innerText)
        win.document.execCommand('SaveAs', '', 'a.html')
        win.close();
    }
    */
</script>
</head>
<body >
    

    <div align="center" class="UBBContent">
    <!--textarea 中的html内的'<','>'需要转义'&lt;','&gt;' -->
        <textarea id="t1" name="textfield" class="textarea" rows="30" cols="100">
&lt;!Doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="Generator" content="EditPlus®"&gt;
&lt;meta name="Author" content=""&gt;
&lt;meta name="Keywords" content=""&gt;
&lt;meta name="Description" content=""&gt;
&lt;title&gt;测试程序&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script
src="http://code.jquery.com/jquery-1.4.1.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
    //字数限制
    window.onload = function() {
        //（document）
        document.getElementById('note').onkeyup = function() {        
            document.getElementById('text-count').innerHTML=this.value.length;
        }
    //（jquery）
        $('#note2').keyup(function() {
        //    var val=$('#note2').val();
        //    var len=val.length;
        var len=this.value.length
                    $('#text-count2').text(len);
        })
    }
&lt;/script&gt;
&lt;div&gt;
&lt;textarea cols="40" rows="5" id="note"
name="note" maxlength="100" value=""
οnkeyup="this.value=this.value.substring(0, 100)"
placeholder="最多可输入100字"&gt;&lt;/textarea&gt;&lt;span id="text-count" value=""&gt;0&lt;/span&gt;/100
&lt;/div&gt;
&lt;div&gt;
&lt;textarea cols="40" rows="5" id="note2"
name="note2" maxlength="100" value=""
οnkeyup="this.value=this.value.substring(0, 100)"
placeholder="最多可输入100字"&gt;&lt;/textarea&gt;&lt;span id="text-count2" value=""&gt;0&lt;/span&gt;/100
&lt;/div&gt;
 &lt;/body&gt;
&lt;/html&gt;
        </textarea><br><br>
         <input name="Button" class="btn" onclick="doRun('t1')" type="button" value="运行代码" />
             <input name="Button" class="btn" onclick="t1.select('t1')" type="button" value="全选" /> 
             <input name="Button" class="btn" onclick="t1.value=''" type="button" value="清空" />
             <input onclick="saveCode('t1');" class="btn" type="button" value="保存代码" /><br>
             <span>[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</span><br>
        <!--实现方式二
            
            <input name="Button" class="btn" οnclick="doRun()" type="button" value="运行代码" />
             <input name="Button" class="btn" οnclick="t1.select()" type="button" value="全选" /> 
             <input name="Button" class="btn" οnclick="t1.value=''" type="button" value="清空" />
             <input οnclick="saveFile();" class="btn" type="button" value="保存代码" />   -->

    </div>
</body>
</html>