如何在网页上显示 HTML 电子邮件以供预览？答案

【问题标题】：How to display an HTML email for preview on a webpage?如何在网页上显示 HTML 电子邮件以供预览？
【发布时间】：2010-03-18 21:55:57
【问题描述】：

我正在尝试显示 HTML 电子邮件的“预览”。我的数据库中有 HTML，现在我需要在 iframe 或弹出窗口或其他东西中呈现它。我正在尝试将 html 注入页面上的 div 标签，但它不会显示任何内容。这是我遇到的问题（我有嵌套的 HTML 标签）：

<html>
    <body>
        <h1>My page</h1>
        <div id="email-body">
            <html>
                <body>
                    <p>email</p>
                </body>
            </html>
        </div>
    </body>
</html>

【问题讨论】：

你能解析它并只显示正文的内容吗？也许使用 jquery 来加载电子邮件的整个 DOM，然后选择 body 标记的内容并将它们添加到您的 div 中..

标签： php html email

【解决方案1】：

您可以将 HTML 写入弹出窗口。

var preview = window.open("", /* options */);
preview.document.write(html);
preview.document.close();

但和我一样，很多人不喜欢弹出窗口。另一个考虑是只显示 only <body> 内容。更好的是，大多数邮件客户端都支持它。使用 text/html 的内容类型，您可以发送 HTML 邮件，就好像它将成为 HTML <body> 的一部分一样。

<p>email</p>

这样你就可以进行预览了

如果你喜欢给元素设置样式，但不喜欢内联样式，你也可以添加<style>元素。大多数邮件客户端也只是支持它。

<style>p { font-family: arial, sans-serif; }</style>
<p>email</p>

在 HTML 纯粹主义者看来，这在语法上确实是无效的。但它可以工作（也可以在网络浏览器中使用！）并且大大简化了工作。

【讨论】：

嘿，这也是个好主意——但你必须转义（并重新转义）正在编写的 HTML。您可以将相同的逻辑应用于 IFRAME。

【解决方案2】：

假设标记看起来与您在帖子中显示的完全一样，您可以像这样剥离标签（从您的数据库中获取后在电子邮件字段上运行此代码）：
$email = preg_replace('/\<\/?(html|body)\>/', '', $email);

这将只留下电子邮件的正文内容。只要电子邮件在<html> 和<body> 之间没有任何内容，例如<head> 部分，这将起作用。

【讨论】：

好主意，我怎么没想到。 +1。但是，这只有在周围文档中没有 CSS 规则干扰邮件的呈现时才有效。
是的，我知道。 OP，如果您确实有额外的标记或其他会导致此失败的东西，那么您的下一个最佳选择是使用 XML 解析器从 body 标记中提取内容。

【解决方案3】：

这是行不通的，因为一个文档中不能有两个 HTML 结构。

我能看到的唯一方法是使用iframe。

【讨论】：

这就是我要说的。唯一的问题是您不能“内联”<iframe></iframe> 标签之间的内容，这意味着要么是仅 JavaScript 的解决方案（不是一个好主意），要么是额外的页面。
@Andy 是的。但是，如果这些电子邮件包含任何内联图像，他可能不得不使用额外的页面——他也必须从邮件中提取这些图像，并放入单独的文件中。不过，在他的场景中，这可能不是必需的，它是一个预览功能。