Specifying content of an iframe instead of the src attribute to a page

Question

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    lt form gt   lt  -- LOTS OF FIELDS   -- gt   lt iframe src  file input url  gt   lt  -- iframe which loads a page of a form with a file input-- gt   lt  iframe gt   lt  form gt    and the HTML loaded into the iframe is something like  excluding the html  head and body tags    lt form target  upload iframe  gt   lt input type  file  onchange  this form submit    gt   lt  form gt   lt iframe name  upload iframe  gt  lt  iframe gt    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

User · Answer

You can use data  URL in the src    x000D   x000D  var html    Hello from  lt img src  http   stackoverflow com favicon ico  alt  SO  gt    x000D  var iframe   document querySelector  iframe    x000D  iframe src    data text html     encodeURIComponent html   x000D   lt iframe gt  lt  iframe gt  x000D   x000D   x000D    Difference between srcdoc           and src    data text html        in an iframe   Convert HTML to data text html link using JavaScript

User · Answer

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

User · Answer

You can  write   the content into the iframe document  Example    lt iframe id  FileFrame  src  about blank  gt  lt  iframe gt    lt script type  text javascript  gt     var doc   document getElementById  FileFrame   contentWindow document     doc open       doc write   lt html gt  lt head gt  lt title gt  lt  title gt  lt  head gt  lt body gt Hello world  lt  body gt  lt  html gt        doc close     lt  script gt

User · Answer

In combination with what Guffa described  you could use the technique described in Explanation of  lt script type    quot text template quot  gt       lt  script gt  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

[html] Specifying content of an iframe instead of the src attribute to a page

Examples related to html

Examples related to iframe