ぶらうざ：ひすとりー

いくつかのサイトで

ページ遷移してないのにURLが変わったりしてて謎だったんだけど

謎じゃなくなった

URLの操作はwindow.locationやdocument.locationかと思ってたんだけど

locationはhash以外をいじるとページ遷移が発生しちゃってて、

location以外でURLいじる方法は何だ？？と

今回もググらずMDNから検索して探すとかした(たぶんぐぐったほうが速かったとは思うが)

URLいじれる正体はこれだった

developer.mozilla.org

これのhistory.pushState()やhistory.replaceState()でURLをいじれるということが分かった

これは要するにページ遷移なしでページの状態とURLのパスとを関連づけたい連動させたい、っていう感じの使い方をするものっぽい

ブラウザの戻るボタンや進むボタンやリロードなどでページの状態を復元できる、みたいな仕組みぽい

一応、挙動の確認をお試した

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <h1>History?</h1>
        <hr>
        <button>Add Star</button>
        <div id="stars"></div>
        <hr>
        <div>move to: <a href="https://www.google.com/" rel="noreferrer nofollow">google.com</a></div>
        <hr>
        <div><a href="#">hash</a></div>
        <div><button onclick="window.location.reload();">reload</button></div>
        <script>
function colored(t) {
    return () => {
        const cs = history.state;
        const h = document.querySelector('h1');
        if (cs === null) {
            h.style.color = 'green';
        } else {
            h.style.color = cs.color;
        }
        h.textContent = t.toUpperCase();
    };
}

window.addEventListener('load', colored('load'));
window.addEventListener('popstate', colored('popstate'));

document.querySelector('button')
.addEventListener('click', () => {
    const cs = history.state;
    let color = 'green';
    if (cs !== null) {
        color = cs.color;
    }
    const span = document.querySelector('#stars')
        .appendChild(document.createElement('span'));
    span.style.color = color;
    span.textContent = '★';
    switch (color) {
    case 'green': color = 'red'; break;
    case 'red': color = 'cyan'; break;
    case 'cyan': color = 'yellow'; break;
    case 'yellow': color = 'brown'; break;
    case 'brown': color = 'blue'; break;
    case 'blue': color = 'magenta'; break;
    case 'magenta': color = 'lime'; break;
    default: color = 'red'; break;
    }
    history.pushState({"color": color }, '', `${window.location.pathname}?color=${color.toUpperCase()}`);
    colored('button')();
});
        
        </script>
    </body>
</html>

初期状態

f:id:neetsdkasu:20200808051207p:plain