我目前正在开发一个表单,其中包括一些上传图片的文件输入。对于这些输入,有一个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
属性指定,需要加载另一个页面?
发布于 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>
发布于 2015-08-29 04:31:20
iframe现在支持srcdoc,它可以用来指定要在内联框架中显示的页面的HTML内容。
发布于 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。
https://stackoverflow.com/questions/4199458
复制相似问题