Javascript掲示板～リンク先から、ブラウザの戻るボタンで、直前のページに戻りたい

miyatan2383

（2024-10-24 23:42:38）

①下記コードで、JRのリンク集へ　から　JR一覧　へ飛び、この中から、例えば、JR東海へ飛んだのち、ブラウザの戻るボタンで戻ると、最初のページに戻ってしまいます。このとき、JR一覧　のページに戻りたいのですが、どうすれば良いか、ご教示ください。
　<h3>リンク集</h3>
  <ul id="links">
    <li><a href="https://www.google.com/">Google</a></li>
    <li><a href="https://www.yahoo.co.jp/">Yahoo!</a></li>
    <li><a href="https://www.bing.com/">Bing</a></li>
  </ul>
  <button id="btn">JRのリンク集へ</button>
  <button id="btn2">検索サイトのリンク集へ</button>
  <script>
    let jr=[];
    jr[0]={name:'JR北海道', url:'https://www.jrhokkaido.co.jp/'};
    jr[1]={name:'JR東日本', url:'https://www.jreast.co.jp/'};
    jr[2]={name:'JR東海', url:'https://jr-central.co.jp/'};
    jr[3]={name:'JR西日本', url:'https://www.westjr.co.jp/'};
    jr[4]={name:'JR四国', url:'https://www.jr-shikoku.co.jp/'};
    jr[5]={name:'JR九州', url:'https://www.jrkyushu.co.jp/'};
    jr[6]={name:'JR貨物', url:'https://www.jrfreight.co.jp/'};

    let ul=document.getElementById('links');

    document.getElementById('btn').addEventListener('click', showJR);
    function showJR(){
      ul.innerHTML='';
      for(let i=0; i<jr.length; i++){
        let html='<li><a href="'+jr[i].url+'">'+jr[i].name+'</a></li>';
        ul.insertAdjacentHTML('beforeend', html);
      }  
    }

    let se=[];
    se[0]={name:'Google', url:'https://www.google.com/'};
    se[1]={name:'Yahoo!', url:'https://www.yahoo.co.jp/'};
    se[2]={name:'Bing', url:'https://www.bing.com/'};

    document.getElementById('btn2').addEventListener('click', showSE);
    function showSE(){
      ul.innerHTML='';
      for(let i=0; i<se.length; i++){
        let html='<li><a href="'+se[i].url+'">'+se[i].name+'</a></li>';
        ul.insertAdjacentHTML('beforeend', html);
      }
    }
  </script>

miyatan2383

（2024-10-25 00:36:49）

copilotにより解決！修正コードは、以下のとおり。

<h3>リンク集</h3>
<ul id="links">
    <li><a href="https://www.google.com/">Google</a></li>
    <li><a href="https://www.yahoo.co.jp/">Yahoo!</a></li>
    <li><a href="https://www.bing.com/">Bing</a></li>
</ul>
<button id="btn">JRのリンク集へ</button>
<button id="btn2">検索サイトのリンク集へ</button>

<script>
let jr = [
    { name: 'JR北海道', url: 'https://www.jrhokkaido.co.jp/' },
    { name: 'JR東日本', url: 'https://www.jreast.co.jp/' },
    { name: 'JR東海', url: 'https://jr-central.co.jp/' },
    { name: 'JR西日本', url: 'https://www.westjr.co.jp/' },
    { name: 'JR四国', url: 'https://www.jr-shikoku.co.jp/' },
    { name: 'JR九州', url: 'https://www.jrkyushu.co.jp/' },
    { name: 'JR貨物', url: 'https://www.jrfreight.co.jp/' }
];

let se = [
    { name: 'Google', url: 'https://www.google.com/' },
    { name: 'Yahoo!', url: 'https://www.yahoo.co.jp/' },
    { name: 'Bing', url: 'https://www.bing.com/' }
];

let ul = document.getElementById('links');

document.getElementById('btn').addEventListener('click', function() {
    history.pushState({ page: 'JR' }, 'JRのリンク集', '#JR');
    showLinks(jr);
});

document.getElementById('btn2').addEventListener('click', function() {
    history.pushState({ page: 'SE' }, '検索サイトのリンク集', '#SE');
    showLinks(se);
});

function showLinks(links) {
    ul.innerHTML = '';
    for (let i = 0; i < links.length; i++) {
        let html = '<li><a href="' + links[i].url + '">' + links[i].name + '</a></li>';
        ul.insertAdjacentHTML('beforeend', html);
    }

    const linksInList = ul.getElementsByTagName('a');
    for (let link of linksInList) {
        link.addEventListener('click', function(event) {
            event.preventDefault();
            // 直接リンク先に移動
            window.location.href = link.href;
        });
    }
}

window.addEventListener('popstate', function(event) {
    if (event.state) {
        if (event.state.page === 'JR') {
            showLinks(jr);
        } else if (event.state.page === 'SE') {
            showLinks(se);
        } else if (event.state.page === 'external') {
            window.location.href = event.state.url;
        }
    } else {
        ul.innerHTML = `
            <li><a href="https://www.google.com/">Google</a></li>
            <li><a href="https://www.yahoo.co.jp/">Yahoo!</a></li>
            <li><a href="https://www.bing.com/">Bing</a></li>
        `;
    }
});

