一个神奇的JS代码，让浏览器在新的空白标签页运行我们 HTML 代码（createObjectURL 的妙用）-神弓

前言

目前，网上很多在线运行 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]