将文档字符串加载到 iframe 中答案

【问题标题】：load a document string into an iframe将文档字符串加载到 iframe 中
【发布时间】：2010-11-20 06:56:36
【问题描述】：

我有一个字符串（通过 ajax 获取），它是一个完整的 html 文档（文档类型为）。有谁知道将其加载到 iframe 中的方法？

我不能简单地在 iframe 的 src 中指定返回文档的 url，因为响应可能来自帖子，重复它可能会产生不良影响。另外，我不能第一次将它提交到 iframe，因为我不能绝对预测结果将是一个文档而不是一些 json。基本上，我不记得网址了，我必须能够使用我拥有的版本（一个字符串）。

jQuery 是公平的游戏，因为我正在使用它。

【问题讨论】：

Here's how.

标签： javascript jquery html ajax iframe

【解决方案1】：

您可以使用data URI 执行此操作。数据 URI 是一种像加载外部数据一样加载内联数据的方法。它们看起来像这样：data:<mimetype>,<data>。对于 HTML，mimetype 是 text/html，在您的情况下，数据是这样的：<!DOCTYPE><html><head><title>Iframe</title></head><body>Hi!</body></html>。如果我们把它放在数据 URI 中，我们会得到如下内容：

data:text/html,<!DOCTYPE><html><head><title>Iframe</title></head><body>Hi!</body></html>

当我们将此设置为iframe 的src 时，它看起来像这样。

var string = '<!DOCTYPE><html><head><title>Iframe</title></head><body>Hi!</body></html>',
  iframe = $('#iframe')

iframe.attr('src', 'data:text/html,' + string)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="iframe" src=""></iframe>

【讨论】：

【解决方案2】：

@LarsW 不需要使用 jQuery。例如，如果 html 字符串是驻留在文件系统中但无法从 www 访问的文件（或者您必须在 PHP 中构建它），则可以使用此 PHP 代码

$htmlText = "data:text/html;base64,".base64_encode(file_get_contents("someFolder/file.html"));
echo "<iframe src='$htmlText'></iframe>";

我遇到了没有 base64 扩展名的问题，因为 file.html 中的引号会破坏 HTML 代码。

【讨论】：

我将此答案与 html 页面的 PHP 字符串一起使用。该 html 页面字符串包含单引号和双引号的混合，因此整个页面都正确显示。使用 base64 使它适用于我的情况。谢谢。