<object>外部コンテンツを埋め込む

<object>タグは、SVGファイルやHTMLファイルなどの外部コンテンツ、またはファイルを埋め込む際に使用します。 また画像やiframeのような別のブラウジングコンテキスト、プラグインにより処理される外部リソース全般を埋め込む事ができます。

data属性で埋め込むリソースのURLを指定し、type属性でリソースのMIMEタイプを指定して下さい。 name属性を設定する場合は、有効なブラウジングコンテキスト名を指定します。

また組み込むリソースが画像の場合はusemap属性でイメージマップの指定ができるほか、<object>タグでプラグインデータを埋め込む際にobject要素内にparam要素を配置すると、動作のパラメータを指定することができます。 object要素内にparam要素以外があり、そのオブジェクトを表示できなかった場合は、そのparam要素以外の部分がフォールバックコンテンツとして表示されます。

フォールバックとは、ブラウザが対応していない外部コンテンツが組み込まれた際に、object要素内の子要素が代わりに表示されることをいいます。

なおembed要素との違いは、<object>が外部コンテンツを組み込むのに対し、embed要素はプラグインを必要とするデータを埋め込む点となります。

HTML5での変更点

HTML5のobject要素では、codebase属性、standby属性、classid属性、codetype属性、hspace属性、vspace属性、archive属性、declare属性、align属性、border属性が廃止され、usemap属性、form属性、typemustmatch属性、が追加されました。(HTML5.1ではusemap属性が廃止)

またwidth属性とheight属性にパーセント値での指定ができなくなり、head要素内に配置できなくなりました。

書式

  • <object 属性="値">~</object> ……… 外部コンテンツの組み込み

属性

data="url" 組み込む外部コンテンツのurlを指定
type="" 埋め込むオブジェクトのMIMEタイプを指定
name="" ブラウジングコンテキスト名
usemap="" クライアントサイドイメージマップを使用する際に指定
width="" 埋め込む外部コンテンツの幅をピクセル数で指定
height="" 埋め込む外部コンテンツの高さをピクセル数で指定
typemustmatch 埋め込むリソースのMIMEタイプがtype属性で指定したMIMEタイプと一致した場合リソースの読み込みをする
form="" フォーム要素とid属性値で関連付け

使用した時の例

<p>pdfファイルを埋め込んでいます</p>
<object data="sample.pdf" width="300" height="200">
  <p>対応ブラウザでのみ表示されます。
  <a href="sample.pdf" target="_blank">pdfファイルをダウンロードする</a></p>
</object>

<p>htmlファイルを埋め込んでいます</p>
<object data="sample.html" width="300" height="200">
  <p><a href="sample.html">サンプルへ</a></p>
</object>

ブラウザ上の表示例

pdfファイルを埋め込んでいます

対応ブラウザでのみ表示されます。
pdfファイルをダウンロードする

htmlファイルを埋め込んでいます

サンプルへ

※上記HTMLファイルを埋め込んでいる方のサンプルに「iframeサンプル」と書いてありますが、iframeではありません。

対応ブラウザなどのデータ

形式 <object>~</object> カテゴリ フローコンテンツ, フレージングコンテンツ, エンベデッドコンテンツ, インタラクティブコンテンツ(usemap属性がある場合),リステッド, サブミッタブル, フォーム関連要素, パルパブルコンテンツ
親要素 エンベデッドコンテンツが期待される場所 子要素 param,トランスペアレント
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~