前言
目前，网上很多在线运行 HTML 的页面，大都是这样的逻辑：
上面一个代码框 <iframe>，然后通过 js，将我们的代码框中的 HTML 给输入到 <iframe> 里面，这便是一个简单的在线运行 html 的逻辑。
甚至我们可以在一行里写一个在线运行 html 的页面。比如下面这个，一个高度精简的简短的 HTML JS CSS代码：
<body oninput="i.srcdoc=h.value+'<style>'+c.value+'</style>[removed]'+j.value+'[removed]'"><style>textarea,iframe{width:100%;height:50%}body{margin:0}textarea{width:33.33%;font-size:18}</style><textarea placeholder=HTML id=h></textarea><textarea placeholder=CSS id=c></textarea><textarea placeholder=JS id=j></textarea><iframe id=i>
如果想运行，很简单，将下面这个代码直接粘贴到浏览器框里，并回车即可：
[removed] {type: 'text/html'});
const codeTempUrl = window.URL.createObjectURL(codeBlob);
window.open(codeTempUrl, '_blank');
URL.revokeObjectURL(codeTempUrl);
}
[removed]
运行效果如下：
单击按钮后，
很不错。然后我们就可以根据我们自身的需要，为其添加这样的功能！
- 在写代码的时候，添加保存快捷键，让其保存到我们的浏览器的
localStorage里，防止丢失代码 - 设置一个保存按钮
- 把 CSS 和 JS 也搞里头，单独设置两个框
- 一键清除记录
- 简单的把界面给美化一下
- 可以将当前的页面转化为 HTML 文件下载
然后我就搞成了这个样子！
大家可以单击这个地址，查看运行效果！ https://www.ccgxk.com/528.html 我的站点上的一个页面将其嵌入其中了。
我感觉真的很实用。我在使用 Gemini 这种对前端输出比较厉害的 AI 的时候，它会给我输出一大堆的 HTML ，有时候还会分 CSS 和 JS 输出，我使用这个页面来辅助测试的话还不错，比类似于 codepen 那种页面好用很多。
下面是目前的全部代码，可能还有很多地方要改进的，我之后在使用过程中会进行迭代，并实时更新到我的站点上的那个页面上。
<style>
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
button { cursor: pointer; }
.code-textarea {width: 100%;height: 250px;padding: 1em;background-color: azure; border: 0; outline: 0;}
#htmlcode::::placeholder { color: grey; }
.code-action-btn {float: right;background-color: antiquewhite;border: 0;width: 60px;height: 50px;font-size: 22px;padding: 0;}
</style>
<textarea placeholder="在此处输入 HTML 代码，单击下面的【运行】，浏览器会新建一个空白标签页运行预览..." name="code" id="htmlcode" class="code-textarea"></textarea>
<button class="code-action-btn" id="runhtml">运行</button>
<button class="code-action-btn" id="dwnhtml" style="margin-right: 10px;">下载</button>
<button class="code-action-btn" id="delhtml" style="margin-right: 10px;">清空</button>
<button class="code-action-btn" id="savehtml" style="margin-right: 10px;">保存</button>
CSS + JS
CSS
<textarea class="code-textarea" name="code" id="csscode"></textarea>
JS
<textarea class="code-textarea" name="code" id="jscode"></textarea> [removed]// 生成随机字符串function generateRandomString(length = 8) { const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; let result = ''; for (let i = 0; i < length xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed charset="utf-8">` + `<style>` + csscode.value + `</style>` + htmlcode.value + `[removed]` + jscode.value + ``], { type: 'text/html' }); } else { testBlob = new Blob([`<meta charset="utf-8">` + htmlcode.value], { type: 'text/html' }); } const codeTempUrl = window.URL.createObjectURL(testBlob); window.open(codeTempUrl, '_blank'); URL.revokeObjectURL(codeTempUrl);}// 保存 HTML 函数function saveHtmlFunc() { const codeContent = { htmlcode: htmlcode.value, csscode: csscode.value, jscode: jscode.value }; localStorage.setItem('codeData', JSON.stringify(codeContent)); res_info[removed] ="已暂存";}// 按下保存快捷键后document.addEventListener('keydown', function(e) { // 保存快捷键 if (e.keyCode == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) { e.preventDefault(); saveHtmlFunc(); }});// 点击 下载 事件dwnhtml.onclick = function() { if (!htmlcode.value) { return 0; } const fileName = generateRandomString() + '.html'; let testBlob; if (csscode.value || jscode.value) { testBlob = new Blob([`<meta charset="utf-8">` + `<style>` + csscode.value + `</style>` + htmlcode.value + `[removed]` + jscode.value + ``], { type: 'text/html' }); } else { testBlob = new Blob([`<meta charset="utf-8">` + htmlcode.value], { type: 'text/html' }); } const downloadLink = document.createElement('a'); downloadLink.href = URL.createObjectURL(testBlob); downloadLink.download = fileName; document.body.appendChild(downloadLink); downloadLink.click(); document.body.removeChild(downloadLink); URL.revokeObjectURL(downloadLink.href);}// 点击 清空 事件delhtml.onclick = function() { htmlcode.value = ''; csscode.value = ''; jscode.value = ''; localStorage.removeItem('codeData');}// 点击 保存 事件savehtml.onclick = function() { saveHtmlFunc();}[removed]