【问题标题】: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 &lt;body&gt; 内容。更好的是,大多数邮件客户端都支持它。使用 text/html 的内容类型,您可以发送 HTML 邮件,就好像它将成为 HTML &lt;body&gt; 的一部分一样。

<p>email</p>

这样你就可以进行预览了

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

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

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

【讨论】:

  • 嘿,这也是个好主意——但你必须转义(并重新转义)正在编写的 HTML。您可以将相同的逻辑应用于 IFRAME。
【解决方案2】:

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

这将只留下电子邮件的正文内容。只要电子邮件在&lt;html&gt;&lt;body&gt; 之间没有任何内容,例如&lt;head&gt; 部分,这将起作用。

【讨论】:

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

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

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

【讨论】:

  • 这就是我要说的。唯一的问题是您不能“内联”&lt;iframe&gt;&lt;/iframe&gt; 标签之间的内容,这意味着要么是仅 JavaScript 的解决方案(不是一个好主意),要么是额外的页面。
  • @Andy 是的。但是,如果这些电子邮件包含任何内联图像,他可能不得不使用额外的页面——他也必须从邮件中提取这些图像,并放入单独的文件中。不过,在他的场景中,这可能不是必需的,它是一个预览功能。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2012-05-21
  • 2017-05-26
  • 2012-03-11
  • 2014-07-10
  • 2014-12-11
  • 1970-01-01
  • 2014-05-25
相关资源
最近更新 更多