Script para navegação dinâmica em páginas web. Veja a explicação e uso com Ajax no meu blog.
Exemplo de registro de múltiplos eventos, no caso temos 2, o primeiro (color) muda a cor de fundo e o segundo (say) exibe uma mensagem para alguém em uma div, os dois são registrados. Podendo avançar e voltar no histórico, repare que quando se atualiza ou acessa a página pelo bookmark somente um estado de um evento é reconstruido. Olhe no monitor de fundo cinza escuro acima. Observe também o link Say Hello World (forced call) que ativa chamada forçada (veja o código lá em baixo, no segundo parametro é fornecido true, lembra?), ou seja clicando seguidamente nele as chamadas serão acrescentadas ao histórico, já nos outros somente uma chamada é registrada.
//Function that returns the log with document.navigators properties
function logit(){
var navs = document.navigators;
var caller_and_data = (navs.data_buffer) ? "<br />" +
"caller = " + navs.data_buffer.match(/#\[([^\]]+)\]/)[1] +
"; data = " + navs.data_buffer.match(/#\[[^\]]+\](.*)/)[1]
: "";
var logit = "" +
"location = " + window.location.href +
"<br />data_buffer = " + navs.data_buffer +
caller_and_data +
"<br />called? = " + ((navs.called) ? "yes" : "not yet") +
"; running = " + ((navs.running) ? "yes" : "not yet") +
"<br /><br />history:<br />" + navs.history.join(" | ");
return logit;
}
//First event handler, to set the body bgcolor
color = onnavigate("color", function(color){
$tag("body")[0].style.backgroundColor = "#" + color;
})
//Second event handler, to say hello to someone
say = onnavigate("say", function(name){
$("greetings").innerHTML = "Hello, " + name;
})
function init(e){
//Showing 4 random colors to chose
var colors = $("colors");
(5).times(function(i){
var a = document.createElement("a");
var color = random_color();
a.href = "javascript: color('"+color+"')"
a.style.backgroundColor = "#" + color;
colors.appendChild(a);
});
var monitor = $("monitor");
//To refresh the log of the calls and history, periodically
setInterval(function(){
monitor.innerHTML = logit();
}, 350);
}
window.onload = init;And in the <body>
<div id="colors"><!-- <a>s created dinamically --></div>
<p id="greetings"><!-- text created dinamically --></p>
<div id="monitor"><!-- text created dinamically --></div>
<ul>
<li><a href="javascript: say('World', true)">Say Hello World (forced call)</a></li>
<li><a href="javascript: say('Bill')">Say Hello Bill</a></li>
<li><a href="javascript: say((prompt('Say Your Name') || 'Nobody'))">Say Hello To You</a></li>
</ul>
<div id="source"><!-- the code that you are reading --></div>