How to add HTML into an iframe

Using srcdoc to add inline HTML into an iframe

The most common use for iframes is to embed an external resource in your page, for example a social media post or video.

There are times when you will want to add your own HTML. This is where the srcdoc attribute comes into play

srcdoc allows you to specify inline HTML to embed.

The following code will create an iframe with an h1 with the text “test”;

  <iframe srcdoc="<!DOCTYPE html><h1>test</h1>">

If the browser doesn’t support srcdoc it will fall back to using the src attribute.

To do the same with JavaScript, we would do;

  const iframe = document.createElement("iframe");
  iframe.srcdoc = `<!DOCTYPE html><h1>test</h1>`;

We found this useful on a recent project where the client wanted to preview some HTML without using a third party tool.


Recent posts View all

Ruby

Forcing a Rails database column to be not null

How you can force a table column to always have something in it with Rails

Writing Marketing

We've deleted an article's worth of unhelpful words

We've improved several pages across our site by removing words that add no value, and often detract from the article.