基于 DOMParse API 的 HTML 预览演示

马黑黑 · 发表于 2026-6-7 19:23

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

<button type="button" id="btnTest">点击我预览效果</button>

<script>

function preView (code) {
    // HTML代码转DOM实体
    const doc = new DOMParser().parseFromString(code, 'text/html');

    // 添加meta标签(用于定义网页字符集)
    const metas = doc.getElementsByTagName('meta');
    let hasCharset = false; // 字符集meta未定义
    // 遍历meta标签
    for (let j = 0; j < metas.length; j ++) {
        if (metas[j].hasAttribute('charset')) {
            hasCharset = true; // 字符集已定义
            break;
        }
    }
    // 若未定义字符集则创建meta标签
    if (!hasCharset) {
        const meta = document.createElement('meta');
        meta.setAttribute('charset', 'utf-8');
        doc.head.prepend(meta);
    }

    // 若不存在title标签创建之
    if (!doc.title) {
        const title = document.createElement('title');
        title.textContent = '预览';
        doc.head.appendChild(title)
    }

    // 获取完整HTML代码文本
    const content = doc.documentElement.outerHTML;

    // 预览
    const codeBlob = new Blob([content], { type: 'text/html' });
    const tmpUrl = window.URL.createObjectURL(codeBlob);
    window.open(tmpUrl, '_blank');
}
    // 故意令代码结构不完整
    let htmlCode = `<body>\n<style>\nh1 { color: red; };\n</style>\n<h1>Hello World!</h1>\n</body>`;
    btnTest.onclick = () => preView(htmlCode);

</script>

马黑黑 · 发表于 2026-6-7 19:30

本帖可以视为浅谈待预览HTML代码的包装的补充：提供一个使用 DOMParse API 的待预览 HTML 代码的函数和函数应用示例。

核心在函数 preView(code)，参数 code 是纯文本 html 代码字串。

这个包装待预览html代码的方案，包装的工作不仅针对 Web 结构的完整性，还特别处理 meta 标签字符集声明和 title 标签，前者针对页面显示避免乱码、后者针对页面（标签页）的标题显示。

马黑黑 · 发表于 2026-6-7 19:38

在最终的预览页面，可以右击查看原始代码，会发现核心三元素是齐备的，还有我们添加的 meta 和 title 标签（不论 htmlCode 变量里的文本是否包含这些）

基于 DOMParse API 的 HTML 预览演示

请马上登录，朋友们都在花潮里等着你哦：）

花潮帅哥

鼠

牛

虎

兔

龙

蛇

马

羊

猴

鸡

狗

猪

多彩人生

星月交辉

奔放热烈

海样胸怀

春风拂面

火热情怀

优雅迷人

神秘浪漫

相遇之美

鹰傲苍穹

花好月圆

紫色情节

飞龙在天

王者至尊

大将风范

音画大师

天籁妙音

共看流星

风雨同行

我心永远

幸福快乐

喜乐安康

侠骨柔肠

心想事成

开朗大方

花潮管理