在线实时编译运行html

向右看齐 2023-01-11 09:22 265阅读 0赞

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

*  效果：
 *  代码：
 *  问题汇总
 *   *  Blob对象
     *  URL.createObjectURL
     *  document.initMouseEvent
     *   *  参数说明：
     *  htm禁用右键、禁用选择
     *  window.open

# 效果： #

![在这里插入图片描述][20210126194926968.gif]

# 代码： #

可跳过代码直达问题汇总

<!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{ 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 #editHtml,.body_bk_black #editCss{ background:#000; color:#fff; } .body_bk_white,.body_bk_white #editHtml,.body_bk_white #editCss { 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">		
    
    <span class="runspan">
    	实时运行实时编译.
    </span>
    				</textarea>
    				<textarea id="editCss">
    /*css样式*/
    body {
    	padding: 22px !important;
    }
    .runspan {
    	display: inline-block;
    	background: #00ffff;
    	padding: 20px;
    }
    				</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()); //禁用iframe右键 disableUse(runIframe); 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'); win.focus(); let runIframe = win.document; runIframe.open(); runIframe.write(finalHtml()); runIframe.title="new在线HTML"; runIframe.close(); } /* 最终的html内容 */ finalHtml=()=>{ let stylecss = "<style>"+document.getElementById("editCss").value+"</style>"; let edithtml = "<html><head>"+stylecss+"</head><body>"+document.getElementById("editHtml").value+"</body></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=()=>{ document.getElementById("editHtml").onkeyup=realtime; document.getElementById("editCss").onkeyup=realtime; onClickRunTime(); } init(); </script>
    		</div>
    	</body>
    </html>

# 问题汇总 #

## Blob对象 ##

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

## URL.createObjectURL ##

返回一个url URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

## document.initMouseEvent ##

initMouseEvent 方法用于初始化通过 DocumentEvent 接口创建的 MouseEvent 的值。此方法只能在通过 dispatchEvent 方法指派 MouseEvent 之前调用，尽管在该阶段可以多次调用它（如有必要）。如果被多次调用，则最后一次调用优先。  
具体实现：

/* 给定的对象上面，模拟事件 */
    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);
    }

### 参数说明： ###

typeArg - 指定事件类型。
    canBubbleArg - 指定该事件是否可以 bubble。
    cancelableArg - 指定是否可以阻止事件的默认操作。
    viewArg - 指定  Event 的  AbstractView。
    detailArg - 指定  Event 的鼠标单击量。
    screenXArg - 指定  Event 的屏幕 x 坐标
    screenYArg - 指定  Event 的屏幕 y 坐标
    clientXArg - 指定  Event 的客户机 x 坐标
    clientYArg - 指定  Event 的客户机 y 坐标
    ctrlKeyArg - 指定是否在  Event 期间按下 control 键。
    altKeyArg - 指定是否在  Event 期间按下 alt 键。
    shiftKeyArg - 指定是否在  Event 期间按下 shift 键。
    metaKeyArg - 指定是否在  Event 期间按下 meta 键。
    buttonArg - 指定  Event 的鼠标按键。
    relatedTargetArg - 指定  Event 的相关  EventTarget。

## htm禁用右键、禁用选择 ##

[h5页面禁止复制以及禁止右键][h5]

## window.open ##

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。  
即可以打开一个全新的窗口，或者打开一个‘已命名’的窗口。“命名”指窗口名称。  
location=yes|no|1|0 是否显示地址字段。默认是 yes。  
toolbar=yes|no|1|0 是否显示浏览器的工具栏。默认是 yes。  
见代码

if (newWin) win= window.open();//每一次打开一个新窗口
    else win= window.open("about:blank","newOldWin",'location=no,menubar=yes,status=no');//打开名称为newOldWin的创建，不存在这创建一个

第三个参数：其他属性，见https://www.w3school.com.cn/jsref/met\_win\_open.asp

[20210126194926968.gif]: /images/20221119/af9f1154de2a410193580dac7df5c125.png
[h5]: https://blog.csdn.net/ljcc122/article/details/98883206