{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Deceive 欺骗 的问题《Specifying content of an iframe instead of the src》','https://www.manongdao.com/q-72832.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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 use
data:URL in thesrc:Difference between srcdoc=“…” and src=“data:text/html,…” in an iframe.
Convert HTML to data:text/html link using JavaScript.
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.You can write the content to the iframe document. Example:
iframe now supports srcdoc which can be used to specify the HTML content of the page to show in the inline frame.