HTML object要素の使い方｜PDF・SVG埋め込み・fallbackとiframe比較

▶

編集

この記事の要点

<object> は外部リソース（PDF・画像・SVG・動画・別ページなど）を埋め込む汎用 HTML 要素
主な属性は data（URL）type（MIME）width / height。閉じタグまでの中身はフォールバックとして表示される
埋め込んだ別ページに JS でアクセスする場合は contentDocument / contentWindow を使う（同一オリジン制約あり）
PDF や SVG を埋め込む用途で今でも現役。<iframe> と役割が近いが、object は MIME 自動判別とフォールバックが強み
Flash 全盛期は中心的存在だったが、現在は動画は <video>、画像は <img> など専用要素が推奨される場面が多い

object 要素とは

<object> は外部リソース（PDF・SVG・画像・動画・別 HTML ページ・かつての Flash など）を、HTML ページ内に汎用的に埋め込むための要素です。data 属性に URL を指定するだけで、ブラウザがコンテンツタイプを判別して適切に表示します。

基本構文

<object data="sample.pdf" type="application/pdf" width="600" height="400">
  <p>PDF を表示できませんでした。<a href="sample.pdf">こちらからダウンロード</a></p>
</object>

開始タグと閉じタグの間に書いた内容はフォールバックで、ブラウザが当該リソースを表示できなかったときに代替表示されます。

主な属性

属性	意味
`data`	埋め込むリソースの URL（必須に近い）
`type`	MIME タイプ（application/pdf, image/svg+xml 等）
`width` / `height`	表示サイズ（px 推奨）
`name`	フォーム送信時の名前（限定的）
`form`	関連付ける form 要素の id
`usemap`	イメージマップとの関連付け

用途別の例

PDF を埋め込む

<object data="/files/manual.pdf" type="application/pdf" width="100%" height="600">
  <p>PDF を表示できない場合は <a href="/files/manual.pdf">ダウンロード</a> してください。</p>
</object>

モバイル Safari など PDF 表示に弱い環境ではフォールバックが効きます。

SVG を埋め込む（スクリプト操作可）

<object id="logo" data="/img/logo.svg" type="image/svg+xml" width="200" height="60"></object>

<script>
  document.getElementById('logo').addEventListener('load', () => {
    const svgDoc = document.getElementById('logo').contentDocument;
    svgDoc.querySelectorAll('path').forEach(p => p.style.fill = 'crimson');
  });
</script>

<img> で SVG を読み込むと中の DOM にアクセスできませんが、<object> なら contentDocument 経由で JS から操作できます。

別 HTML ページを埋め込む（iframe 代替）

<object data="/widgets/weather.html" type="text/html" width="300" height="200">
  天気ウィジェットを表示できませんでした。
</object>

動画（非推奨：通常は video 要素を使う）

<object data="/movies/intro.mp4" type="video/mp4" width="640" height="360"></object>

<!-- 推奨: -->
<video src="/movies/intro.mp4" controls width="640" height="360"></video>

フォールバック表示の仕組み

ブラウザが指定した type に対応していない、リソース取得に失敗した、プラグインがインストールされていない、といったケースで、<object> の中身（子要素）が代わりに表示されます。

<object data="legacy.swf" type="application/x-shockwave-flash">
  <param name="movie" value="legacy.swf">
  <p>このコンテンツは Flash で作成されています。代わりに <a href="legacy.mp4">MP4 版</a> をご覧ください。</p>
</object>

<iframe> との違い

項目	<object>	<iframe>
主な用途	PDF・SVG・画像・動画など多様	別 HTML ページの埋め込み
MIME 自動判別	あり（type で明示も可）	なし（HTML 前提）
フォールバック	あり（タグ内に書ける）	なし（古くは <noframes>）
sandbox 属性	なし	あり（信頼境界を作る）
SEO・アクセシビリティ	title 属性で補える	title 属性が標準的

別ページを安全に隔離して埋め込みたいなら <iframe> + sandbox、PDF や SVG を載せたいなら <object> という棲み分けが分かりやすいです。

<embed> との違い

<embed> も類似要素ですが、フォールバックを書けない点が大きな違いです。最初から代替表示を意識するなら <object> が無難です。

セキュリティと CSP

外部から埋め込むリソースは 同一オリジン以外なら CORS / X-Frame-Options を意識
CSP では object-src ディレクティブで埋め込み可能な origin を制限できる
埋め込み先がスクリプトを含む HTML の場合、object はサンドボックスがないため信頼できるソースのみに限定する

# 例: object-src は self とホワイトリストの CDN のみ許可
Content-Security-Policy: object-src 'self' https://cdn.example.com;

アクセシビリティ

フォールバックに代替テキストやダウンロードリンクを必ず入れる
SVG ロゴなら <title> 要素を SVG 内に入れて読み上げ可能にする
PDF 埋め込みは画面リーダーで読みにくいので、外部リンクとして提供することも検討する

よくあるトラブル

症状	原因と対処
PDF が表示されず空白	type 指定漏れ / モバイル Safari など未対応。フォールバックの a タグでダウンロード可
contentDocument が null	異なるオリジンの SVG / HTML を読んでいる。Same-Origin Policy
SVG の中身を JS で触れない	<img> ではなく <object> か inline SVG を使う
レイアウトが意図しない	width/height 未指定。可能なら px、レスポンシブは aspect-ratio を併用

ページ一覧

その他