object要素

Webページの中に、PDFなどの外部データを表示することができます。

本ページでは、object要素について説明します。

object要素とは

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

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

【objectの定義】
コンテンツカテゴリ フローコンテンツフレージングコンテンツ埋め込みコンテンツ、リスト・フォーム関連要素、認知可能コンテンツ
可能な親要素 埋め込みコンテンツを包含できる要素
可能なコンテンツ paramと、それに続くトランスペアレントコンテンツモデル
タグの省略 不可
DOMインターフェース HTMLObjectElement

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

利用例

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

【objectの利用例】
<object data="test.pdf"></object>

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

ブラウザの画面で、「これは、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の利用例は、以下のとおりです。

【dataの利用例】
<object data="test.pdf"></object>

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

form属性の利用例

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の利用例は、以下のとおりです。

【heightとwidthの利用例】
<object data="test.pdf" height="200" width="100"></object>

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

name属性の利用例

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の利用例は、以下のとおりです。

【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の利用例は、以下のとおりです。

【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 Ed Fx Ch Sa Op
object
data
form
height
name
type
usemap
width
【スマートフォン】
項目 Sa An Op Ch Fx Sm
object
data
form
height
name
type
usemap
width
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

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

HTML要素(タグ)一覧」に戻る