Objeto history y sus métodos.

NextByte · 28 Marzo 2019, 01:26 AM

Hola a todos, estoy empezando a curiosear con los métodos del objeto history que forma parte del objeto window dentro del DOM y tenía la curiosidad de en que casos puede ser útil. Creo que entender que el objeto history junto con sus métodos son rutiles cuando se necesitan crear varios estados de una pagina html , es decir, cuando quiero mi pagina de registro cree un estado cada vez que hace focus a una entrada distinta del formulario de esta manera si el usuario da para atrás conseguirá que no se salga de esa pagina html si no que se vaya al estado anterior que simplemente sera la misma pagina pero antes de que hiciera focus a la entrada actual, es un ejemplo poco útil pero ¿ esta bien mi forma de pensarlo ?, a partir de eso he checado un ejemplo como este:

Código HTML

Código (html4strict) [Seleccionar]


<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>pushState and popstate</title>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="boxes">
            <div class="box" id="box-1">one</div>
            <div class="box" id="box-2">two</div>
            <div class="box" id="box-3">three</div>
            <div class="box" id="box-4">four</div>
        </div>
        <script src="script.js"></script>
    </body>
</html>

Código JS

Código (javascript) [Seleccionar]


let boxes = Array.from(document.getElementsByClassName('box'));

function selectBox (id) {
    boxes.forEach(b => {
        b.classList.toggle('selected', b.id === id);
    });
}

boxes.forEach(b => {
    let id = b.id;
    b.addEventListener('click', e => {
        history.pushState({id}, `Selected: ${id}`, `./selected=${id}`)
        selectBox(id);
    });
});

window.addEventListener('popstate', e => {
    selectBox(e.state.id);
});

history.replaceState({id: null}, 'Default state', './');

Código CSS

Código (css) [Seleccionar]


.boxes {
    display: flex;
}

.box {
    --box-color: black;
    width: 200px;
    height: 200px;
    margin: 20px;
    box-sizing: border-box;
    display: block;
    border-radius: 2px;
    cursor: pointer;
    color: white;
    background-color: var(--box-color);
    border: 5px solid var(--box-color);
    font-size: 30px;
    font-family: sans-serif;
    font-weight: bold;
    text-align: center;
    line-height: 200px;
    transition: all 0.2s ease-out;
}

.box:hover {
    background-color: transparent;
    color: black;
}

.box.selected {
    transform: scale(1.2);
}

#box-1 {
    --box-color: red;
}

#box-2 {
    --box-color: green;
}

#box-3 {
    --box-color: blue;
}

#box-4 {
    --box-color: black;
}

El programa funciona bien en la navegación del historial hacia adelante y hacia atrás pero mi duda surge conforme a la actualización de la pagina, es decir, cuando yo actualizo la página me sale un error del método get pero desconozco si es posible hacer que esto no suceda y que simplemente se regrese al mismo estado de la página sin que salte ese error.

Test Foro de elhacker.net SMF 2.1

Objeto history y sus métodos.

NextByte