👻
STUDIO CMSのカスタムコード内に記述したリンクボタンをクリックするとiframe内で遷移するのを何とかしたい
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