使用 html.raw 在 razor 视图中渲染外部 Html 会扭曲页面 html答案

【问题标题】：Rendering external Html inside razor view using html.raw is distorting page html使用 html.raw 在 razor 视图中渲染外部 Html 会扭曲页面 html
【发布时间】：2020-10-30 01:21:33
【问题描述】：

我有一个外部 Html - 它实际上是一个电子邮件正文，它有 html 标签和正文，它本身就是完整的 html。我在 Bootstrap modal 中渲染它

 <div class="modal-body">
            @Html.Raw(Model.EmailBody)
            @*<iframe srcdoc="@Html.Raw(Model.EmailBody)">
            </iframe>*@
</div>

但我的页面还有其他 div 位于电子邮件正文中的某个位置，而我的 div 位于电子邮件的 html 中。

所以我尝试在 iframe 中呈现外部 html，在这种情况下，我的视图没有失真，但不知何故，电子邮件内容没有进入 iframe。当我查看 dom 时，它的显示是这样的

<iframe srcdoc="<!DOCTYPE html PUBLIC " -="" w3c="" dtd="" xhtml="" 1.0="" transitional="" en"="" "http:="" www.w3.org="" tr="" xhtml1="" xhtml1-transitional.dtd"="">  <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">       <!-- Email Header -->  <head>  <meta http-equiv="Content-Type" content="html; charset=UTF-8"></meta>   <!-- Included header file, can be cloned and/or replaced. -->    <!--[if gte mso 15]>  <xml>   <o:OfficeDocumentSettings>   <o:AllowPNG/>   <o:PixelsPerInch>96</o:PixelsPerInch>   </o:OfficeDocumentSettings>  </xml>  <![endif]-->  <meta charset="UTF-8" />  <!--[if !mso]><!-->    <meta http-equiv="X-UA-Compatible" content="IE=edge" />   <!--<![endif]-->  <meta name="viewport" content="width=device-width, initial-scale=1" />  <title></title>      <!--[if mso]>  <style type="text/css">  body, table, td {font-family: Arial, Helvetica, sans-serif !important;}  h1 {font-family: Arial, Helvetica, sans-serif !important;}  h2 {font-family: Arial, Helvetica, sans-serif !important;}  h3 {font-family: Arial, Helvetica, sans-serif !important;}  h4 {font-family: Arial, Helvetica, sans-serif !important;}  h5 {font-family: Arial, Helvetica, sans-serif !important;}  h6 {font-family: Arial, Helvetica, sans-serif !important;}  h7 {font-family: Arial, Helvetica, sans-serif !important;}  p {font-family: Arial, Helvetica, sans-serif !important;}  </style>  <![endif]-->    <!--[if gt mso 15]>  <style type="text/css" media="all">  /* Outlook 2016 Height Fix */  table, tr, td {border-collapse: collapse;}  tr {border-collapse: collapse; }  body {background-color:#ffffff;}  </style>  <![endif]-->    <!-- Title - Optional content - The title tag shows in email notifications on mobile devices -->  <title>    </title>  <style type="text/css">  p.solid {border-style: solid;border-width: 1px;padding: 5px}  button-style {background: #222222; border: 15px solid #222222; padding: 0 10px;color: #ffffff; font-family:Ember, Arial, sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;}  tablebutton {    border-collapse: separate;  border-spacing: 10px;}  </style>  </head>    <!-- Email Body --> </html>">

    </iframe>

但我看不到 html。没有或有 iframe 是否有任何其他方式可以显示我的外部电子邮件

【问题讨论】：

iframe srcdoc 中似乎没有元素，只有一个（元数据、css 等），因此没有什么可以渲染的。
它在那里我删除了它没有保持长时间的问题

标签： html asp.net asp.net-mvc razor

【解决方案1】：

我已经使用 CkEditor 完成了这项工作。在 CkEditor 中，我正在显示 html。它解决了问题，但不是很好的解决方案

【讨论】：