5

Lo he estado intentado de varias maneras, con js y css pero no me funciona.

<iframe id="if" src="https:url..." frameborder="0" scrolling="no" seamless="seamless" style="display:block; width:100%; height:100%;">
</iframe>

Ejemplo:

<iframe id="if" src="https://es.stackoverflow.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100%;">
</iframe>

Si se fijan a pesar de poner el height a 100% no lo hace.

Por medio de un script que encontré en esta respuesta tampoco tengo exito:

  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
    <iframe id="if" src="https://es.stackoverflow.com/" onload="resizeIframe(this)" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100%;">
    </iframe>

¿Hay alguna manera de lograrlo sin importar que ese iframe pertenezca a cualquier dominio?

2
  • ¿Puedes agregar un ejemplo que se pueda reproducir porfavor? Tu pregunta ahora mismo es susceptible de cerrarse como no reproducible. Commented el 2 oct. 2017 a las 21:33
  • en realidad no hace falta un ejemplo reproducible porque con cualquier link el problema aparece, es un problema conocido. Editaré mi pregunta pero no lo creo muy necesario
    – Rene Limon
    Commented el 2 oct. 2017 a las 22:14

4 respuestas 4

1

La respuesta que comentas que encontraste tiene un comentario muy votado que dice que ese script no funcionará con contenido de otro dominio. Además, apunta a otra pregunta donde parece que han dado con la solución.

1
  • Exacto si desea que funcione el script propuesto debe estar el iframe bajo el mismo host que la aplicación contenedora Commented el 15 oct. 2018 a las 17:12
0

Si lo que quieres es ocupar el 100% del ancho y del alto de la pantalla, prueba a usar las siguientes propiedades:

width: 100vw; height: 100vw

Esto colocará tu elemento de forma que ocupe el 100% del ancho y del alto del viewport.

Así quedaría tu código:

<iframe id="if" src="https://es.stackoverflow.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100vw; height:100vh;">
</iframe>

0

En un par de ocasiones que he necesitado hacer eso he usado el iFrameResizer de https://github.com/davidjbradshaw/iframe-resizer y me ha funcionado bien.

0
<!-- jQuery iframe -->
<!-- Ajustar altura del iframe a la altura del contenido de la url -->

<script>
    $(document).ready(function() {
        var contentiframe = $('#miIframe').contents().find('body');
        var iframe = $('#miIframe');

        iframe.height(contentiframe.height());
    });
</script>
1
  • Los nuevos aportes siempre son bienvenidos, sin embargo, las respuestas que tienen solo código tienden a considerarse de mala calidad. TE invito a añadir una explicación, que puede ser breve, de cómo este código resuelve el problema o de cuál era el problema, para comenzar. Te invito a leer Cómo responder. Un saludo.
    – jachguate
    Commented el 4 jun. a las 7:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.