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

Posted 2023-02-16

【中文标题】如何在 iframe 的“srcdoc”属性中设置 HTML 代码？

【英文标题】：How to set HTML code in "srcdoc" attribute of iframe?

【发布时间】：2016-01-25 03:38:34

【问题描述】：

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

如下图所示，我在div#email_content 中使用 iframe 来显示电子邮件内容的精确预览。我正在尝试使用 srcdoc 属性在 iframe 中加载电子邮件内容。这里的电子邮件内容可能是通过 CkEditor 设计的纯文本或 html 内容。我尝试使用转义、htmlentities 等。但是 srcdoc 属性中断，因为该属性值包含纯 HTML 代码和引号。

任何变通方法都将被接受。

谢谢！

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

【问题讨论】：

发布了一些东西，但如果它破坏了您的 html，那么您需要提供一个示例 HTML，它会破坏

避免htmlentities！它更慢并且输出会更大，因为您不需要替换 srcdoc 的 every 特殊字符，只需引号即可。使用str_replace 的另一个答案更加更有效率。

htmlentities() 也没有解决 srcdoc 字符串中 double 转义 & 符号的需要。

【参考方案1】：

根据HTML5 specification for <iframe>，我们需要用HTML实体替换srcdoc字符串中的quotes和ampersands：

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

注意引号必须被转义的方式（否则 srcdoc 属性会过早结束），以及沙盒内容中提到的原始 & 符号（例如在 URL 或散文中）必须是双重的 转义 - 一次是为了在最初解析 srcdoc 属性时保留 & 符号，再一次是为了防止在解析沙盒内容时误解 & 符号。

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

$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>

请注意，Internet Explorer 中的 HTML5 srcdoc 功能是 not available。 Edge 从版本 79（2020 年 1 月）开始支持 srcdoc。电子邮件客户端的支持会更低。

【讨论】：

今天，Microsoft Edge (Chromium) 支持 srcdoc developer.microsoft.com/en-us/microsoft-edge/status/…

使用这个替换代码对我来说不太好用，因为它出于某种原因添加了两个双引号，尽管从 srcdoc 中可以看出应该只包含一个。这在src 和href 属性内部尤其令人讨厌，因为它会弄乱路径。 --- 对我有用的是在 srcdoc 中为 html 元素属性使用单引号，例如。 <script src='path.js'>.

【参考方案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/