在线实时编译运行html（v2）

一时失言乱红尘 2023-01-12 01:44 152阅读 0赞

### 实时编译运行html ###

*  说明
 *  资源下载：
 *  效果
 *  问题汇总
 *  代码

# 说明 #

后期设想可以通过这种方式把写好的代码保存到服务器，当然这里需要更多的权限校验，防止代码侵入。也可以把写好的代码下载到本地。  
为尽量减少滚动，博客中不重要代码格式已处理过，如觉得格式有问题，可点击下方下载资源。

# 资源下载： #

链接：[https://pan.baidu.com/s/1kAEQxHngcnVq3fpdj\_g6cg][https_pan.baidu.com_s_1kAEQxHngcnVq3fpdj_g6cg] 提取码：td5t

# 效果 #

在[基础版本][Link 1]上添加了在线编辑js功能。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xqY2MxMjI_size_16_color_FFFFFF_t_70]

# 问题汇总 #

在基础版本上添加了动态插入js功能。通过创建dom元素的方式插入js代码。  
如何动态生成js：见 [LoadJS与myload实现][LoadJS_myload]

# 代码 #

可忽略，直接下载百度云资源即可。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>在线HTML</title>
    	</head>
    	<body>
    		<style> html{ height: 100%; padding: 0; margin: 0;} body{ height: 100%;padding: 0;margin: 0; /* h5页面禁止复制以及禁止右键 */ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ -moz-user-select:none; /*火狐*/ -ms-user-select:none; /*IE10*/ user-select:none; } .content{ display: flex;flex-direction: column;height: calc(100% - 45px);padding: 0;margin: 0;} textarea{ padding: 10px;resize: none;width: calc( 100% - 20px );margin: 0;border: 0;} textarea:focus{ outline: none;}/* 文本域 获取焦点后的样式 */ iframe{ margin: 0; border: 0;height: 50%; border-top: 1px solid red;} .content #edit{ height: 50%; display: flex;flex-direction: initial;} .content #editHtml,#editCss{ border-right: 1px solid red;} .controls{ border-top: 1px solid #808080;border-bottom: 1px solid #808080;padding: 10px; white-space: nowrap;overflow-x: auto; min-height: 23px; } .controls a, .controls label{ text-decoration: none; user-select: none;padding: 8px; cursor: pointer;} .controls a:hover, .controls label:hover{ background: #f0f0f0;} .body_bk_black,.body_bk_black textarea{ background:#000;color:#fff;} .body_bk_white,.body_bk_white textarea{ background:#fff;color:#000 ;} </style>
    		<div class="controls">
    			<label> <input type=checkbox id="runTime" onclick="onClickRunTime()" checked> 实时运行</label> |  <label onclick="saveHtml()"> 保存</label> | <label onClick="openWindow(false)">到打开的窗口</label> |<label onClick="openWindow(true)" >打开新窗口</label> |<label onclick="updateBack('black')">  黑色背景</label> | <label onclick="updateBack('white')">  白色背景</label> | 
    		</div>
    		<div class="content">
    			<div id="edit">
    				<textarea id="editHtml" class="lineEdit">		
    
    <span class="runspan">
    	实时运行实时编译.
    </span>
    <button id="testBtn">点击事件测试</button>
    				</textarea>
    				<textarea id="editCss" class="lineEdit">
    
    body {
    	padding: 22px !important;
    }
    .runspan {
    	display: inline-block;
    	background: #00ffff;
    	padding: 20px;
    }
    				</textarea>
    				<textarea id="editJs" class="lineEdit">
    
    document.getElementById("testBtn").οnclick=function(){alert("1")}
    					</textarea>
    			</div>
    			<iframe name="runContent" style="width: 100%; height: 100%"></iframe>
    			<script> /* 背景切换 */ updateBack=(type)=>{ if(type == "black") { document.getElementsByTagName("body")[0].className = "body_bk_black"; document.getElementById("edit").className = "body_bk_black";//editHtml }else if(type == 'white') { document.getElementsByTagName("body")[0].className = "body_bk_white" document.getElementById("edit").className = "body_bk_white";//editHtml } } /* 运行编译 */ onClickRunTime=()=>{ let runIframe = window.runContent.document; runIframe.open(); runIframe.write(finalHtml()); disableUse(runIframe);//禁用iframe右键 runIframe.close(); }; /* 指定对象禁止使用右键和全选 */ disableUse=(obj)=>{ obj.oncontextmenu=new Function("event.returnValue=false"); obj.onselectstart=new Function("event.returnValue=false"); } /* 打开新窗口 */ openWindow=(newWin)=>{ let win=null; if (newWin) win= window.open() else win= window.open("about:blank","newOldWin",'location=no,menubar=yes,status=no'); win.focus(); let runIframe = win.document; runIframe.open(); runIframe.write(finalHtml()); runIframe.title=runIframe.title || "new在线HTML"; runIframe.close(); } /* 最终的html内容 */ finalHtml=()=>{ let stylecss = document.getElementById("editCss").value.trim(); let _script = document.createElement("script"); _script.innerHTML = document.getElementById("editJs").value.trim() _script.type="text/javascript"; let edithtml = `<!DOCTYPE html><html><head><style>${ stylecss}</style></head> <body>${ document.getElementById("editHtml").value.trim()}</body> ${ _script.outerHTML} </html>`; return edithtml; } /* 即时编译 */ realtime=()=>{ if (!document.querySelector("#runTime").checked) return; onClickRunTime(); } /* 保存最终html */ saveHtml=(downloadName = "在线后最终HTML内容")=>{ let urlObject = window.URL || window.webkitURL || window; let export_blob = new Blob([finalHtml()],{ type: 'text/html'}); let save_link = document.createElement("a"); save_link.href = urlObject.createObjectURL(export_blob); save_link.download = downloadName;//下载后的名称 triggerEvent(save_link, "click"); } /* 给定的对象上面，模拟事件 */ triggerEvent=(obj, type="click")=>{ let ev = document.createEvent("MouseEvents"); ev.initMouseEvent( type, true, false, window, 0, 0, 0, 0, 0 , false, false, false, false, 0, null ); obj.dispatchEvent(ev); } /* 初始化 */ init=()=>{ //对编辑框绑定鼠标点击事件 let objs = document.getElementsByClassName("lineEdit"); for(let i=0;i<objs.length;i++) objs[i].onkeyup=realtime realtime(); } init(); </script>
    		</div>
    	</body>
    </html>

[https_pan.baidu.com_s_1kAEQxHngcnVq3fpdj_g6cg]: https://pan.baidu.com/s/1kAEQxHngcnVq3fpdj_g6cg
[Link 1]: https://blog.csdn.net/ljcc122/article/details/113189943
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xqY2MxMjI_size_16_color_FFFFFF_t_70]: /images/20221119/c403294193dd4685be6aab055da9b21a.png
[LoadJS_myload]: https://blog.csdn.net/ljcc122/article/details/89249203