JavaScript: usare gli hash degli URL a scopo dinamico

Short link

In JavaScript possiamo sfruttare gli hash degli URL per scopi dinamici.

Supponiamo di aver implementato un pannello di controllo basato sui tab. Ad ogni refresh della pagina o ad ogni nuovo caricamento vogliamo poter selezionare sempre il tab corrente. Quindi useremo un URL come https://admin.sito/#tab-1. In JavaScript avremo:


'use strict';

const setCurrentTab = hash => {
    let tab = document.querySelector(hash);
    if(tab) {
        Array.prototype.forEach.call(document.querySelectorAll('.tab'), element => {
            element.style.display = 'none';
        });

        tab.style.display = 'block';
    }
};

document.addEventListener('DOMContentLoaded', () => {
    if(location.hash) {
        setCurrentTab(location.hash);
    }
});

Se effettuiamo degli upload senza AJAX possiamo comunque usare questa tecnica utilizzando un semplice redirect.

Documentazione

window.location