如何在iframe的“srcdoc”属性中设置HTML代码？

Question

<div id="email_content">
<iframe srcdoc="{$email_content}"></iframe>
</div>

如下图所示，我正在使用iframe在

中显示电子邮件内容的精确预览。 我正试图使用srcdoc属性在iframe中加载电子邮件内容。 在这里，电子邮件内容可能是纯文本或通过CkEditor设计的HTML内容。 我尝试使用escape、htmlentities等方法。 但是，由于属性值包含纯HTML代码和引号，导致srcdoc属性出现问题。

任何解决方法都会被接受。

谢谢！

注意：我不想在这里使用src属性。

- aagjalpankaj

---

发布了一些内容，但如果它破坏了你的HTML，则需要提供一个导致问题的HTML示例。 - Tarun Lalwani

避免使用 htmlentities！它速度较慢，输出结果会更大，因为你不需要替换每个特殊字符以用于 srcdoc，只需替换引号即可。另一个使用 str_replace 的答案效率要高得多。 - mr_carrera

htmlentities()也不能解决在srcdoc字符串中双重转义和号(&)的需求。 - Cy Rossignol

Answer 1

根据 HTML5规范中的<iframe>，我们需要用HTML实体替换srcdoc字符串中的引号和和符号：

在HTML语法中，作者只需记得使用"""（U+0022）字符包装属性内容，然后转义所有"""（U+0022）和U+0026 AMPERSAND（&）字符，并指定沙盒属性，以确保嵌入内容的安全性。

请注意引号必须被转义（否则srcdoc属性将会提前结束），并且沙盒内容中提到的原始和符号（例如在URL或散文中）必须双重转义——一次是为了在最初解析srcdoc属性时保留和符号，再一次是为了防止在解析沙盒内容时误解和符号。

我们可以使用str_replace()在PHP中实现这一点：

$srcdoc = '<div id="foo">"Contains quoted text."</div>';
$escaped = str_replace([ '"', '&' ], [ '&quot;', '&amp;amp;' ], $srcdoc);

上面显示的&符号替换并非打印错误。该代码生成：

<div id=&quot;foo&quot;>&quot;Contains quoted text.&quot;</div>

然后，我们可以使用转义后的值作为srcdoc属性的值：

<div id="email_content">
    <iframe sandbox srcdoc="<div id=&quot;foo&quot;>&quot;Contains quoted text.&quot;</div>"></iframe>
</div>

请注意，HTML5的srcdoc功能在Internet Explorer中不可用。Edge自版本79（2020年1月）起支持srcdoc。电子邮件客户端的支持甚至更低。

- Cy Rossignol

---

今天，srcdoc在Microsoft Edge（Chromium）中得到支持 https://developer.microsoft.com/zh-cn/microsoft-edge/status/iframesrcdocattribute/ - Sarah Trees

使用这个替换代码对我来说并不完全有效，因为由于某种原因它添加了两个双引号，尽管从srcdoc中可以看到只应该包含一个。 在src和href属性内部特别让人恼火，因为它会破坏路径。

对我有效的方法是在srcdoc内使用单引号作为html元素属性，例如<script src='path.js'>。 - ado387

Answer 2

您需要在php中使用htmlentities方法。

<?php
$str = '<a href="https://www.tarunlalwani.com">Go to tarunlalwani.com</a>';
echo htmlentities($str);
?>

然后将其分配给srcdoc。它的效果如下所示JSFiddle链接：https://jsfiddle.net/zpx8qw1b/1/

- Tarun Lalwani