Já que você esta carregando estas páginas dinamicamente o correto seria usar a History API e salvar este "novo estado".
Como você não postou nenhum código de como irá gerenciar as chamadas (.load()
) este exemplo assume que:
- o "rooteamento" será disparado no evento
click
- a "rota" será um valor no atributo
data-value=""
no botão
- um "contêiner" irá servir para mostrar o conteúdo carregado
- ao retornar ao estado padrão do histórico (null) o contêiner é limpo
EXEMPLO
<body>
<div id="container"></div>
<button type="button" data-value="pagina1.html" class="navigate">Carregar pagina1.html</button>
<button type="button" data-value="pagina2.html" class="navigate">Carregar pagina2.html</button>
<button type="button" data-value="pagina3.html" class="navigate">Carregar pagina3.html</button>
<script src="path/to/jequery.js"></script>
<script>
$('.navigate ').on('click', function() {
let target = $(this).attr('data-value')
$('#container').load(target, function() {
history.pushState(target, "", "/")
})
})
window.addEventListener("popstate", function(evt) {
if ( evt.state ) {
$('#container').load(evt.state)
} else {
$('#container').html('')
}
}, false)
</script>
</body>
Nas páginas um simples <h1>
indicando em qual página esta...você poderá navegar no histórico a "frente" e de "volta".
O estado inicial do histórico é null
, ao chegar no estado inicial (caso de retornar) apenas exiba sua interface padrão.
ElectronJS
citado pelo @GuilhermeNascimento, você também pode estudar um pouco sobrePWA
. Além do mais, este seu requisito, me parece muito com umSPA
. Talvez uma ferramenta que venha a lhe ajudar, seja oQuasar Framework
, sejaPWA
ouElectronJS