动态写入HTML至iframe时<body>标签丢失问题求助

我在实现邮件预览功能时，用jQuery将完整HTML文档写入iframe的<html>元素，发现<body>标签被自动省略，连带body上的font-family等样式也丢失，导致显示异常。

原代码 #

const iframe_content = $('#'+iframe_id).contents().find('html');
iframe_content.html(data.html);

待写入的HTML内容（data.html） #

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="color-scheme" content="light dark">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>@media (prefers-color-scheme: dark){
.body_inner{background:#000 !important}
.content{border:0}
.content_inner{background:#000 !important;color:#fff !important}
}</style>
    </head>
    <body style="margin:0;padding:0;font-family:arial,helvetica,garuda">
        <div>first element</div>
    </body>
</html>

写入后iframe的实际源代码 #

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="color-scheme" content="light dark">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>@media (prefers-color-scheme: dark){
.body_inner{background:#000 !important}
.content{border:0}
.content_inner{background:#000 !important;color:#fff !important}
}</style>
    </head>
    <div>first element</div>
</html>

问题原因 #

jQuery的.html()方法在处理完整HTML文档时，会自动剥离<html>、<head>、<body>这类顶级结构标签，仅将标签内的内容合并到目标元素中。当你把完整HTML写入iframe的<html>元素时，jQuery会解析HTML并将<head>内容合并到现有<head>，<body>内容直接放到<html>标签下，导致<body>标签丢失。

解决方案 #

方案一：直接操作iframe的document对象（推荐）

绕过jQuery，直接用原生JS替换整个iframe文档，保留所有原始标签和属性：

const iframe = document.getElementById(iframe_id);
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
iframeDoc.open();
iframeDoc.write(data.html);
iframeDoc.close();

方案二：拆分HTML分别写入head和body（兼容jQuery场景）

如果必须使用jQuery，可以先解析HTML内容，分别处理head和body的内容及属性：

const iframeContents = $('#' + iframe_id).contents();
const iframeDoc = iframeContents[0];

// 创建临时元素解析传入的HTML
const tempContainer = $('<div>').html(data.html);
const tempHead = tempContainer.find('head');
const tempBody = tempContainer.find('body');

// 更新iframe的head内容
$(iframeDoc.head).html(tempHead.html());

// 更新iframe的body内容及属性
const iframeBody = $(iframeDoc.body);
iframeBody.empty().html(tempBody.html());
// 复制body的所有属性
$.each(tempBody[0].attributes, function() {
    iframeBody.attr(this.name, this.value);
});

验证效果 #

上述两种方法都能完整保留<body>标签及其样式属性，解决邮件预览的显示异常问题。

内容的提问来源于stack exchange，提问作者clarkk