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

最新推荐文章于 2024-04-09 22:19:36 发布

cc百川

最新推荐文章于 2024-04-09 22:19:36 发布

阅读量533

点赞数

分类专栏： web前端文章标签：前端在线编译动态插入js 实时编译运行js 实时编译运行css 前端在线热部署

本文链接：https://blog.csdn.net/ljcc122/article/details/113248722

版权

实时编译运行html

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

说明

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

资源下载：

链接：https://pan.baidu.com/s/1kAEQxHngcnVq3fpdj_g6cg 提取码：td5t

效果

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

问题汇总

在基础版本上添加了动态插入js功能。通过创建dom元素的方式插入js代码。
如何动态生成js：见 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