指定iframe的内容而不是页面的src [英] Specifying content of an iframe instead of the src to a page
问题描述
我目前正在研究一种形式，除了表单的所有常规字段之外，还有用于上传图片的文件输入，它们将图片提交给iframe，然后将上传的图片加载到带有字段的表单中为他们修改（如名称和地理定位）。由于我无法嵌套窗体，因此file_input也包含在iframe中，因此最终我在iframe中使用了iframe。所以示意性的，我有这样的东西：
< form>
<！ - - 很多场！ - >
< iframe src =file_input_url>
<！ - 使用文件输入加载表单页面的iframe - >
< / iframe>
< / form>
并且在iframe中加载的html类似于（忽略html，头和身体标记） p>
< form target =upload_iframe>
< input type =fileonchange =this.form.submit（）>
< / form>
< iframe name =upload_iframe>< / iframe>
这很好，除了加载第一个iframe需要几秒钟，所以文件输入不会与页面的其余部分一起加载，并且在视觉上不理想。我可以解决这个问题，如果可以指定iframe内容而无需加载其他页面（由第一个iframe中的'file_input_url'指定）。
所以，我的问题是，有没有办法在同一个文档中指定iframe的内容，或只能用src属性来指定，因此需要加载另一个页面？
您可以将内容写入iframe文档。例如：
< iframe id =FileFramesrc =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>
I'm currently working on a form which besides all of the normal fields of a form, also has file inputs to upload pictures, which onchange submits the picture to an iframe, then dinamically loads the uploaded picture 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, so in the end I use an iframe inside of an iframe. So schematically, 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 in the iframe is something like (ignoring 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 that it takes a couple of seconds to load the first iframe, so the file input does not load with the rest of the page and is visually not ideal. I could solve this if it would be possible to specify the iframe content without needing to load another page (specified by 'file_input_url' in the first iframe).
So, my question is, is there a way to specify the iframe content in the same document, or can it only be speficied with the src attribute, so loading another page is required?
You can write the content to 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屋！
