网页在线运行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 id="t1" name="textfield" class="textarea" rows="30" cols="100">
<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>测试程序</title>
</head>
<body>
<script
src="http://code.jquery.com/jquery-1.4.1.js"></script>
<script type="text/javascript">
    //字数限制
    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);
        })
    }
</script>
<div>
<textarea cols="40" rows="5" id="note"
name="note" maxlength="100" value=""
οnkeyup="this.value=this.value.substring(0, 100)"
placeholder="最多可输入100字"></textarea><span id="text-count" value="">0</span>/100
</div>
<div>
<textarea cols="40" rows="5" id="note2"
name="note2" maxlength="100" value=""
οnkeyup="this.value=this.value.substring(0, 100)"
placeholder="最多可输入100字"></textarea><span id="text-count2" value="">0</span>/100
</div>
 </body>
</html>
        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>
        

    div>
body>
html>

 具体效果 请看上篇!!!

转载于:https://www.cnblogs.com/libf/p/7490014.html

你可能感兴趣的:(网页在线运行HTML——实现代码)