[aporte] Cómo mantener la misma url en todas las páginas

[RodrigoG]

Antes de empezar nace la pregunta ¿Y para qué querría yo hacer eso? bueno resulta que en mi trabajo me pidieron si podía lograr ese efecto para una instalación de Claroline (sistema e-Learning), porque "los usuarios se sentían inseguros al poder cambiar los parámetros de la URL". Es evidente que ocultar la URL no aporta nada de seguridad, sin embargo presenta un reto interesante.

Adicionalmente, la arquitectura permite incrustar una función "persistente al sitio", es decir, cuyo código se ejecuta sólo la primera vez que el usuario ingresa al sitio. El parámetro data de ésta función estará presente durante toda la navegación. Esto podría ser útil para, por ejemplo no cortar una canción cuando uno pase de una página a otra.

A continuación copio el código, y explico y explico cómo usarlo.

Si les interesa explico un poco más en mi blog (recién estrenado )

Código Javascript:

/**
* Hace que la url dada por urlBase se mantenga fija en la
* barra del navegador. Adicionalmente, ejecuta la función
* callback si es que se necesita que un script se ejecute
* en segundo plano sin recargarse mientras se navega por
* el sitio.
*
* Copyright 2011, Rodrigo González
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* or GPL Version 3 (http://www.opensource.org/licenses/GPL-3.0) licenses.
*
* http://desarrolladorweb.cl/blog/2011/mantener-la-misma-url-con-javascript/
*
* @param string urlBase la url base del sitio. Por ejemplo "http://desarrolladorweb.cl/blog/"
* por omisión toma el valor del protocolo más el dominio. Debe terminar en '/'
* @param function callbackInicio una función javascript a ser ejecutada
* al inicio de la navegación, es decir, en la primera vez que el usuario
* ingresa al sitio.
* @param function callbackCambioPagina una función javascript a ser ejecutada
* cada vez que el usuario cambia de página.
*/
function mantenerUrlFija(urlBase, callbackInicio, callbackCambioPagina) {
 
// Variable necesaria para referenciar objetos entre páginas.
top.window.mantenerUrlFija_Data = top.window.mantenerUrlFija_Data || {};
 
// Determinar la url base en el caso de que no
// se haya pasado como parámetro.
urlBase = urlBase || top.location.protocol +'//'+ top.location.host + '/';
 
// En el caso de que la url actual sea distinta a la que se
// debería mostrar, se hace la redirección.
if(top.location.href != urlBase) {
top.location.href = urlBase;
return;
}
 
// El id del iframe.
var ID_IFRAME = '__mantenerUrlFija__';
 
// En el caso de que sea la primera vez que se abre la ventana,
// entonces hay que construir un nuevo documento html y poner dentro
// el iframe dentro del cual se incrusta el contenido de la página.
if(!top.document.getElementById(ID_IFRAME)) {
 
// Los nodos que actualmente están.
var headViejo = document.getElementsByTagName('head')[0];
var bodyViejo = document.getElementsByTagName('body')[0];
 
// Crea el nuevo nodo del head.
var headNuevo = document.createElement('head');
 
// Adjunta el titulo de la pagina.
var tituloPagina = document.createElement('title');
var textoTituloPagina = headViejo.getElementsByTagName('title')[0].firstChild.nodeValue;
tituloPagina.appendChild(document.createTextNode(textoTituloPagina));
headNuevo.appendChild(tituloPagina);
 
// Adjunta las reglas css de estilo de la pagina.
var style = document.createElement('style');
style.type = 'text/css';
var css = 'html{overflow:hidden}';
css += 'html,body,iframe {width: 100%;height: 100%;border:0;margin:0;padding:0}';
css = document.createTextNode(css);
if(style.styleSheet) // IE
style.styleSheet.cssText = css.nodeValue;
else // Navegadores decentes
style.appendChild(css);*
headNuevo.appendChild(style);
 
// Crea el nuevo nodo del body.
var bodyNuevo = document.createElement('body');
 
// El nodo html actual.
var html = document.getElementsByTagName('html')[0];
var htmlPivote = html.cloneNode(true);
 
// Adjunta el iframe.
var iframe = document.createElement('iframe');
iframe.id = ID_IFRAME;
bodyNuevo.appendChild(iframe);
 
// Elimina el nodo head viejo y agrega el nuevo.
html.removeChild(headViejo);
html.appendChild(headNuevo);
 
// Elimina el nodo Body viejo y agrega el nuevo.
html.removeChild(bodyViejo);
html.appendChild(bodyNuevo);
 
// Finalmente, escribir
iframe = document.getElementById(ID_IFRAME);
var documentoIframe = iframe.contentWindow || iframe.contentDocument;
if(documentoIframe.document) documentoIframe = documentoIframe.document;
// curiosamente, htmlPivote.firstChild.nodeValue no funciona...
documentoIframe.write(htmlPivote.innerHTML);
documentoIframe.close();
 
}
 
// Cuando se carga el iframe.
top.document.getElementById(ID_IFRAME).onload = function(){
 
var documentoIframe = this.contentWindow || this.contentDocument;
if(documentoIframe.document) documentoIframe = documentoIframe.document;
 
// Se establecen los target de los enlaces para que operen
// dentro del iframe.
var enlaces = documentoIframe.getElementsByTagName('a');
 
// Crea una expresión regular para el dominio, la primera línea es genérica
// para escapar carácteres propios de una expresión regular.
var expDominio = urlBase.replace(/[-[\]{}()*+?.,\\^$|#\s\/]/g, "\\$&");
expDominio = new RegExp('^' + expDominio);
 
// Para cada enlace, establecer el target _self o _top según corresponda.
for(var i in enlaces)
enlaces[i].target = expDominio.test(enlaces[i].href) ? '_self' : '_top';
 
// Ejecuta la función sólo cuando se ingresa a la primera página de la navegación.
if(callbackInicio && !top.window.mantenerUrlFija_Data_OK) {
top.window.mantenerUrlFija_Data_OK = true;
var c = callbackInicio;
c(documentoIframe, top.window.mantenerUrlFija_Data);
}
 
// Ejecuta la función cada vez que se accede a otra página.
if(callbackCambioPagina) {
var _c = callbackCambioPagina;
_c(documentoIframe, top.window.mantenerUrlFija_Data);
}
 
} // iframe.onload
 
}
 

Forma de uso
El siguiente código debe ir en el head de cada página, obviamente entre etiquetas script y luego de que cargue el DOM (en el ejemplo utilizo window.onload, pero podría ser de otra forma, por ejemplo, con jQuery)

Código Javascript:

window.onload = function(){
 
// Url de la instalación del sitio, la que debe quedar fija.
var urlBase = 'http://www.dominio.tld/dir/';
 
// Llamar a la librería.
mantenerUrlFija(urlBase, function(iframe, data) {
// Agregar el código a ejecutar la primera vez que el usuario ingresa
// al sitio y que se mantenga vigente durante toda la navegación.
// No es muy recomendable para manipular DOM, dado que éste cambia
// al cambiar a otra página. Sin embargo es útil para referenciar variables
// globales a toda la navegación (que no se reinician al cambiar de página).
// En tal caso, utilizar data, por ejemplo: data.segundos = 0;
}, function(iframe, data) {
// Se ejecuta cada vez que se carga la página. Es útil para manipular el
// Dom de la página con los datos del sitio, guardados en data.
});
 
}
 

En http://desarrolladorweb.cl/blog/2011...on-javascript/ hay un ejemplo funcionando.

Saludos.