如何在网页上预览HTML电子邮件？

Question

如何在网页上预览HTML电子邮件？

3

我想展示一封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>

- Andrew

你能解析并仅显示正文内容吗？也许可以使用jQuery加载整个电子邮件的DOM，然后选择正文标签的内容，并将它们添加到你的div中。 - Gabriele Petrioli

3个回答

1

假设标记看起来与您在帖子中展示的完全相同，您可以像这样删除标记（在从数据库获取电子邮件字段后运行此操作）：
$email = preg_replace('/\<\/?(html|body)\>/', '', $email);

这将使您只保留电子邮件的正文内容。只要电子邮件没有在<html>和<body>之间有任何内容，例如<head>部分，就可以使用此方法。

- ryeguy

好主意，为什么我没有想到呢。+1。只有在周围文档中没有CSS规则干扰邮件显示时，这才能起作用。 - Pekka

是的，我知道。如果您有额外的标记或其他可能导致失败的内容，请使用XML解析器从正文标签中提取内容，这可能是您的最佳选择。 - ryeguy

0

这样做不行，因为一个文档中不能有两个HTML结构。

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

- Pekka

这正是我要说的。唯一的问题是你不能在<iframe></iframe>标签之间“内联”内容，这意味着只能使用JavaScript解决方案（不是一个好主意）或者增加一个页面。 - Andy E

@Andy 确实如此。但是，如果这些电子邮件包含任何内联图像，他可能仍然需要使用额外的页面 - 他还需要将这些图像从邮件中提取出来，并放入单独的文件中。不过，在他的情况下可能并非必要，因为这只是一个预览功能。 - Pekka

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BalusC · Accepted Answer

您可以在弹出窗口中编写HTML。

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

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

<p>email</p>

您可以将其注入到主页面的某个div中进行预览。

如果您喜欢样式元素，但不喜欢内联样式，则还可以添加<style>元素。大多数邮件客户端也支持它。

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

从HTML纯粹主义者的角度来看，这确实是语法上无效的。但它可以工作（在Web浏览器中也可以！）并且可以大大简化事情。