Set content of iframe

Question

I have the following structure    lt div gt   lt p gt Hello World    lt  p gt   lt  div gt   lt iframe id  myiframe  src  myiframeContent html  gt  lt  iframe gt     and I have the following JavaScript variable with content   var s    lt html gt  lt head gt  lt  head gt  lt body gt  lt div gt Test Div lt  div gt  lt  body gt  lt  html gt      How can I change the content of iframe with id myiframe with variable s    I tried       myiframe   html s     Which giving me very unusual return it changes all the content of Current page to VAR S Ex   styles background etc    How can i set the content of an iframe with a variable that contain HTML       Update  1     The content of variable s follows -      lt html gt     lt head gt       lt title gt  page name  lt  title gt       lt meta name  keywords  content   page meta tags     gt       lt script src   1 js  gt  lt  script gt       lt script src   2 js  gt  lt  script gt    lt style gt     h2    color red      h1   color red     body    background-color  f0eded   color 74f503   font-family Verdana  Geneva  sans-serif   background url  getUrl        lt  style gt      lt  head gt      lt body gt      yahoo      lt div style  float right  gt  pagecomment  lt  div gt       lt div id  blogstart  style    gt         lt h1 gt My Blog lt  h1 gt         nextPrevPagination         blog          nextPrevPagination       lt  div gt       lt p gt My Page Name    page name  lt  p gt  lt br  gt       lt p gt Name of this template lt  p gt  lt br  gt       lt p gt Date started this page    page date  lt  p gt  lt br  gt       lt label gt Address lt  label gt       lt textarea gt  page address  lt  textarea gt        lt span gt Country    page country  State   page state  lt  span gt       lt p gt page City    page city  Page Pincode  page pincode  lt  p gt       lt a href  mailto  page email   gt Email me lt  a gt       page bio title  and  page bio desc       lt img src   page profile     gt       page avatar       lt p gt Contact me    page mobile     page landline   lt  p gt       lt a href  http   www facebook com  page facebook user   gt I am on Facebook lt  a gt       lt a href  http   www twitter com  page twitter user   gt  lt  a gt     lt  body gt    lt  html gt    After applying this  variable to iframe i got like this   inspected through firebug  Note that it doesnt have BODY  Head tag  but the above one  var s  have BODY tag    lt html gt          lt title gt  page name  lt  title gt       lt meta content   page meta tags   name  keywords  gt      lt style gt     h2    color red      h1   color red     body    background-color  f0eded   color 74f503   font-family Verdana  Geneva  sans-serif   background url  url        lt  style gt        yahoo      lt div style  float  right   gt  pagecomment  lt  div gt       lt div style    id  blogstart  gt         lt h1 gt My Blog lt  h1 gt         nextPrevPagination         blog          nextPrevPagination       lt  div gt       lt p gt My Page Name    page name  lt  p gt  lt br gt       lt p gt Name of this template lt  p gt  lt br gt       lt p gt Date started this page    page date  lt  p gt  lt br gt       lt label gt Address lt  label gt       lt textarea gt  page address  lt  textarea gt        lt span gt Country    page country  State   page state  lt  span gt       lt p gt page City    page city  Page Pincode  page pincode  lt  p gt       lt a href  mailto  page email   gt Email me lt  a gt       page bio title  and  page bio desc       lt img src   page profile   gt       page avatar       lt p gt Contact me    page mobile     page landline   lt  p gt       lt a href  http   www facebook com  page facebook user   gt I am on Facebook lt  a gt       lt a href  http   www twitter com  page twitter user   gt  lt  a gt     lt  html gt

User · Answer

Unified Solution   In order to work on all modern browsers  you will need two steps    Add javascript void 0   as src attribute for the iframe element  Otherwise the content will be overriden by the empty src on Firefox    lt iframe src  javascript void 0    gt  lt  iframe gt   Programatically change the content of the inner html element     iframeSelector  contents   find  html   html htmlContent      Credits      Step 1 from comment  link  by  susan      Step 2 from solutions  link1  link2  by  erimerturk and  x10

User · Answer

Using Blob  var iframe   document getElementById  quot myiframe quot    var blob   new Blob  s    type   quot text html  charset utf-8 quot     iframe src   URL createObjectURL blob

User · Answer

You want to be using the iframe s srcdoc attribute for that  MDN documentation   var html string    quot  lt html gt  lt body gt  lt h1 gt My epic iframe lt  p gt  lt  body gt  lt  html gt  quot   document querySelector  iframe   srcdoc   html string   The nice thing about using this method over for example Red s method listed on this page  is that iframe contents added with srcdoc are seen as the same-origin  That way can continue to manipulate and access the iframe with JavaScript if you wish

User · Answer

I managed to do it with  var html string   content   document getElementById  output iframe1   src    data text html charset utf-8     escape html string

User · Answer

myiframe   contents   find  html   html s      you can check from here http   jsfiddle net Y9beh

User · Answer

I needed to reuse the same iframe and replace the content each time  I ve tried a few ways and this worked for me      Set the iframe s src to about blank so that it conforms to the same-origin policy  iframeElement src    about blank       Set the iframe s new HTML iframeElement contentWindow document open    iframeElement contentWindow document write newHTML   iframeElementcontentWindow document close      Here it is as a function   function replaceIframeContent iframeElement  newHTML        iframeElement src    about blank       iframeElement contentWindow document open        iframeElement contentWindow document write newHTML       iframeElement contentWindow document close

User · Answer

Use the  contents  function       some-id   contents   find  html   html  some-html     Relevant fiddle  http   jsfiddle net fDFca

User · Answer

If you want to set an html content containg script tag to iframe  you have access to the iframe you created with     iframeElement  contentWindow document   so you can set innerHTML of any element in this   But  for script tag  you should create and append an script tag  like this   https   stackoverflow com a 13122011 4718434

User · Answer

Why not use   iframe load function          var  body      body    iframe get 0  contentWindow document        body html contentDiv         instead of timer

User · Answer

You need -   var  frame      myiframe        setTimeout  function                 var doc    frame 0  contentWindow document              var  body      body  doc                body html   lt div gt Test Div lt  div gt            1      Code taken from - putting html inside an iframe  using javascript

[javascript] Set content of iframe

Unified Solution:

Credits:

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to iframe