viernes, 13 de marzo de 2015

Insertar una Web dentro de otra, ventana completa ocultar la URL (enmascarar URL con iframe al 100%)


Muchas 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 ejemplohttp://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 archivoindex.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 enhttp://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 viendohttp://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 uniframe.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 URLhttp://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">
 <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 !!

5 comentarios:

  1. Hola,Gracias, esta muy bien, sin embargo al abrir mi pagina, no me deja editarla ya que de inmediato se redirecciona al otro sitio y no me da tiempo de editar nada en mi pagina, Como le hago para quitar el código de mi pagina y poder editarla?

    ResponderEliminar
  2. Más información de esto, "incluso puedes desear que vea una URL externa a tu sitio), pero que en su barra de direcciones siga viendo" mi url

    Saludos

    ResponderEliminar
  3. como puedo mostrar una pagina web dentro de otra pero que la que muestro se muestre completa sin scrolling

    ResponderEliminar