在单个页面中处理多个电子邮件 HTML

Question

我们正在实施电子邮件支持应用程序。与任何其他支持应用程序一样，客户可以在线程或链中发送多封电子邮件。此链还可以包括来自正在解决案例的代理的回复。在这种情况下，HTML 显示的结构如下，

<html>
<head>
</head>
<body>
    <div>
         EMAIL 1 - This has it's entire HTML content. Including Body css etc etc.
    </div>   
    <div>
         EMAIL 2 - This has it's entire HTML content. Including Body css etc etc.
    </div>
    <div>
    </div>
</body>
</html>

我们面临的问题是这些电子邮件带有自己的 HTML 内容。在许多情况下，这会导致与我们的 HTML 结构或 CSS 或两者发生冲突。导致页面结构中断或 CSS 未显示。

我们尝试将这些单独的邮件放在 iframe 中，但这会导致页面加载变得非常缓慢或在线程中有多个电子邮件时没有响应。

<iframe id="html_content" style="overflow:hidden;" scrolling="no" frameborder="0" width="100%"  onload="this.height=this.contentWindow.document.body.offsetHeight+20 + 'px';"  srcdoc="<div>{{htmlContent}}</div>"></iframe>

关于如何最好地处理此问题并减少与我们的页面 css 或 html 结构的冲突的任何建议都会有所帮助。

Answer 1

您需要像 Gmail 等所做的那样，在将代码插入页面之前修改代码。

您可以通过在强大的电子邮件客户端中查看输出代码来对他们的电子邮件进行逆向工程。（有关 Gmail 源代码，请参阅 https://webapps.stackexchange.com/questions/33926/can-i-view-the-html-source-of-an-email-sent-to-my-gmail-address。）

为了避免 CSS 冲突，您基本上需要为所有传入的 CSS 类添加前缀。

为避免 HTML 冲突，您需要禁止某些属性（或只允许某些属性）。例如，您不会想要固定定位。绝对定位可能需要您的包装 div 相对定位。

您需要将 <body> 标签更改为 <div>。

您需要在解释完 <html> 标签和 <meta> 标签后删除它们。 IE。一些 <meta> 标签包含诸如 "this email accepts dark mode" 或 "this email only accepts light mode" 之类的说明 - 如果您认为需要对它们进行任何操作，则需要相应地进行解释。对于第一个版本，您可以安全地忽略它们（删除它们）。

您可能想要插入延迟加载功能，以便一次只加载某些内容 - 特别是图像和其他资产（尽管通常期望外部样式表被剥离，因为您无法确保它们不会' t干扰）。

为了安全和不干扰，您需要删除 <script> 个标签。

对于手机，我注意到有某种检测响应能力的方法，如果电子邮件没有响应，电子邮件软件会添加类似 transform:scale (0.xx) 的东西外包装纸，使其适合。随心所欲地处理。

在单个页面中处理多个电子邮件 HTML

Handing multiple email HTMLs in a single page

html

javascript

css

jquery

html-email