指定 iframe 的内容而不是页面的 src 属性 [英] Specifying content of an iframe instead of the src attribute to a page
问题描述
我目前正在处理一个表单，其中包含一些用于上传图片的文件输入.对于那些将图片提交到 iframe 的输入，有一个 onchange() 事件，然后将上传的图片动态加载到表单中，并为它们修改字段(比如名称和地理定位).
由于我不能嵌套表单，file_input 也包含在 iframe 中.最后，我在另一个 iframe 中使用了一个 iframe.所以我有这样的事情:
和加载到 iframe 的 HTML 是类似的(不包括 html、head 和 body 标签)
这很好用，除了加载第一个 iframe 需要几秒钟的时间，因此文件输入不会与页面的其余部分一起加载.这在视觉上并不理想.如果我可以指定 iframe 内容而不需要加载另一个页面(由第一个 iframe 中的 file_input_url 指定)，我就可以解决它.
有没有办法在同一个文档中指定iframe的内容，或者只能用src属性指定，需要加载另一个页面?
您可以将内容.write() 写入 iframe 文档中.示例:
<iframe id="FileFrame" src="about:blank"></iframe><script type="text/javascript">var doc = document.getElementById('FileFrame').contentWindow.document;文档.open();doc.write('<html><head><title></title></head><body>Hello world.</body></html>');doc.close();I'm currently working on a form which includes some file inputs to upload pictures. There is an onchange() event for those inputs that submits the pictures to an iframe, then dynamically loads the uploaded pictures into the form, with fields to be modified for them (like name and geo-localization).
Since I can't nest forms, the file_input is also contained in an iframe. In the end I use an iframe inside of another iframe. So I have something like this:
<form>
<!-- LOTS OF FIELDS!! -->
<iframe src="file_input_url">
<!-- iframe which loads a page of a form with a file input-->
</iframe>
</form>
and the HTML loaded into the iframe is something like (excluding the html, head and body tags)
<form target="upload_iframe">
<input type="file" onchange="this.form.submit()">
</form>
<iframe name="upload_iframe"></iframe>
This works great, except for the fact that it takes a couple seconds to load the first iframe, so the file input does not load with the rest of the page. This is not visually ideal. I could solve it if I could specify the iframe content without needing to load another page (specified by file_input_url in the first iframe).
Is there a way to specify the iframe content in the same document, or can it only be specified with the src attribute, requiring the load of another page?
You can .write() the content into the iframe document. Example:
<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 的内容而不是页面的 src 属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
