指定一个iframe的内容而不是一个页面的src
我目前正在处理一个窗体，除了表单的所有常规字段之外，还有文件input来上传图片，然后将图片提交给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是类似的（忽略HTML，头和身体标签）
<form target="upload_iframe"> <input type="file" onchange="this.form.submit()"> </form> <iframe name="upload_iframe"></iframe>
这很好，除了加载第一个iframe需要几秒钟，所以文件input不会加载页面的其余部分，并且在视觉上不是理想的。 我可以解决这个问题，如果可以指定iframe内容而不需要加载另一个页面（由第一个iframe中的'file_input_url'指定）。
所以，我的问题是，有没有办法在同一个文档中指定iframe内容，还是只能用src属性来指定，所以需要加载另一个页面？
您可以将内容写入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>
iframe现在支持srcdoc ，它可以用来指定要在内联框架中显示的页面的HTML内容。
你可以在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>
结合Guffa所描述的，您可以使用<script type =“text / template”> … </ script>的解释中描述的技术将HTML文档存储在特殊的script元素中（请参阅链接以获取解释这是如何工作的）。 这比将HTML文档存储在string中容易得多。
