![Embeber una pagina web dentro de otra responsive [HTML]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXc9dCU4SveSA-EwkbCK7iLzHRPJTOw6vsamAYcGY3V-gWoJrpczCMjk946M0Z3kYGVtk4dUcLi5i4D-biXYncgMrLYkiFKoScTPgXZYFTg4NLChot2IoyPdRYDPCV7v_lG5YaAZ99dgGNrf0aRcazAWwhBkH95XntHljtceNulgHAL37a7GVQ_dZnoQ/s1920/Embeber%20una%20pagina%20web%20dentro%20de%20otra%20responsive%20%5BHTML%5D.jpg)
Queridos lectores, les cuento que recientemente estoy haciendo un proyecto de pauta para la ESPOL, Escuela Politécnica del Litoral, y necesitabamos colocar unas landing page que habian sido desarrollada en mi hosting y dominio, en el sitio de la Espol, obviamente para que las paginas tuvieran una buena visualización no solo tenían que ser responsive sino que además en la pagína que se colocarian no debia haber diseño de template, cabecera - header, o footer.
Era importante que fueran responsive para que se adaptaran a todos los tamaños de pantalla dado que mucha de la navegación se haría en celular.
El recurso que utilizaremos es el IFRAME, este sirve para crear una ventana en la cual se puede mostrar otro contenido como un vídeo de YouTube e incluso una página web completa como es nuestro caso.
Las razones por las que quisieras colocar una pagina web dentro de otra con iframe:
- Para mostrar contenido dinámico en una página web sin necesidad de actualizar la página principal.
- Para insertar contenido de otras webs sin tener que cambiar la apariencia de la web principal.
- Para permitir a los usuarios ver contenido de otros sitios web sin abandonar la web principal.
- Para añadir contenido interactivo a una página web sin tener que programar y desarrollar el código.
- Para mostrar contenido de una forma segura sin exponer el código fuente.
- Para integrar contenido de otros sitios web de forma sencilla.
- Para mostrar contenido de una forma ágil, sin tener que cargar todo el contenido de una página web.
- Para ofrecer contenido de una forma atractiva, diferente y din
A continuación encontrarás un código html, este código se puede utilizar en cualquier cms como Blogger, Wordpress, etc.
Este código lo que hace es eliminar cualquier plantilla, estilo o contenido de la página que será la receptora y colocá la página que deseas embeber de manera responsive dentro.
Los pasos a seguir son:
- Copia el siguiente código
<html>
<head>
<title>Título de la Página</title>
</head>
<body>
<script type="text/javascript">
// Eliminar todos los elementos de la página actual
document.querySelectorAll('*').forEach(function(node) {
if (node !== document.querySelector('html') && node !== document.querySelector('head') && node !== document.querySelector('body')) {
node.parentNode.removeChild(node);
}
});
// Agregar la iframe para embeber la página web
let iframe = document.createElement('iframe');
iframe.src = 'https://www.colocar-la-url-de-la-pagina-a-embeber.com/';
iframe.style.position = 'absolute';
iframe.style.top = '0';
iframe.style.left = '0';
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.style.border = 'none';
document.body.appendChild(iframe);
</script>
</body>
</html>
- El texto que esta marcado en celeste remplázalo con el título de la página que vas a embeber.
- El texto que esta marcado en amarrillo deberas reemplazarlo por la URL de la página que deseas embeber dentro.
De esta forma podrás colocar, embeber un sitio web dentro de otro.
No hay comentarios.:
Publicar un comentario
Déjame tu comentario o consulta.