`<iframe>`タグで混乱！

<iframe>タグで読み込んでいたiframe.htmlの要素をクリックした際に、
iframe.htmlの中にiframe.htmlが出るというループが発生 した。
ブラウザの検証（Ctrl+Shift+C / ⌘+Shift+C）でエラー元を確認するも、
Cookieに問題があると言われたりモール共通のとあるjsファイルがおかしいなんて言われる。

iframe内のhtmlファイルについて

Webサイト制作ではあまり使うことはない<iframe>タグ。
WordPressでの制作でPHPファイルをいじくるときにそれっぽいことをするが、
<iframe>タグの扱い方を知らないとエラーが混乱を招く気がした。

※<iframe>タグはインラインフレームと呼ばれ、src属性で指定したURL（別ページ）の内容を読み込み、
　<iframe>タグを設置した箇所に（埋め込む形で）表示する もの。

この記事を呼んでもらいたい人

1.ECモールでショップを運営・管理している人
2.HTML初心者や少し触ったことがある程度の人
3.<iframe>で意図しないループが起きた人

解決方法

iframe.html内の <a>タグにtarget="_blank"を追加することで解決 した。

サンプル

index.html

<iframe id="error" src="https://www.~/index.html"></iframe>

↓修正後

index.html

<iframe id="success" src="https://www.~/index.html" target="_blank"></iframe>

たったこれだけです💦

解決までの道のり

Firefoxを愛用する私は、エラー発生時もFirefoxで検証していたのだが、
<iframe>タグないのirame.html要素をクリックした際に、
何度か「<iframe>など外部読み込みタグを検知すると警戒しちゃうから、
ブラウザの別タブで開くことをオススメするよ」と表示されていた。

既にブラウザが答え教えてくれてた🥰🥰🥰

エラー出た際に「iframe ループ」で検索したが、ループさせる表示方法ばかりが出てきた。
1つだけ「iframeでバグる時あるから注意して」的なサイトがあったが、
英文を無理やり翻訳かけたような内容だった上、taeget="_blank"についての記述はなかった。

【余談】エラーの経緯

私の場合、某ECモールで管理しているショップのヘッダーで読み込ませていたindex.html内で、
別のhtmlファイルを読み込ませる必要が出たので、ifare.htmlを作成し<iframe>タグで呼んでいた。
私が現在の会社に所属する前に契約していたコンサル会社が管理していたものだったので、
余計なコードを整理していた流れで発生した。
「なんでわざわざ別タブ指定させんねん」という考えで消したわけだが、ちゃんと意味はあったのだ。
コンサルだからって疑っちゃいけない。
ごめん、元コンサル...

結論

私のようにECショップ運営者は特に気を付けて欲しい。
HTMLよく分からない人だと原因追及は不可能だと思うので、
初心者がエラーにぶつかった際にこの記事に辿り着いて貰えると幸いです。