</script>

miyatan2383

（2024-10-26 01:00:36）

本題の改良版を以下にUPします。

<h3>リンク集</h3>
<ul id="links">
    <li><a href="https://www.google.com/">Google</a></li>
    <li><a href="https://www.yahoo.co.jp/">Yahoo!</a></li>
    <li><a href="https://www.bing.com/">Bing</a></li>
</ul>
<button id="btn">JRのリンク集へ</button>
<button id="btn2">検索サイトのリンク集へ</button>

<script>
let linksData = {
    'JR': [
        { name: 'JR北海道', url: 'https://www.jrhokkaido.co.jp/' },
        { name: 'JR東日本', url: 'https://www.jreast.co.jp/' },
        { name: 'JR東海', url: 'https://jr-central.co.jp/' },
        { name: 'JR西日本', url: 'https://www.westjr.co.jp/' },
        { name: 'JR四国', url: 'https://www.jr-shikoku.co.jp/' },
        { name: 'JR九州', url: 'https://www.jrkyushu.co.jp/' },
        { name: 'JR貨物', url: 'https://www.jrfreight.co.jp/' }
    ],
    'SE': [
        { name: 'Google', url: 'https://www.google.com/' },
        { name: 'Yahoo!', url: 'https://www.yahoo.co.jp/' },
        { name: 'Bing', url: 'https://www.bing.com/' }
    ]
};

function updateLinks(category) {
    let ul = document.getElementById('links');
    ul.innerHTML = linksData[category].map(link => `<li><a href="${link.url}">${link.name}</a></li>`).join('');
}

function handleNavigation(category) {
    history.pushState({ category: category }, '', `#${category}`);
    updateLinks(category);
}

document.getElementById('btn').addEventListener('click', () => handleNavigation('JR'));
document.getElementById('btn2').addEventListener('click', () => handleNavigation('SE'));

window.addEventListener('popstate', function(event) {
    if (event.state && event.state.category) {
        updateLinks(event.state.category);
    } else {
        updateLinks('SE'); // 初期状態
    }
});

// 初期状態のイベントリスナー追加
window.onload = function() {
    if (history.state && history.state.category) {
        updateLinks(history.state.category);
    } else {
        updateLinks('SE'); // 初期状態
    }
};
</script>

mam

（2024-10-29 12:24:13）

よくわかっていないのですが、以下の関数は不要な気がします。

window.addEventListener('popstate', function(event) {
    if (event.state && event.state.category) {
        updateLinks(event.state.category);
    } else {
        updateLinks('SE'); // 初期状態
    }
});

mam

（2024-10-29 12:45:21）

JavascriptのinnerHTMLを使わず、ただ単にstyle.displayの値を変更して表示非表示で制御してみました。

<html>
<body>

<h3>リンク集</h3>
<ul class="links SE">
    <li><a href="https://www.google.com/">Google</a></li>
    <li><a href="https://www.yahoo.co.jp/">Yahoo!</a></li>
    <li><a href="https://www.bing.com/">Bing</a></li>
</ul>
<ul class="links JR">
    <li><a href="https://www.jrhokkaido.co.jp/">JR北海道</a></li>
    <li><a href="https://www.jreast.co.jp//">JR東日本</a></li>
    <li><a href="https://jr-central.co.jp/">JR東海</a></li>
    <li><a href="https://www.westjr.co.jp/">JR西日本</a></li>
    <li><a href="https://www.jr-shikoku.co.jp/">JR四国</a></li>
    <li><a href="https://www.jrkyushu.co.jp/">JR九州</a></li>
    <li><a href="https://www.jrfreight.co.jp/">JR貨物</a></li>
</ul>

<button id="btn">JRのリンク集へ</button>
<button id="btn2">検索サイトのリンク集へ</button>

<script>
function updateLinks(category) {
    let links=document.querySelectorAll(".links");
    Array.from(links).map((link)=>link.style.display="none");
    let ul = document.querySelector("."+category);
    ul.style.display="block";
}

function handleNavigation(category) {
    history.pushState({ category: category }, '', `#${category}`);
    updateLinks(category);
}

document.getElementById('btn').addEventListener('click', () => handleNavigation('JR'));
document.getElementById('btn2').addEventListener('click', () => handleNavigation('SE'));

// 初期状態のイベントリスナー追加
window.addEventListener("DOMContentLoaded",function(){
    if (history.state && history.state.category) {
        updateLinks(history.state.category);
    } else {
        updateLinks('SE'); // 初期状態
    }
});
</script>
</body>
</html>

パラメータ（?link=SE ?link=JR）を使う方法も良いかもです。

Javascript掲示板

リンク先から、ブラウザの戻るボタンで、直前のページに戻りたい

返信