El elemento HTML iframe se usa a menudo para insertar contenido de otra fuente. El contenido que necesita cambiar el tamaño se realiza indirectamente mediante una etiqueta div. El truco es iniciar con una etiqueta div y encerrar dentro de una etiqueta iframe. Ahora proporcione iframe con CSS.
Nota: Para abrir el sitio de origen y cambiar el tamaño de su contenido, el sitio de origen debe estar incluido en el mismo directorio.
Ejemplo 1: a continuación se muestra la implementación del código HTML para cambiar el tamaño de los contenidos usando CSS interno : –
<html>
<head>
<style>
body {
background-color: LIGHTGREY;
}
#target {
width: 300px;
height: 200px;
overflow-y: auto;
overflow-x: auto;
resize: both;
position: relative;
z-index: 2;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<div id="target">
<iframe src="/tryit.php"></iframe>
</div>
</body>
</html>
Producción:
Aquí hemos utilizado una hoja de estilo interna para fijar la dimensión del área de visualización como ancho y alto en píxeles debajo del objetivo. La propiedad de desbordamiento de CSS controla los contenidos que son demasiado grandes para caber en un área.
Ejemplo 2: a continuación se muestra la implementación del código HTML para cambiar el tamaño de los contenidos, usando Javascript: – Usaremos la propiedad contentWindow de
JavaScript que iFrame ajustará automáticamente su altura de acuerdo con los contenidos, no aparecerán barras de desplazamiento.
- Seleccionamos iframe dentro de la etiqueta del script:
var iframe = document.getElementById(“myIframe”); - Ajustamos el evento de carga de la altura del iframe mediante:
iframe.onload = function(){}
<html>
<head>
<style>
div {
width: 50%;
}
</style>
</head>
<body>
<iframe src="/tryit.php" id="target">
</iframe>
<script>
var div = document.getElementById("target");
div.onload = function() {
div.style.height =
div.contentWindow.document.body.scrollHeight + 'px';
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Pritesh Ranjan 1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA