PopStateEvent Test

차례대로 메뉴를 클릭하고 Back 버튼을 클릭하세요.

Back

    var oShare = (function() {
        const elLog = document.getElementById("log");
        return {
            elLog: elLog
        }
    })();
    
    window.addEventListener("popstate", e => {
        oShare.elLog.textContent = JSON.stringify(e.state);
    });
    
    
    window.addEventListener("DOMContentLoaded", () => {
        const elAMenu = document.querySelectorAll("nav > a");
        const elBtnBack = document.getElementById("btn-back");
    
        elBtnBack.addEventListener("click", () => history.back());
    
        elAMenu.forEach(elMenu => {
            elMenu.addEventListener("click", e => {
                e.preventDefault();
    
                let page = e.currentTarget.dataset.page;
                let oState = {page: page};
                history.pushState(oState, `PAGE ${page}`, `?page=${page}`);
            });
        });
    });