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

【问题标题】：Handing multiple email HTMLs in a single page在单个页面中处理多个电子邮件 HTML
【发布时间】：2019-11-18 06:39:46
【问题描述】：

我们正在实施电子邮件支持应用程序。与任何其他支持应用程序一样，客户可以在一个线程或链中发送多封电子邮件。该链还可以包括代理的回复，代理正在解决案件。在这种情况下，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 结构冲突的任何建议都会有所帮助。

【问题讨论】：

也许您需要更改每个显示的电子邮件中的所有 css 代码，以仅适用于该 div/iframe。在 iframe 上设置 ID，并将所有 css 更改为 iframe#email1 正文, iframe#email1 td 等，因此它不会更改您父视图中的任何内容

标签： javascript jquery html css html-email

【解决方案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> 标签包含诸如“此电子邮件接受深色模式”或“此电子邮件仅接受浅色模式”之类的说明 - 如果您认为需要对它们做任何事情，则需要相应地进行解释。对于第一个版本，您也许可以安全地忽略它们（删除它们）。

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

为了安全和不干扰，需要去掉<script>标签。

对于移动设备，我注意到有某种响应性检测，如果电子邮件没有响应，电子邮件软件会添加类似 transform: scale (0.xx) 到外包装（s ) 使其适合。随心所欲地处理。

【讨论】：

是否有任何可用的库可以帮助我们实现这一目标。只是在寻找捷径:)
我不确定您的整体工作流程，但虽然它是一个字符串，但很难将正则表达式用于此类事情。人们会告诉你，有充分的理由，正则表达式无法解析 HTML。但是，你也许可以用它做这些简单的事情。所以，显然，不是图书馆——但可能更容易。或者，如果您可以将 jQuery 加载到 DOM 中并随后进行更改，然后重新保存为字符串，则 jQuery 可以轻松完成此操作。