こんにちは。
今回は、現場にてとあるHTMLファイルの中にiframeタグを使用して別のHTMLファイルを読み込んだ際に狙い通りの挙動にならなかったので、そちらの対策についての備忘録です。
起きたこと
読み込んだ先のファイルの中にaタグで設定したリンクが存在し、
親側のファイル上でリンクを開くと外側のURLは変わらず、中身の内容だけが変わってしまった。
ここでは仮として
- index.html（親となるファイル）
- sub.html（iframeで読み込む先のファイル）
- other.html（読み込まれたsub.html内でaタグに設定するファイル）
以上の3つのファイルで図にしております。
ここでsub.html内にあるaタグ（other.html）を押下した際に、
index.htmlがother.htmlになるのが理想でしたが……
上記のようにiframe内でリンクが飛んでしまい、index.htmlには特に変化が起こりませんでした。
iframeタグの仕様上これは仕方ないことのようですね……iframeにはあまり触れてなかったので普通にindex.html側が切り替わると考えてしまっておりました。
解決策
ではどうすれば良いかというと難しくはありませんでした。
最初はJavaScriptを使ってリンクを取得して～など考えておりましたが、普通にHTMLのタグ内で完結しました。
aタグにtarget属性を追加し、値を「_parent（もしくは_top）」にすれば解決できます！
<a href="リンク" target="_parent">
「_parent」を指定する事で、iframeタグで読み込んだファイルから見て親に当たるファイル側でリンクを飛ばす事ができるようになります。
「_top」は親をすっ飛ばして最上位のファイルにてリンクを飛ばします（親と最上位が同じファイルであればどちらの値でも良いかと思います）
「_blank」は別タブに飛ばす値として馴染み深いですが、上記の値は初めて知りました。
まとめ
改めてMDNでaタグについて調べてみた所、
target属性は「リンク先のURLを表示する場所」
と解説されておりました。
そもそも属性の意味をきちんと理解していれば、「もしかしたら適した値があるかもしれない」という考えに至って下手に悩まされずに済んだかもしれなかったので、見慣れたタグや属性の意味を改めて学ぶのも良い機会なのではと思いました。
オブジェクティブグループではXの投稿も平日毎日行っています！
IT関連の小ネタや便利技から、日常のアニメ・ゲーム布教なども幅広く投稿してるので、
ご興味のある方は是非フォロー・いいねをお願いします。
https://x.com/obg_ocr