可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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?

回答1:

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>

回答2:

iframe now supports srcdoc which can be used to specify the HTML content of the page to show in the inline frame.

回答3:

You can use data: URL in the 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.

Convert HTML to data:text/html link using JavaScript.

回答4:

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 script element (see the link for an explanation on how this works). That's a lot easier than storing the HTML document in a string.