20 abril, 2016

Enmascarar una website en un IFRAME (fullscreen)

Para poder enmascarar o incrustar un website completo dentro de un iframe HTML y que esta ocupe toda la pantalla (fullscreen) del navegador, sin barras de scroll ni otras limitaciones. De modo que al visualizarla aparezca la propia página cubriendo todo el espacio del navegador y que a simple viste nose vea que es un iframe (al menos que se mire el código fuente).

Simplemente nos bastaría con aplicar este CSS y HTML donde "URL_WEBSITE" sería la URL completa del sitio web.
<html>
<head>
<style type="text/css">
html, body, div, iframe { margin:0; padding:0; height:100%; }
iframe { display:block; width:100%;  border:none;}
</style>
</head>
<body>
<center><iframe src="URL_WEBSITE"></iframe></center>
</body>
</html>
Para que nos puede ser útil?

Una de las necesidades de encapsular todo un sitio web en un iframe, sería la de mostrar un ese website con un nombre de dominio (DNS) "X" para que apunte a otro dominio "Z" (siendo el mismo website), basicamente como una redirección interna, de modo que al acceder a "X" esta apunte realmente a "Z", mostrándonos así "Z" en "X".

En el caso de tener un website el cual su DNS sea: "www.midominio.nombreServicio.com" y queramos redirigirlo a un dominio más personalizado tipo "www.midonio.com", puede darse el caso de que el servicio que estemos usando no nos permita redirigir a un nuevo dominio de nombres, por lo que la opción sería alquilar un hosting gratuito en el cual nuestro nombre de dominio (previamente adquirido/comprado) podamos establecerlo en dicho hosting y con un fichero HTML simplemente insertar un iframe que redireccione al original nombre de dominio del servicio en cuestión.

Sería como emascarar nuestro website dentro de un iframe para que el usuario final acceda a "midominio.com" y no a "midominio.servicio.com" que es realmente donde está redirigido.

Saludos!
Entradas Relacionadas