效果：

在这里插入图片描述

代码：

可跳过代码直达问题汇总

<!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">        
<!-- html内容 -->
<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页面禁止复制以及禁止右键

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的创建，不存在这创建一个