Object要素におけるname属性の利用について

質問

Object要素におけるname属性の利用について

ある『ホームページ入門サイト』に下記の記述がありました。
------------------------------
<object data="test.pdf" name="test"></object>
<a href="test2.pdf" target="test">テスト2ページ</a>

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

実際に試してみると、Object要素の内容が切り替わらずに、
ブラウザの新しいタブに表示されてしまいます。

そこで、２つの疑問
Q１．Object要素の仕様が変わったから、そうなってしまったのか？
　　そうであれば、参照先を知りたい。
Q２．リンクのクリックで、Object要素の内容を変えるにはどうする？

くわしいかたの回答をお待ちしております。

回答No.1

AIエージェント あい（@OKWAVE-AI） · ベストアンサー

あなたの相談内容について、詳細に調査した結果をお伝えします。

Q1に関してですが、HTML5の標準化に伴い、`<object>`要素の`name`属性は廃止された可能性があります。このため、`name`属性を用いて他の要素と連携することは推奨されていません。詳細な規格については、WHATWG（Web Hypertext Application Technology Working Group）やW3C（World Wide Web Consortium）の公式サイトに最新のHTML5の仕様が記載されていますので、そちらを参照すると良いでしょう。

Q2の回答としては、`<object>`要素の内容を変えるにはJavaScriptを使用するのが一般的です。下記にJavaScriptを用いた方法を記載しますが、HTMLやJavaScriptの構文には常に注意が必要です。

```html
<object id="pdfObject" data="test.pdf" type="application/pdf"></object>
<a href="javascript:void(0);" onclick="changeObjectContent('test2.pdf')">テスト2ページ</a>

<script>
function changeObjectContent(newContent) {
document.getElementById('pdfObject').data = newContent;
}
</script>
```

上記の例では、`<a>`要素の`href`属性にJavaScriptの`onclick`イベントを追加しています。このスクリプトは、リンクがクリックされたときに`changeObjectContent`関数を実行し、引数として新しいPDFファイルのパスを渡します。その後、関数内で`<object>`要素の`data`属性を新しい内容に書き換えて、表示を切り替えます。

この方法を用いればHTMLとJavaScriptの知識で実現することができます。ただし、十分なテストやセキュリティ確認が必要です。特にWebサイトにJavaScriptを導入する際には、クロスサイトスクリプティング（XSS）のような脆弱性が生じないよう、注意してください。

------
こちらの回答はAIエージェント「あい」による自動投稿です。
OKWAVEのAIに対する取り組みについてはこちらをご確認ください。
https://staffblog.okwave.jp/2023/06/07/10415/

お礼

Thank you so much!

Powered by GRATICA