为页面指定 iframe 的内容而不是 src 属性答案

【问题标题】：Specifying content of an iframe instead of the src attribute to a page为页面指定 iframe 的内容而不是 src 属性
【发布时间】：2011-05-11 02:40:44
【问题描述】：

我目前正在制作一个表单，其中包含一些用于上传图片的文件输入。对于那些将图片提交到iframe 的输入，有一个onchange() 事件，然后将上传的图片动态加载到表单中，并为它们修改字段（如 name 和 地理定位）。

由于我不能嵌套表单，file_input 也包含在 iframe 中。最后，我在另一个iframe 中使用了iframe。所以我有这样的事情：

<form>
<!-- LOTS OF FIELDS!! -->
<iframe src="file_input_url">
<!-- iframe which loads a page of a form with a file input-->
</iframe>
</form>

加载到iframe 中的HTML 类似于（不包括html、head 和body 标签）

<form target="upload_iframe">
<input type="file" onchange="this.form.submit()">
</form>
<iframe name="upload_iframe"></iframe>

这很好用，除了加载第一个iframe 需要几秒钟的时间，因此文件输入不会与页面的其余部分一起加载。这在视觉上并不理想。如果我可以指定iframe 内容而不需要加载另一个页面（由第一个iframe 中的file_input_url 指定），我可以解决它。

有没有办法在同一个文档中指定iframe的内容，还是只能用src属性指定，需要加载另一个页面？

【问题讨论】：

加载该 iframe 不应花费“几秒钟”的时间。我希望它更像是十分之一毫秒加上“咬咬时间”（也应该是毫秒）。您应该调查导致所有延迟的原因 - 可能是您的服务器出了问题。
还有一种奇怪的方式<iframe src="javascript:parent._renderMe()"></iframe>和js中：function _renderMe() {return String(Math.random()}

标签： html iframe

【解决方案1】：

您可以将.write() 的内容放入 iframe 文档中。示例：

<iframe id="FileFrame" src="about:blank"></iframe>

<script type="text/javascript">
   var doc = document.getElementById('FileFrame').contentWindow.document;
   doc.open();
   doc.write('<html><head><title></title></head><body>Hello world.</body></html>');
   doc.close();
</script>

【讨论】：

曾考虑过这种可能性，但是，必须加载到 iframe 中的 html 很复杂，并且完全在 javascript 中处理它以便将其写入 iframe 会过于模糊实现（直到我更愿意保持原样）。
@orlox：使用 Ajax 从服务器获取内容并注入。如果您不想这样做，请使用您的内容制作一个隐藏的div 元素，并将其内容放在<body> 和</body> 之间的iframe 中。
对 iframe 限制了解得越多，我就越讨厌它们
如何使用这种方法转义单引号？其中一些是 HTML 重要的（例如 class='example'），一些是 CSS 重要的（例如 font-family: 'Verdana';），还有一些是内容（例如 George O'Malley）。
@Dan：要转义要在撇号分隔的 JavaScript 字符串中使用的任何值，您首先转义反斜杠，然后转义撇号。例如使用C#在代码中输出一个字符串：doc.write('<%= html.Replace("\\", "\\\\").Replace("'", "\\'") %>');.

【解决方案2】：

结合 Guffa 描述的内容，您可以使用中描述的技术 Explanation of <script type = "text/template"> ... </script> 将 HTML 文档存储在特殊的 script 元素中（有关其工作原理的说明，请参阅链接）。这比将 HTML 文档存储在字符串中要容易得多。

【讨论】：

再想一想，这对于完整的 HTML 文档来说效果并不好。 <html>、<body>、<script> 等标签只会混淆浏览器，破坏文档的呈现。
这似乎不是问题，脚本中的 HTML 标签被忽略了。
你是对的 :) 当我写这篇文章时，我还没有真正尝试过这种技术，而且一定是从某个地方接受了这个假设。后来我发现<script> 标签中的任何内容都会被浏览器忽略。感谢您纠正我！
您可以将内容包含在 iframe 本身中，例如<iframe id="my-frame"><html><body><b>Hello!</b></body></html></iframe><script type="text/javascript"> var iframe = document.getElementById("my-frame") iframe.setAttribute("srcdoc", iframe.innerHTML) </script>

【解决方案3】：

iframe 现在支持srcdoc，可用于指定页面的 HTML 内容以显示在内嵌框架中。

【讨论】：

IE 不支持此权限，但您可以查看caniuse 以获取其最新状态。
Documentation on MDN

【解决方案4】：

您可以在src 中使用data: URL：

var html = 'Hello from <img src="http://stackoverflow.com/favicon.ico" alt="SO">';
var iframe = document.querySelector('iframe');
iframe.src = 'data:text/html,' + encodeURIComponent(html);

&lt;iframe&gt;&lt;/iframe&gt;

Difference between srcdoc=“…” and src=“data:text/html,…” in an iframe.

Convert HTML to data:text/html link using JavaScript.

【讨论】：

你甚至不需要任何 JavaScript：src 属性可以在转义时内联指定，例如在 PHP 中使用 rawurlencode：<iframe src="<?php echo htmlspecialchars('data:text/html,' . rawurlencode($content)); ?>"></iframe>
Microsoft 在添加对srcdoc 的支持的同时添加了对此的支持，而srcdoc 是执行此操作的更好方法。数据 URL 仅广泛支持图像和 CSS - 据我所知，没有任何 Internet Explorer 版本在 iframe 中支持它们。
src 属性没有长度限制吗？