como ocultar la URLMuchas veces necesitamos saber como ocultar la URL, o enmascarar una URL para que la misma no se visualice en la barra de direcciones.

Si bien esto puede realizarce por medio del cPanel o Panel de Control de nuestro servicio de hosting, tambien podemos ocultar la url por medio de la combinacion de un simple código HTML y CSS.

Muchas veces es recomendable ocultar la URL real de nuestro sitio, por fines estéticos o de marketing, permitiendo a nuestros usuarios ver otra dirección URL.
También puedes incluir una página dentro de otra, sin que el usuario lo note.

Con este truco podrás realizarlo tantas veces como desees.

Se trata de utilizar la etiqueta <iframe> con algunas modificaciones, y con el agregado de algunas propiedades CSS.

CASO DE EJEMPLO:

Supongamos que tu quieres que el usuario ingrese a tu sitio, por ejemplo http://www.tudominio.com/ , pero que vea el contenido de otra URL.

Al ingresar a tu sitio, por defecto tu sitio web mostraría el contenido del archivo index.html (ó index.php, ó index.asp, dependiendo del lenguaje) , por lo tanto trabajaremos sobre el archivo: http://www.tudominio.com/index.html

Digamos que tu NO quieres mostrar el contenido de ese archivo, sino que quieres que el usuario vea por ejemplo otra página que se encuentra en http://www.tudominio.com/home.html (o incluso puedes desear que vea una URL externa a tu sitio), pero que en su barra de direcciones siga viendo http://www.tudominio.com/

INSTRUCCIONES PARA OCULTAR LA URL:

Pues bien, entonces lo que debes hacer para ocultar la url, es lo siguiente:

En el archivo http://www.tudominio.com/index.html debes insertar un iframe.
Para esto debes usar la etiqueta <iframe> que tiene la siguiente sintaxis:

<iframe src="xxxxxxxxx.html"></iframe>

Donde “xxxxxxxxx.html” debes reemplazarlo por la URL que quieres insertar y que será la que contendrá el contenido real que se moestrará, en este caso dijimos que seria http://www.tudominio.com/home.html

Entonces, dentro de http://www.tudominio.com/index.html, y luego de la etiqueta <body> debes colocar:

<iframe src="http://www.tudominio.com/home.html"></iframe>

Con esto insertamos la “ventana” (iframe) por donde mostraremos  el contenido del archivo home.html.

Y también dentro de http://www.tudominio.com/index.html, antes de la etiqueta de cierre </header> debes colocar el siguiente codigo CSS:

<style type="text/css">
html, body, div, iframe { margin:0; padding:0; height:100%; }
iframe { display:block; width:100%; border:none; }
</style>

Con este codigo CSS, le decimos que la “ventana” del <iframe> la lleve al mismo tamaño del navedador (máximo de alto y ancho).

Entonces cuando vayamos al URL  http://www.tudominio.com/ (que es el que contiene el iframe), nos mostrará realmente el contenido del URL http://www.tudominio.com/home.html.

Código final y completo

Archivo http://www.tudominio.com/index.html:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Documento sin título</title>
 <style type="text/css"> 
html, body, div, iframe { 
margin:0; 
padding:0; 
height:100%; 
} 
iframe { 
display:block; 
width:100%; 
border:none; } 
</style>
 </head>
 <body>
 <iframe src="http://www.tudominio.com/home.html"></iframe>
  </body>
 </html>

 

Y asi ocultaremos la URL real (http://www.tudominio.com/home.html).

Saludos y espero te sea de gran utilidad !!
Cristian

*** ¿ Te gustó este recurso ?
Imagina todo lo que puedes aprender con el Curso Completo de Maquetación Web en Video.
Mira todos los detalles AQUI !