HTML 内的 HTML 相互影响答案

【问题标题】：HTML inside HTML affecting each otherHTML 内的 HTML 相互影响
【发布时间】：2012-04-20 22:31:56
【问题描述】：

我查看了其他一些针对我的问题的建议，主要建议只是使用 iframe...

但是！我不想使用 iframe。无论如何要解决这个问题：

本质上，我正在为 PHP 的大学团队项目制作一个基于 Web 的电子邮件客户端，并且在 HTML 电子邮件方面遇到了一些问题......在最终正确处理电子邮件之后，我一直在查看一些电子邮件并遇到了一、邮件的背景影响了网站body标签的背景颜色……

我查看了原始邮件正文，它就像一个普通的 HTML 文件，电子邮件中的正文标签上有一些 CSS 样式（包括背景颜色），因此不知何故电子邮件中的正文样式正在应用于我的页面正文...

基本上，我需要知道的是，除了使用 iframe 之外，是否还有其他方法可以阻止代码影响包含消息正文的 div 之外的任何内容...

谢谢！

【问题讨论】：

【解决方案1】：

我会说不——或者没有好办法。我刚刚检查了雅虎邮件，他们也在使用 iframe 来处理电子邮件。我想他们有更多的时间来考虑它:-)

【讨论】：

【解决方案2】：

基本上，我需要知道的是，除了使用 iframe 来阻止代码影响包含消息正文的 div 之外的任何内容之外，是否还有其他方法...

当然，您可以使用 javascript 编写自己的 HTML 解析器，将输出呈现到画布上（例如 htmlcanvas）。好吧，如果你有太多时间;)

实际上 iframe 对我来说看起来更实用。否则将 HTML 电子邮件转换为纯文本电子邮件。这些很容易显示（您可以提供在新选项卡中显示 HTML 内容）。

【讨论】：

【解决方案3】：

我其实已经很清楚了，这可能对其他人有帮助，所以！

我更深入地研究了 gmail 是如何做到的......他们实际上将 body 标签转换为 div 标签......

$body = str_replace(array("<body ","</body>"),array("<div ","</div>"),$body);

我还使用了一些正则表达式从电子邮件中删除了 head、html 和 doctype 部分，我仍在研究这样做的任何副作用，但到目前为止，通过我测试过的所有电子邮件都没有受到影响任何事物！如果有人想要我正在使用的正则表达式，请在此处评论...

它可能不是最优雅的解决方案，但它似乎有效！

【讨论】：

【解决方案4】：

这是一个非常有趣的问题，我真的考虑过，实际上我认为我们可以使用 javascript 解决它，如下所示：

<html>
  <head></head>
  <body>
    <div id='email'>
      <!--here we the HTML code of the new page should be placed-->
    </div>
  </body>
</html>

如果我们要放置的代码是相同的代码

<html>
  <head></head>
  <body>
    Hi it's me
  </body>
</html>

然后我们可以得到邮件里面的代码，删除HTML标签和head,body标签：

var email = document.getElementById('email').innerHTML();

希望这有帮助......祝你好运

【讨论】：