Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

JulioGreff

Solução para o Botão Voltar

Por , em Javascript

Recommended Posts

JulioGreff    0

JulioGreff
Postado

Achei (achei não, só simplifiquei) a solução para o botão voltar em Ajax. Essa solução já vem circulando na Internet faz tempo, mas não achei nada em português. Resolvi estudar os scripts e simplifica-los, resultando em um tutorial bem simples. Postei-o em meu blog.

Para os interessados: http://juliogreff.wordpress.com/2006/10/20...o-botao-voltar/

Compartilhar este post

Link para o post
Compartilhar em outros sites

sadboar    0

sadboar
Postado

eu fiz uma soluçao q pra mim ficou facil. Eu uso iframe pra passar os comandos javascript pro top.documentta lindo!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Akwen    1

Akwen
Postado

Julio, ou qualquer pessoa que possa ajudar, preciso de uma pequena ajuda no seu script. Adaptei uma pequena parte para poder usar prototype para chamar as páginas. Fico assim:

 

index.php

<html><head><title>Back Button Improved</title><script src="prototype-1.4.0.js"></script><script type="text/javascript">// Event Handlerfunction addEvent(obj, evType, fn){	 if (obj.addEventListener){		 obj.addEventListener(evType, fn, true);		 return true;	 } else if (obj.attachEvent){		 var r = obj.attachEvent("on"+evType, fn);		return r;	 } else {		return false;	 }}function PageLocator(propertyToUse, separator) {	this.propertyToUse = propertyToUse;	this.separator = separator;	this.defaultQS = 1;}PageLocator.prototype.getLocation = function() {	return eval(this.propertyToUse);}PageLocator.prototype.getHash = function() {	var url = this.getLocation();	if(url.indexOf(this.separator)>-1) {		var url_elements = url.split(this.separator);		return url_elements[url_elements.length-1];	}	else return this.defaultQS;}PageLocator.prototype.getHref = function() {	var url = this.getLocation();	var url_elements = url.split(this.separator);	return url_elements[0];}// IFrame Fixervar iFrameFix = {	initialize: function(frameid) {	  this.frameid = 'ajaxnav';	  iFrameFix.locator = new PageLocator('document.frames["'+this.frameid+'"].getLocation()', "?hash=");	  iFrameFix.windowlocator = new PageLocator("window.location.href", "#");	  iFrameFix.fixLinks();	  setTimeout("iFrameFix.checkBookmark()",100);	},	fixLinks: function() {	  var links = document.getElementsByTagName("A");	  for(var i=0; i<links.length; i++) {		var href = links[i].getAttribute("href");		var hash = href.substr(href.indexOf("hash=")+5);		links[i].setAttribute("href","java script:document.getElementById('ajaxnav').setAttribute('src', 'mock-page.php?hash="+hash+"');");	  }	},	checkBookmark: function() {	  window.location.hash = iFrameFix.locator.getHash();	  iFrameFix.checkChanges(0);	},	checkChanges: function(location) {	  if(iFrameFix.locator.getHash() != location) {		doGetPage(iFrameFix.locator.getHash());		window.location.hash = iFrameFix.locator.getHash();	  }	  setTimeout("iFrameFix.checkChanges(" + iFrameFix.locator.getHash() + ")", 200);	}}// URL Fixervar urlFix = {	initialize: function() {	  urlFix.locator = new PageLocator("window.location.href", "#");	  urlFix.fixLinks();	  urlFix.checkChanges(0);	},	fixLinks: function() {	  var links = document.getElementsByTagName("A");	  for(var i=0; i<links.length; i++) {		var href = links[i].getAttribute("href");		var hash = href.substr(href.indexOf("hash=")+5);		links[i].setAttribute("href","#"+hash);	  }	},	checkChanges: function(location) {	  if(urlFix.locator.getHash() != location) doGetPage(urlFix.locator.getHash());	  setTimeout("urlFix.checkChanges(" + urlFix.locator.getHash() + ")", 200);	}}function doGetPage(hash) {new Ajax.Updater('container', hash+'.htm', {asynchronous:true, evalScripts:true});}function Fix() {	document.iframesfix ? iFrameFix.initialize() : urlFix.initialize();}var detect = navigator.userAgent.toLowerCase();if(detect.indexOf("msie")>-1) document.iframesfix = true;addEvent(window, "load", Fix);</script></head><body><div id="container"> </div><ul><li><a href="content.php?hash=conteudo">Page 1</a></li><li><a href="content.php?hash=2">Page 2</a></li><li><a href="content.php?hash=3">Page 3</a></li></ul><script type="text/javascript">if(document.iframesfix) {  var windowlocator = new PageLocator("window.location.href", "#");  var iframe = document.createElement('iframe');  iframe.setAttribute('id', 'ajaxnav');  iframe.setAttribute('name', 'ajaxnav');  iframe.setAttribute('src', 'mock-page.php?hash='+windowlocator.getHash());  iframe.style.display = "none";  document.body.appendChild(iframe);}</script></body></html>

 

