Specifying content of an iframe instead of the src attribute to a page
HtmlIframeHtml Problem Overview
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?
Html Solutions
Solution 1 - Html
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>
Solution 2 - Html
iframe now supports srcdoc which can be used to specify the HTML content of the page to show in the inline frame.
Solution 3 - Html
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.
Solution 4 - Html
In combination with what Guffa described, you could use the technique described in
https://stackoverflow.com/questions/4912586/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.