El siguiente código consulta un archivo state.json durante la carga y actualiza el interruptor deslizante. Utiliza fetch(...) . Funciona.

Al hacer clic en el texto "Haga clic en este texto...", el div superior se reemplaza por otro texto con HTMX.

Problema : al hacer clic en el botón "Atrás" del navegador, el control deslizante del interruptor se mueve nuevamente (parpadeando) , y no debería: solo el div #me debe ser modificado por HTMX, no el resto.

Pregunta: ¿cómo evitar que el interruptor parpadee al hacer el historial Atrás? (incluso si eliminamos la transición CSS, todavía tenemos un parpadeo muy rápido).

Demostración en vivo aquí .

index.php

 <script src="https://unpkg.com/htmx.org@1.8.0"></script> <style> .switch { appearance: none; height: 30px; width: 52px; background-image: linear-gradient(to bottom, transparent 0 22px, dodgerBlue 22px), linear-gradient(to right, white 0 22px, dodgerBlue 22px 60px); background-position: 4px 4px; } .switch { transition: 0.2s; } .switch:checked { background-position: 26px 4px; } </style> <div hx-get="page2.txt" hx-push-url="true" id="me">Click on this text to go to next page</div> <input type="checkbox" id="checkbox" class="switch"> <script> fetch("state.json").then(r => r.json()).then(data => { document.getElementById("checkbox").checked = data['state'] == 'checked'; }); </script>

page2.txt

 Hello, now click on the "Back" history button of your browser.

state.json

 {"state": "checked"}