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

srcdoc

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

埋め込み

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
api.HTMLIFrameElement.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>

ライブデモ

inline HTML. embed

Srcdoc attribute in iframe insidedirectly HTML describe.

プレビュー全画面表示

style withcontent

Srcdoc inside style tag includesil with. HTML embed.

プレビュー全画面表示

Src and srcdoc. Comparison

Src is partURL, srcdoc is inranHTML.srcdoc that priority.

プレビュー全画面表示

実務での使いどころ

  • srcdoc の活用

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

注意点

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

アクセシビリティ

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

参考リンク