How To Create An Iframe and Populate It With Dynamic HTML In Javascript

At work recently, I had a use-case where I needed to show a preview of some HTML dynamically sent from the server inside of an iFrame.

It is quite possible before you found this blog post, you found a solution that looked something like this:

iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);

This will work for simple HTML and instances where the HTML isn’t overly long. But, if your use-case is like mine, the HTML the server is returning is massive. In my case, I had base64 encoded images making the returned HTML huge.

The above solution will not work for overly large strings. The solution is to create a blob of type text/html and pass in the HTML. Finally, use createObjectUrl and pass it to the source of the iFrame.

const iframeContainer = document.querySelector('#container');
const iframe = document.createElement('iframe');

iframe.frameBorder = 'none';

const finalHtml = \`

  ${html}
\`;

const blob = new Blob([finalHtml], {type: 'text/html'});

iframe.src = window.URL.createObjectURL(blob);

iframeContainer.innerHTML = '';
iframeContainer.appendChild(iframe);

This will work for overly large strings. It will also work for special characters and any weird caveats of the string approach above, which will not always work.