Widely available すべての主要ブラウザで対応済み。安心して使用可能。

srcdoc

srcdoc は HTMLIFrameElement インターフェイスのプロパティで、このページの内容を指定します。

埋め込み

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
srcdoc
20
79
25
6
25
6
HTML 属性
srcdoc
20
79
25
6
25
6
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

HTML 
<iframe srcdoc="<h1>こんにちは</h1><p>インラインHTMLコンテンツ</p>"
  sandbox
  width="400" height="200">
</iframe>

ライブデモ

インライン HTML の埋め込み

srcdoc 属性で iframe 内に直接 HTML を記述。

プレビュー全画面表示

スタイル付きコンテンツ

srcdoc 内に style タグを含めてス���イル付きの HTML を埋め込み。

プレビュー全画面表示

src と srcdoc の比較

src は外部URL、srcdoc はインラ���ンHTML。srcdoc が優先される。

プレビュー全画面表示

実務での使いどころ

  • srcdoc の活用

    srcdoc は HTMLIFrameElement インターフェイスのプロパティで、このページの内容を指定します。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク