HTML iframe 内のハイパーリンクを親ウィンドウで開く方法

2024-04-27

HTML iframe 内のハイパーリンクを親ウィンドウで開く方法

手順

iframe 要素に target="_top" 属性を追加します。

<iframe src="https://example.com" target="_top"></iframe>

<iframe src="https://example.com">
  <a href="https://example2.com" target="_top">リンク</a>
</iframe>

注意事項

target="_top" 属性は、すべてのブラウザでサポートされているわけではありません。古いブラウザでは、ハイパーリンクが新しいウィンドウで開かれる可能性があります。
iframe 内のすべてのハイパーリンクに target="_top" 属性を追加する必要があることに注意してください。そうしないと、一部のハイパーリンクは依然として iframe 内で開かれてしまいます。

代替方法

target="_top" 属性の代わりに、JavaScript を使用して iframe 内のハイパーリンクのクリックイベントを処理することもできます。この方法では、より多くの制御が可能になり、条件に応じてハイパーリンクを開く場所を決定することができます。

const iframe = document.getElementById('myIframe');

iframe.addEventListener('click', function(event) {
  if (event.target.tagName === 'A') {
    event.preventDefault();
    window.open(event.target.href, '_top');
  }
});

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Iframe example</title>
</head>
<body>
  <iframe id="myIframe" src="https://example.com"></iframe>

  <script>
    const iframe = document.getElementById('myIframe');

    iframe.addEventListener('click', function(event) {
      if (event.target.tagName === 'A') {
        event.preventDefault();
        window.open(event.target.href, '_top');
      }
    });
  </script>
</body>
</html>

説明

このコードは、次のことを行います。

myIframe という ID の iframe 要素を作成します。
iframe 要素に src 属性を追加して、埋め込む Web ページの URL を指定します。
iframe 要素に target="_top" 属性を追加して、すべてのハイパーリンクを親ウィンドウで開くようにします。
addEventListener メソッドを使用して、iframe 内のクリックイベントを処理する JavaScript コードを追加します。
クリックイベントハンドラは、ターゲット要素が A タグ (ハイパーリンク) であるかどうかを確認します。
A タグの場合は、preventDefault メソッドを使用してデフォルトの動作 (iframe 内でページを開く) を阻止します。
window.open メソッドを使用して、ハイパーリンクを親ウィンドウで新しいウィンドウとして開きます。

このコードをカスタマイズして、ニーズに合わせて調整できます。たとえば、iframe のソース URL を変更したり、JavaScript コードを拡張して、ハイパーリンクのクリックに関する追加処理を実行したりできます。

HTML iframe 内のハイパーリンクを親ウィンドウで開くその他の方法

<base> 要素は、iframe 内のすべてのハイパーリンクのターゲットベース URL を設定するために使用できます。

<!DOCTYPE html>
<html>
<head>
  <title>Iframe example</title>
  <base target="_top">
</head>
<body>
  <iframe src="https://example.com"></iframe>
</body>
</html>