Question

我正在处理一个表单，除了表单的所有常规字段外，还有上传图片的文件输入，onchange将图片提交到iframe，然后将上传的图片加载到带有字段的表单中为他们修改（如名称和地理定位）。由于我无法嵌套表单，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属性来表示，所以需要加载另一个页面？

Answer 1

您可以将内容写入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>

Answer 2

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

Answer 3

您可以在data:：

中使用src网址

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);

<iframe></iframe>

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

Convert HTML to data:text/html link using JavaScript

Answer 4

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

将iframe的内容而不是src指定到页面

4 个答案: