为页面指定iframe的内容，而不是src属性
为页面指定iframe的内容，而不是src属性
提问于 2010-11-17 05:59:56
我目前正在开发一个表单，其中包括一些上传图片的文件输入。对于这些输入，有一个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、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属性指定，需要加载另一个页面？
回答 4
Stack Overflow用户
发布于 2010-11-17 06:08:49
您可以将内容.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>Stack Overflow用户
发布于 2015-08-29 04:31:20
iframe现在支持srcdoc，它可以用来指定要在内联框架中显示的页面的HTML内容。
Stack Overflow用户
发布于 2017-07-10 04:22:59
您可以在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);<iframe></iframe>
Difference between srcdoc=“…” and src=“data:text/html,…” in an iframe。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4199458
复制相关文章
相似问题