Zenn
👻

STUDIO CMSのカスタムコード内に記述したリンクボタンをクリックするとiframe内で遷移するのを何とかしたい

2024/07/25に公開

STUDIOのCMSで管理している記事の中にリンクボタンを埋め込みたいとする。

すると、おそらく以下のようになる。
(ボタンの装飾などは人による)

<a href="https://example.com">
<div style="text-align:center;">
<span style="display:inline-block; background-color:#6845C8; color:white; padding: 8px 16px; border-radius: 16px; font-size: 1.4em;">リンクテキスト</span>
</div>
</a>

しかし、上記のコードではiframe内でリンクを開こうとしてしまい、ページ遷移が上手くいかない。

そこで、aタグに target="_parent" を指定する必要がある。

以下のようになる。

<a href="https://example.com" target="_parent">
<div style="text-align:center;">
<span style="display:inline-block; background-color:#6845C8; color:white; padding: 8px 16px; border-radius: 16px; font-size: 1.4em;">リンクテキスト</span>
</div>
</a>

これで、iframeの親要素でページ遷移を行ってくれるようになる。

Discussion

ログインするとコメントできます