mock-page.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>	<title>Dummy page</title>	<script type="text/javascript">		function getLocation() {			return '<?php print "http://" . $_SERVER['SERVER_NAME'] . $_SERVER['PHP_SELF'] . "?" . $_SERVER['QUERY_STRING'] ?>';		}	</script></head><body> <?phpprint "hash: [" . $_GET['hash'] . "]<br />";print "self: [" . "http://" . $_SERVER['SERVER_NAME'] . $_SERVER['PHP_SELF'] . "?" . $_SERVER['QUERY_STRING'] . "]";?></body></html>

A mock-page eu nao alterei. Coloquei somente pra ficar completo. Mudei somente na index, a parte "function doGetPage(hash) {

new Ajax.Updater('container', hash+'.htm'', {asynchronous:true, evalScripts:true});

}". Bom.. o problema e o seguinte, eu queria, ao inves de numeros, passar palavras. Tipo, se eu mando um hash 1, ele consegue chamar 1.htm. Mas se eu mando conteudo, ele até chama conteudo.htm, mas da um erro: Linha 1 Caractere 1 Erro 'conteudo' nao está definido Código 0 .

 

Como solucionar isso? Ajuda ae pessoal! Abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites

JulioGreff    0

JulioGreff
Postado

Olha, não deu pra testar ainda, mas tenta assim, nas chamadas para doGetPage:

doGetPage( eval('"' + urlFix.locator.getHash() + '"')); // ou iframeFix

Foi a coisa mais óbvia que consegui pensar agora. Quando chegar em casa eu testo e faço uma coisa decente... Vlw

Compartilhar este post

Link para o post
Compartilhar em outros sites

JulioGreff    0

JulioGreff
Postado

Meu Deus! Que barbaridade! Nem notem o que eu disse acima, devia estar fora de mim. Deve ser o seguinte:

setTimeout("urlFix.checkChanges(\"" + urlFix.locator.getHash() + "\")", 200);  // Ou iframeFix

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bermonruf    0

Bermonruf
Postado

Qual é o problema? Lembrando que ela não vem com função alguma de Ajax, é a sua que vai fazer a requisição, mas o resto é fácil, falaew o probelma

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bermonruf    0

Bermonruf
Postado

Dá uma olhada aqui com ela funcionando, clique nos links.

Mas só algumas coisas em relação aquela outra função:

[*]Aquela quebra os hashes, se você utilizar âncoras na sua página ela irá tentar carregar a página com conteúdo da âncora toda a vez que você tentar acessar com o hash da âncora.

[*]Ela é feita somente para Ajax, e junto com isso fica mais difícil adaptação de demais tipos de eventos, ou até alguma personalização a mais na requisição. Fica restrita à uma página que faz requisições a outras em uma <div> (não consegue fazer algo assim, consegue?).

[*]Ela não suporta registro de outros estados em conjunto, múltiplos eventos, como neste exemplo.

Uma das desvantagens da minha que pretendo melhorar na próxima versão é que ainda precisa salvar um arquivo separado para o iFrame, de resto só basta adaptar um pouco.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito