零弐壱蜂

[HTML] iframeのsrcdoc属性の個人的な利用方法（ユースケース）

3 min read

iframeのsrcdoc属性とは

iframeのsrcにURLを指定することで外部ページをiframe内に表示させる手法がiframeの一般的な利用方法である。

<iframe src="https://example.com"></iframe>

srcdoc属性を利用することで（文字列を指定）、iframe内に指定の文字列を表示させることができる。文字列としてHTMLを指定するとHTMLとして解釈される。

<iframe srcdoc="<h1>Hello, World!</h1>"></iframe>

あまり馴染みのない属性ではあるが、モダンブラウザではいずれも対応している状況である。

ChromeEdgeFirefoxSafari
20〜79〜25〜6〜

個人的なiframe srcdocのユースケース

ブログ記事を書く際、HTMLやJavaScriptを用いた動作のデモをCodePenやCodeSandboxに書いて埋め込むことがある。

ただ、ちょっとしたデモには大げさに感じる場合や外部サービスに依存するとサービス終了のリスクを考慮したい場合がある。この場合、iframeのsrcdocを利用してデモを埋め込むことは有用に感じた。

iframeだけに影響をとどめられるので埋め込み元のスタイルの影響を受けないし、埋め込み元に影響を与えない。

デモ

iframeのsrcdocにデモを埋め込んでみる。

  1. CDNからCSSを読み込む（new.css）
  2. ボタンをクリックするとアラートが表示される

上記をiframeのsrcdocに指定したものが以下の通り。

<iframe
  height="100"
  srcdoc="
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css'>
    <style>
      body {
        display: grid;
        place-items: center;
        height: 100vh;
        margin: 0;
      }
    </style>
    <button type='button' onclick='alert(`Hello, World!`)'>Click me</button>
"
></iframe>

感想

真っ当なブログシステムならコードのサンドボックス用のコンポーネントを提供するのが一般的だろうが、ちょっとしたデモには有用な手法だと感じた。

本質的には異なるが、外部の影響から独立してコンテンツを表示する点でWeb Componentsのカプセル化と似ているような気がする。