メインページでiframe内の遷移を管理し、戻るボタンを実装する方法をchatGPTに聞く。
chatGPT「・・・動作確認をするためには、ローカルサーバーで実行することをお勧めします。さらに、この例ではすべてのファイルが同じオリジン（同じドメイン）に配置されていることを前提としています。親ページのHTMLファイル(index.html)を作成し、iframe要素と戻るボタンを追加します。」

親ページの作成

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Iframe Navigation</title>
</head>
<body>
  <iframe id="my-iframe" src="iframe-content.html" width="600" height="400"></iframe>
  <button id="iframe-back">戻る</button>
  <script src="main-script.js"></script>
</body>
</html>

iframe-content.htmlファイルを作成し、リンクを追加する。

iframe-content.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Iframe Content</title>
</head>
<body>
  <a href="https://example.com" class="controlled-link">Visit Example.com</a>
</body>
</html>

main-script.jsファイルを作成し、メインページでiframe内のリンクの遷移と戻るボタンを制御する。

const iframe = document.getElementById("my-iframe");
const iframeBackButton = document.getElementById("iframe-back");

let iframeHistory = ["iframe-content.html"];

iframe.addEventListener("load", function () {
  const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
  const links = iframeDoc.querySelectorAll("a");

  links.forEach((link) => {
    link.addEventListener("click", function (event) {
      event.preventDefault();
      iframeHistory.push(link.href);
      iframe.src = link.href;
    });
  });
});

iframeBackButton.addEventListener("click", function () {
  if (iframeHistory.length > 1) {
    iframeHistory.pop(); // 現在のページを履歴から削除
    const previousUrl = iframeHistory[iframeHistory.length - 1];
    iframe.src = previousUrl;
  }
});

＜感想＞

iframeを自分のホームページのファイルツリーの表示とファイルの中身の表示に使おうと思う。
戻るボタンと進むボタンも入れる。