Botão voltar do navegador

ViniciusKruz · 14 de dezembro de 2016

Criei um site e ao clicar no link das páginas, no menu principal, o navegador não dá refresh e carrega uma nova página e sim apenas uma div com os dados desta nova página, desta forma fica legal porque não precisa carregar uma página inteira mas apenas o conteúdo, mantendo o header e footer igual para todas as páginas, só que nisso tem um problema, o botão voltar do navegador não funciona, porque ele entende que não saiu da página principal.

Alguém teria uma forma de fazer o navegador entender que mudou de página ao carregar um novo conteúdo?

DiF · 14 de dezembro de 2016

@ViniciusKruz Pelo que entendi você está tentando usar a técnica ajax(requisição assíncrona sem refresh).

Poste o código para poder entender o que há de errado.

Provavelmente ele não entende o retorno porque você cria uma nova aba/janela com o conteúdo.. então de fato você não fica na mesma "janela" que o navegador abriu a página.

Use o jQuery com ajax para fazer isso e inserir os conteúdos dinamicamente sem a necessidade de refresh(atualização)

ViniciusKruz · 14 de dezembro de 2016

@DiF

Então, este é o menu:

<div id="menuNav">
	<div id="conteiner-menu">
		<ul class="topnav" id="myTopnav">
			<li><a class="active" href="#home" onclick="carregaConteudo('home')">Home</a></li>
			<li><a href="#" onclick="carregaConteudo('relogio')">Relógio</a></li>
			<li><a href="#" onclick="carregaConteudo('agendamento')">Agendamento</a></li>
			<li><a href="#" onclick="carregaConteudo('comandos')">Comandos</a></li>
			<li><a href="#" onclick="carregaConteudo('rede')">Rede</a></li>
			<li><a href="#" onclick="carregaConteudo('reiniciar')">Reiniciar</a></li>
			<li><a href="#" onclick="carregaConteudo('login')">Login</a></li>
			<li class="icon">
			<a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
			</li>
		</ul>
	</div>
</div>

Estas são as funções do menu:

function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

function carregaConteudo(content) {
	if(content==="home"){
		document.getElementById("cont").innerHTML = "Home";
		document.getElementById("id_caixa_titulo_page").style.display = "none";
		tela="home";
    }
	if(content==="relogio"){
		jQuery(function($){
			$('#cont').load('content_rel.htm',ativaCab("relogio.png","Relógio"));
		});
		tela="relogio";
		cmd=0;
		//document.getElementById("cont").innerHTML = "Comandos";
	}
	if(content==="agendamento"){
		jQuery(function($){
			$('#cont').load('content_agen.htm',ativaCab("agenda.png","Agendamento"));
		});
		tela="acionamentos";
		cmd=0;
		//document.getElementById("cont").innerHTML = "Comandos";
	}
	
	if(content==="comandos"){
		jQuery(function($){
			$('#cont').load('content_control.htm',ativaCab("controle.png","Comandos"));
		});
		tela="comandos";
		cmd=0;
		//document.getElementById("cont").innerHTML = "Comandos";
	}
	if(content==="rede"){
		jQuery(function($){
			$('#cont').load('content_cfgip.htm',ativaCab("nuvem.png","Opções de rede"));
		});
		tela="rede";
	}
	if(content==="reiniciar"){
		jQuery(function($){
			$('#cont').load('content_reboot.htm',ativaCab("refresh.png","Reinicialização"));
		});
		tela="reiniciar";
	}
	if(content==="login"){
		jQuery(function($){
			$('#cont').load('content_login.htm',ativaCab("login.png","Login de acesso"));
		});
		tela="login";
	}
}

function ativaCab(imagem,titulo){
	document.getElementById("id_caixa_titulo_page").style.display = "-webkit-flex";
	document.getElementById("id_caixa_titulo_page").style.display = "flex";
	document.getElementById("img_titulo_page").src=imagem;
	document.getElementById("id_titulo_page").innerHTML=titulo;
}

Nas funções do menu, é chamado o conteúdo da página:

jQuery(function($){
            $('#cont').load('content_rel.htm',ativaCab("relogio.png","Relógio"));
 });

E é lançado na div com a id #cont:

<div class="wrapper" id="cont">
</div>

Desta forma, toda vez que é clicado algum item do menu, as funções direcionam o conteúdo correto.

DiF · 15 de dezembro de 2016

@ViniciusKruz Tenta minimizar a parte do menu, você pode trocar a lista não ordenada pelo elemento html 5 para menus.

