object要素

object要素とは

object要素を使うと、PDFなどの外部データを表示することができます。

objectの定義は、以下のとおりです。

object要素は、汎用的に使えます。画像、HTMLなども扱えますが、一般的には専用の属性が使えるimg、iframe要素を使います。

利用例

以下は、objectを使ったHTMLの例です。

<object data="test.pdf"></object>

上記により、test.pdfの内容が以下のように表示されます。

表示されているのは、PDFファイルの内容です。

属性

グローバル属性と、以下が使えます。

data

データをURLで指定します。

form

formのIDを指定して、form要素と関連付けします。

height

オブジェクトの高さをpxで指定します。

name

オブジェクトに名前を付けます。formやa要素のtarget属性で指定すると、表示する内容が変わります。

type

オブジェクトのメディアタイプ(htmlやpdf)を示します。例えば、text/html、application/pdfなどと指定します。

usemap

イメージマップとして使います。map要素と関連付けて、画像のクリックした場所によってリンク先に移動したり、処理をしたりすることができます。

width

オブジェクトの横幅をpxで指定します。

次からは、各属性の利用例を示します。

data属性の利用例

dataの利用例は、以下のとおりです。

<object data="test.pdf"></object>

すでに説明したとおり、埋め込む先のURLを指定します。

form属性の利用例

formの利用例は、以下のとおりです。

<form id="test1">
<button id="test2">表示</button>
</form>
<object data="test.pdf" form="test1"></object>

<script>
const x = document.querySelector("#test2");
x.addEventListener("click", function(){alert(document.forms[0].elements[1].data);});
</script>

form属性で、form要素のIDを指定することで関連付けしています。このため、document.forms[0].elements[1].dataでデータを取得できます。これにより、上記は「表示」ボタンをクリックすると、ファイル名がアラートで表示されます。

heighとwidth属性の利用例

heightとwidthの利用例は、以下のとおりです。

<object data="test.pdf" height="200" width="100"></object>

上記により、高さ200px、横幅100pxでPDFファイルを表示します。

name属性の利用例

nameの利用例は、以下のとおりです。

<object data="test.pdf" name="test"></object>
<a href="test2.pdf" target="test">テスト2ページ</a>

a要素のターゲットで、testを指定しています。これは、objectのnameに対応しています。このため、リンクをクリックすると表示内容がtest2.pdfに切り替わります。

type属性の利用例

typeの利用例は、以下のとおりです。

<object type="application/pdf" name="test"></object>
<button id="id1">表示</button>

<script>
const x = document.querySelector("#id1");
x.addEventListener("click", function(){document.test.data = "test.pdf";});
</script>

上記により、表示ボタンをクリックするとtest.pdfが表示されます。

objectでは、dataを指定していない場合は、typeを指定しておく必要があります。typeでは、text/htmlやimage/png、image/gif、image/jpeg、video/mp4などが指定できます。

usemap属性の利用例

usemapの利用例は、以下のとおりです。

<map name="test">
  <area shape="rect" coords="0,0,50,50" onclick="alert('赤色');">
  <area shape="rect" coords="51,0,100,50" onclick="alert('青色');">
</map>
<object data="test.png" usemap="#test"></object>

赤字部分で、objectとmapを関連付けしています。shapeのrectは長方形を意味し、coordsは座標を示します。上記は、以下のように表示されます。

赤色の範囲をクリックするとアラートで「赤色」、青色の範囲をクリックするとアラートで「青色」と表示されます。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

〇

サポート

△

制限あり

×

未サポート

？

不明

IE

Internet Explorer

Ed

Edge

Fx

Firefox

Ch

Chrome

Sa

Safari

Op

Opera

An

Android Browser

Sm

Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。