Creating an iframe with given HTML dynamically

Question

I m trying to create an iframe from JavaScript and fill it with arbitrary HTML  like so   var html     lt body gt Foo lt  body gt    var iframe   document createElement  iframe    iframe src    data text html charset utf-8     encodeURI html     I would expect iframe to then contain a valid window and document  However  this isn t the case        console log iframe contentWindow     null   Try it for yourself  http   jsfiddle net TrevorBurnham 9k9Pe   What am I overlooking

User · Answer

The URL approach will only work for small HTML fragements  The more solid approach is to generate an object URL from a blob and use it as a source of the dynamic iframe   const html     lt html gt     lt  html gt    const iframe   document createElement  iframe    const blob   new Blob  html    type   text html     iframe src   window URL createObjectURL blob   document body appendChild iframe

User · Answer

Allthough your src   encodeURI should work  I would have gone a different way   var iframe   document createElement  iframe    var html     lt body gt Foo lt  body gt    document body appendChild iframe   iframe contentWindow document open    iframe contentWindow document write html   iframe contentWindow document close      As this has no x-domain restraints and is completely done via the iframe handle  you may access and manipulate the contents of the frame later on  All you need to make sure of is  that the contents have been rendered  which will  depending on browser type  start during after the  write command is issued - but not nescessarily done when close   is called   A 100  compatible way of doing a callback could be this approach    lt html gt  lt body onload  parent myCallbackFunc this window   gt  lt  body gt  lt  html gt    Iframes has the onload event  however  Here is an approach to access the inner html as DOM  js    iframe onload   function        var div iframe contentWindow document getElementById  mydiv

User · Answer

Thanks for your great question  this has caught me out a few times  When using dataURI HTML source  I find that I have to define a complete HTML document   See below a modified example    var html     lt html gt  lt head gt  lt  head gt  lt body gt Foo lt  body gt  lt  html gt    var iframe   document createElement  iframe    iframe src    data text html charset utf-8     encodeURI html     take note of the html content wrapped with  lt html gt  tags and the iframe src string   The iframe element needs to be added to the DOM tree to be parsed    document body appendChild iframe     You will not be able to inspect the iframe contentDocument unless you disable-web-security on your browser  You ll get a message     DOMException  Failed to read the  contentDocument  property from  HTMLIFrameElement   Blocked a frame with origin  http   localhost 7357  from accessing a cross-origin frame

User · Answer

Setting the src of a newly created iframe in javascript does not trigger the HTML parser until the element is inserted into the document  The HTML is then updated and the HTML parser will be invoked and process the attribute as expected    http   jsfiddle net 9k9Pe 2   var iframe   document createElement  iframe    var html     lt body gt Foo lt  body gt    iframe src    data text html charset utf-8     encodeURI html   document body appendChild iframe   console log  iframe contentWindow     iframe contentWindow     Also this answer your question it s important to note that this approach has compatibility issues with some browsers  please see the answer of  mschr for a cross-browser solution

User · Answer

There is an alternative for creating an iframe whose contents are a string of HTML  the srcdoc attribute   This is not supported in older browsers  chief among them  Internet Explorer  and possibly Safari    but there is a polyfill for this behavior  which you could put in conditional comments for IE  or use something like has js to conditionally lazy load it

User · Answer

Do this      var el   document getElementById  targetFrame     var frame win   getIframeWindow el    console log frame win         getIframeWindow is defined here  function getIframeWindow iframe object      var doc     if  iframe object contentWindow        return iframe object contentWindow         if  iframe object window        return iframe object window          if   doc  amp  amp  iframe object contentDocument        doc   iframe object contentDocument          if   doc  amp  amp  iframe object document        doc   iframe object document         if  doc  amp  amp  doc defaultView       return doc defaultView         if  doc  amp  amp  doc parentWindow        return doc parentWindow         return undefined

User · Answer

I know this is an old question but I thought I would provide an example using the srcdoc attribute as this is now widely supported and this is question is viewed often   Using the srcdoc attribute  you can provide inline HTML to embed  It overrides the src attribute if supported  The browser will fall back to the src attribute if unsupported   I would also recommend using the sandbox attribute to apply extra restrictions to the content in the frame  This is especially important if the HTML is not your own    x000D   x000D  const iframe   document createElement  iframe    x000D  const html     lt body gt Foo lt  body gt    x000D  iframe srcdoc   html  x000D  iframe sandbox       x000D  document body appendChild iframe   x000D   x000D   x000D    If you need to support older browsers  you can check for srcdoc support and fallback to one of the other methods from other answers    x000D   x000D  function setIframeHTML iframe  html    x000D    if  typeof iframe srcdoc      undefined     x000D      iframe srcdoc   html  x000D      else   x000D      iframe sandbox    allow-same-origin   x000D      iframe contentWindow document open    x000D      iframe contentWindow document write html   x000D      iframe contentWindow document close    x000D      x000D    x000D   x000D  var iframe   document createElement  iframe    x000D  iframe sandbox       x000D  var html     lt body gt Foo lt  body gt    x000D   x000D  document body appendChild iframe   x000D  setIframeHTML iframe  html   x000D   x000D   x000D

[javascript] Creating an iframe with given HTML dynamically

Examples related to javascript

Examples related to iframe