Retire a chamada javascript do menu e use o jQuery para pegar a url de cada link e carregar dentro do div que você quer.

Exemplo:

<div id="nav">
	<a href="relogio.html">Relógio</a>
	<a href="agendamento.html">Agendamento</a>
	<a href="comandos.html">Comandos</a>
	<a href="rede.html">Redes</a>
	<a href="reiniciar.html">Reiniciar</a>
    <a href="login.html">Login</a>
</div>

PS: deixei bem simples mesmo, para fins educativos.

No jQuery:

$(document).ready(function() {
	$('#nav a').on('click', function (e) {
		e.preventDefault();
		var page = $(this).attr('href');
		$('#cont').load(page);
	});
});

A explicação é a seguinte:

Quando o documento estiver pronto, o elemento <a> de #nav é atribuído a uma função on(), cujo um método que atribui manipuladores de eventos para o conjunto selecionado de elementos no objeto jQuery.

A ação é a de click, ou seja, quando você clicar no link do menu. Como segundo parâmetro leva uma função. E é dentro desta função que vamos chamar a página.

Esta função recebe o parâmetro "e". então podemos atribuir uma função chamada preventDefault(). Ficando e.preventDefault().

Ela é a mesma coisa que "return false", previne erros e execuções indesejadas.

Em seguida, criamos uma variável chamada page, que recebe o psudo elemento $(this) que referencia o próprio elemento e atribuímos uma função chamada attr() com o parâmetro "href" ou seja, esta função é usada para pegar o valor do elemento atribuído.

E agora vem a mágica do negócio, o elemento div que vai receber o conteúdo chama a função load() que como parâmetro é o valor do href do link clicado.

É mais ou menos por aí. o seu código inicial pode ser reduzido e assim eliminando possíveis problemas de conflito..

PS: não é muito interessante misturar o jquery com javascript puro. Pode dar conflito em algo feito errado.

ViniciusKruz · 15 de dezembro de 2016

Caramba, que aula, quanto custa mesmo?? rerere

Me dá um tempo pra eu digerir tudo, é muita informação.

DiF · 15 de dezembro de 2016

@ViniciusKruz Você tem todo o tempo do mundo para digerir a explicação!

Só atente-se de que o código é simples e não possui alguns recursos que você colocou no seu código inicial. Mas você pode implementar neste meu exemplo usando o jQuery! Como por exemplo a chamada da classe responsiva do menu, deixar um link com a classe active... para destaque.. e etc.

Mas primeiro, foque no funcionamento do menu e conteúdo, depois foque na parte estética!

Uma coisa de cada vez!

ViniciusKruz · 15 de dezembro de 2016

@DiF

Amigo, li, reli e agradeço imensamente o tempo que você dispensou pra me dar uma aula.

Coloquei de forma simples, como você sugeriu, e tive dois resultados, o primeiro, se eu não usar a função .js, dá certo, ao clicar no link do item do menu, abre a nova página e o botão voltar do navegador funciona, porém, a página abre como uma nova página e não dentro da div #cont. Daí se eu ativo a função .js, a nova página passa a abrir dentro da div #cont, só que não funciona o botão voltar do navegador, ou seja, como estava antes com minhas funções, só que muuuito mais elegante rsrs. A partir desse seu exemplo, como resolvo o segundo resultado?

Valeu, abração!!

DiF · 15 de dezembro de 2016

@ViniciusKruz Lendo a sua resposta e re lendo a pauta inicial me dei conta. Quando você usa o macete de carregar as páginas por javascript sem refresh, realmente o botão voltar não pode ser usado quando usado a função load().

Mas, talvez possa funcionar se utilizar a função $.ajax() e inserir o conteúdo na função de sucesso. Além disso teria que implementar uma função de onpopstate para atribuir o evento de voltar.

Agora pergunto, se a ideia é usar links dentro da mesma página de forma "assíncrona" , precisa realmente que o botão voltar funcione?

A tendência de sites hj em dia é "onepage" com âncoras que puxam para cima ou para baixo ou inserir dados dinamicamente em um elemento mas sem o uso dos botões do navegador.

Mas se realmente precisa de um "voltar" uma "gambiarra" seria implementar um botão dentro do site que volte para o conteúdo anterior.

parent.history.back();

Por exemplo:

$(document).ready(function(){
	$('#back').on('click',function(e){
        e.preventDefault();
		parent.history.back();
	});
});

<a href="#" id="back">Voltar</a>

ViniciusKruz · 15 de dezembro de 2016

