Html 指定 iframe 的内容而不是页面的 src 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4199458/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Specifying content of an iframe instead of the src attribute to a page
提问by orlox
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 nameand geo-localization).
我目前正在处理一个表单，其中包含一些用于上传图片的文件输入。onchange()这些输入有一个事件，将图片提交到iframe，然后将上传的图片动态加载到表单中，并为它们修改字段（如名称和地理定位）。
Since I can't nest forms, the file_inputis also contained in an iframe. In the end I use an iframeinside of another iframe. So I have something like this:
由于我无法嵌套表单，因此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>
and the HTML loaded into the iframeis something like (excluding the html, headand bodytags)
加载到 中的 HTMLiframe类似于（不包括html,head和body标签）
<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 iframecontent without needing to load another page (specified by file_input_urlin the first iframe).
这很好用，除了加载第一个需要几秒钟的时间iframe，因此文件输入不会与页面的其余部分一起加载。这在视觉上并不理想。如果我可以指定iframe内容而不需要加载另一个页面（file_input_url在第一个中指定），我可以解决它iframe。
Is there a way to specify the iframecontent in the same document, or can it only be specified with the srcattribute, requiring the load of another page?
有没有办法iframe在同一个文档中指定内容，还是只能用src属性指定，需要加载另一个页面？
回答by Guffa
You can .write()the content into the iframe document. Example:
您可以.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>
回答by Ayush Gupta
回答by user
You can use data:URL in the src:
您可以data:在以下位置使用URL 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.
iframe 中 srcdoc="..." 和 src="data:text/html,..." 之间的区别。
回答by ximo
In combination with what Guffa described, you could use the technique described in
Explanation of <script type = "text/template"> ... </script>to store the HTML document in a special scriptelement (see the link for an explanation on how this works). That's a lot easier than storing the HTML document in a string.
结合 Guffa 描述的内容，您可以使用Explanation of <script type = "text/template"> ... </script> 中描述的技术将
HTML 文档存储在特殊script元素中（请参阅有关解释的链接这是如何工作的）。这比将 HTML 文档存储在字符串中要容易得多。