7 horas atrás, DiF disse:

Agora pergunto, se a ideia é usar links dentro da mesma página de forma "assíncrona" , precisa realmente que o botão voltar funcione?

Realmente necessário não é, eu até já pensei mesmo em deixar assim, sem funcionar, mas eu achava que daria a impressão de que foi mal feito, entende. De repente eu deixe assim mesmo sem funcionar, mas de qualquer maneira vou estudar a dica do ajax+onpotstate, se der certo ótimo, mas se não der, vou seguir seu conselho e não vou me prender a isto.

7 horas atrás, DiF disse:

Mas se realmente precisa de um "voltar" uma "gambiarra" seria implementar um botão dentro do site que volte para o conteúdo anterior.

É uma opção também, vou analisar com calma tudo o que me disse e encontrarei a melhor forma. Este site roda em um sistema embarcado, daí tem que ser o mais resumido possível. Futuramente ainda terei que eliminar as funções feitas em jQuery e passar tudo para javascript puro, pra evitar carregar os arquivos dele que são muito grandes e pesam na abertura da página. Mas isso ainda não é uma prioridade, primeiro tem que funcionar, depois me preocuparei com estética e desempenho.

Amigo, muitíssimo obrigado pelas dicas, ajudaram muito.

DiF · 15 de dezembro de 2016

@ViniciusKruz Só um adento, o jQuery não pesa tanto assim. Não há necessidade de passar para javascript puro, alias, é até pior porque aumenta o número de linhas do código, onde no jQuery é tudo mais simplificado.

Basta que use a versão minimizada do jQuery, por exemplo o arquivo jQuery.3.1.min.js.

Além disso, nos seus códigos jQuery você pode minimiza-los através de um compressor de script https://jscompress.com/

Fazendo com o que o seu javascript fique totalmente comprimido, diminuindo o tamanho e o tempo de carregamento.

Detalhe: O Clube do Hardware também usa o jQuery! Você vê queda ou desempenho ruim? ( aqui no meu pc e internet não! rsrsr)

ViniciusKruz · 15 de dezembro de 2016

@DiF No meu caso pesa muito porque é sistema embarcado (microcontrolador) rsrs. Já estou usando a versão mínima do jQuery, sem ele carrega a página em 1 segundo, com ele chega a levar mais de 10 seg. Eu até postei uma dúvida a esse respeito outro dia, lembra? um colega até me deu essa dica de que é possível pegar o retorno de um servidor web com javascript puro, só que ele não disse mais nada, mas já ta bom, só de saber que existe uma possibilidade já ajuda. Na verdade eu só preciso disso, envio uma requisição e pego um retorno, pra isso eu uso aí umas 10 linhas para cada função com jQuery/Ajax, e deve ter umas 20 funções, se eu fizer cada função com javascript puro onde cada função dê 30 linhas cada, ainda estarei no lucro com relação ao jQuery, entende?!!

DiF · 15 de dezembro de 2016

@ViniciusKruz Ah.. agora que mencionou realmente não lembrava. Estava pensando que era para uso Web via navegador(site e etc)

ViniciusKruz · 15 de dezembro de 2016

@DiF Então, no caso do sistema embarcado, não dá pra linkar o arquivo, ele tem que ficar hospedado no microcontrolador ou em uma memória flash qualquer.

DiF · 15 de dezembro de 2016

@ViniciusKruz Bom.. nesse ponto, já fica além dos meus conhecimentos. rsrss Não sei nada sobre microcontroladores.

De qualquer forma, uma hora aparece alguém que saiba sobre o assunto como da outra vez!

ViniciusKruz · 15 de dezembro de 2016

@DiF Tá de boa, você não tem noção do quanto já me ajudou.

carecazn · 18 de dezembro de 2016

Bom dia, não entro na conversa de vocês, muito além dos meus conhecimentos, rsrsrsrsrs, eu uso voltar assim

<div class="voltar">
<a href="<?= HOME ?>">Home</a>  |  <a href="javascript:history.back()">Voltar</a>
</div>

Em todas as páginas aparece o link para a Home e o link para voltar, funciona muito bem.

adicionado 0 minutos depois

agora, carecazn disse:
Bom dia, não entro na conversa de vocês, muito além dos meus conhecimentos, rsrsrsrsrs, eu uso voltar assim
<div class="voltar">
<a href="<?= HOME ?>">Home</a>  |  <a href="javascript:history.back()">Voltar</a>
</div>
Em todas as páginas aparece o link para a Home e o link para voltar, funciona muito bem.