cambiar - hacer que la altura del iframe sea dinámica en función del contenido dentro de JQUERY/Javascript
iframe src javascript (15)
Agregue esto al iframe, esto funcionó para mí:
onload="this.height=this.contentWindow.document.body.scrollHeight;"
Y si usas jQuery prueba este código:
onload="$(this).height($(this.contentWindow.document.body).find(/'div/').first().height());"
Estoy cargando una página web aspx en un iframe. El contenido en el Iframe puede tener más altura que la altura del iframe. El iframe no debería tener barras de desplazamiento.
Tengo una etiqueta div envoltorio dentro del iframe que básicamente es todo el contenido. Escribí algo de jQuery para hacer que cambie el tamaño:
$("#TB_window", window.parent.document).height($("body").height() + 50);
donde TB_window es el div en el que se encuentra el Iframe .
body : la etiqueta corporal del aspx en el iframe.
Este script está adjunto al contenido del iframe. TB_window elemento TB_window desde la página principal. Si bien esto funciona bien en Chrome, pero la ventana TB_ colapsa en Firefox. Estoy realmente confundido / perdido en por qué sucede eso.
Aquí puede consultar la pregunta relacionada: ¿cómo hacer que el ancho y la altura del iframe sean los mismos que su div principal?
Para establecer la altura dinámica -
- Necesitamos comunicarnos con iFrames de dominios cruzados y padres
- Entonces podemos enviar la altura de desplazamiento / altura de contenido del iframe a la ventana principal
Y códigos - https://gist.github.com/mohandere/a2e67971858ee2c3999d62e3843889a8
Descubrí que la respuesta aceptada no era suficiente, ya que X-FRAME-OPTIONS: Allow-From no es compatible con safari o chrome . Fuimos con un enfoque diferente en su lugar, que se encuentra en una presentation dada por Ben Vinegar de Disqus. La idea es agregar un detector de eventos a la ventana primaria, y luego dentro del iframe, use window.postMessage para enviar un evento al padre diciéndole que haga algo (cambie el tamaño del iframe).
Por lo tanto, en el documento principal, agregue un detector de eventos:
window.addEventListener(''message'', function(e) {
var $iframe = jQuery("#myIframe");
var eventName = e.data[0];
var data = e.data[1];
switch(eventName) {
case ''setHeight'':
$iframe.height(data);
break;
}
}, false);
Y dentro del iframe, escribe una función para publicar el mensaje:
function resize() {
var height = document.getElementsByTagName("html")[0].scrollHeight;
window.parent.postMessage(["setHeight", height], "*");
}
Finalmente, dentro del iframe, agregue un onLoad a la etiqueta del cuerpo para activar la función de cambio de tamaño:
<body onLoad="resize();">
En caso de que esto ayude a alguien. Estaba tirando de mi cabello tratando de hacer que esto funcione, luego noté que el iframe tenía una entrada de clase con altura: 100%. Cuando eliminé esto, todo funcionó como se esperaba. Por lo tanto, compruebe si hay algún conflicto de CSS.
En lugar de usar javscript / jquery, la forma más fácil que encontré es:
<iframe style="min-height:98vh" src="http://yourdomain.com" width="100%"></iframe>
Aquí 1vh = 1% de la altura de la ventana del navegador. Entonces, el valor teórico de la altura que se debe establecer es 100vh, pero prácticamente 98vh hizo la magia.
Encontré que la respuesta de Troy no funcionó. Este es el mismo código revisado para ajax:
$.ajax({
url: ''data.php'',
dataType: ''json'',
success: function(data)
{
// Put the data onto the page
// Resize the iframe
var iframe = $(window.top.document).find("#iframe");
iframe.height( iframe[0].contentDocument.body.scrollHeight+''px'' );
}
});
Este es útil cuando necesita una solución sin jquery. En ese caso, debería intentar agregar un contenedor y establecer un relleno en porcentajes
Código de ejemplo HTML:
<div class="iframecontainer">
<iframe scrolling="no" src="..." class="iframeclass"width="999px" height="618px"></iframe>
</div>
Código de ejemplo CSS:
.iframeclass{
position: absolute;
top: 0;
width: 100%;
}
.iframecontainer{
position: relative;
width: 100%;
height: auto;
padding-top: 61%;
}
Hay cuatro propiedades diferentes que puede ver para obtener la altura del contenido en un iFrame.
document.documentElement.scrollHeight
document.documentElement.offsetHeight
document.body.scrollHeight
document.body.offsetHeight
Lamentablemente, todos pueden dar respuestas diferentes y estos son inconsistentes entre los navegadores. Si establece el margen del cuerpo en 0, entonces el document.body.offsetHeight da la mejor respuesta. Para obtener el valor correcto, pruebe esta función; que se toma de la biblioteca de github.com/davidjbradshaw/iframe-resizer que también cuida el tamaño correcto del iFrame cuando cambia el contenido o se cambia el tamaño del navegador.
function getIFrameHeight(){
function getComputedBodyStyle(prop) {
function getPixelValue(value) {
var PIXEL = /^/d+(px)?$/i;
if (PIXEL.test(value)) {
return parseInt(value,base);
}
var
style = el.style.left,
runtimeStyle = el.runtimeStyle.left;
el.runtimeStyle.left = el.currentStyle.left;
el.style.left = value || 0;
value = el.style.pixelLeft;
el.style.left = style;
el.runtimeStyle.left = runtimeStyle;
return value;
}
var
el = document.body,
retVal = 0;
if (document.defaultView && document.defaultView.getComputedStyle) {
retVal = document.defaultView.getComputedStyle(el, null)[prop];
} else {//IE8 & below
retVal = getPixelValue(el.currentStyle[prop]);
}
return parseInt(retVal,10);
}
return document.body.offsetHeight +
getComputedBodyStyle(''marginTop'') +
getComputedBodyStyle(''marginBottom'');
}
La solución simple es medir el ancho y la altura del área de contenido, y luego usar esas medidas para calcular el porcentaje de relleno inferior.
En este caso, las medidas son 1680 x 720 px, por lo que el relleno en la parte inferior es 720/1680 = 0.43 * 100, que sale al 43%.
.canvas-container {
position: relative;
padding-bottom: 43%; // (720 ÷ 1680 = 0.4286 = 43%)
height: 0;
overflow: hidden;
}
.canvas-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Para agregar al fragmento de ventana que parece cortar en la parte inferior, especialmente cuando no tiene desplazamiento, utilicé:
function resizeIframe(iframe) {
var addHeight = 20; //or whatever size is being cut off
iframe.height = iframe.contentWindow.document.body.scrollHeight + addHeight + "px";
}
Puede recuperar el alto del contenido del IFRAME utilizando: contentWindow.document.body.scrollHeight
Después de cargar el IFRAME , puede cambiar la altura haciendo lo siguiente:
<script type="text/javascript">
function iframeLoaded() {
var iFrameID = document.getElementById(''idIframe'');
if(iFrameID) {
// here you can make the height, I delete it first, then I make it again
iFrameID.height = "";
iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
}
}
</script>
Luego, en la etiqueta IFRAME , conecta el controlador de esta manera:
<iframe id="idIframe" onload="iframeLoaded()" ...
Tuve una situación hace un tiempo en la que además necesitaba llamar a iframeLoaded desde el propio IFRAME después de que se presentara un formulario dentro. Puede lograr eso haciendo lo siguiente dentro de las secuencias de comandos de contenido de IFRAME :
parent.iframeLoaded();
Una respuesta ligeramente mejorada para Aristos ...
<script type="text/javascript">
function resizeIframe(iframe) {
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
}
</script>
Luego, declare en su iframe de la siguiente manera:
<iframe onload="resizeIframe(this)" ...
Hay dos mejoras menores:
- No necesita obtener el elemento a través de document.getElementById, como ya lo tiene en la devolución de llamada de onload.
- No es necesario establecer
iframe.height = ""si va a reasignarlo en la siguiente declaración. Hacerlo en realidad incurre en una sobrecarga ya que se trata de un elemento DOM.
Una respuesta ligeramente mejorada para BlueFish ...
function resizeIframe(iframe) {
var padding = 50;
if (iframe.contentWindow.document.body.scrollHeight < (window.innerHeight - padding))
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
else
iframe.height = (window.innerHeight - padding) + "px";
}
Esto tiene en cuenta la altura de la pantalla de Windows (navegador, teléfono) que es bueno para el diseño receptivo y los iframes que tienen una gran altura. El relleno representa el relleno que desea arriba y debajo del marco flotante en el caso de que atraviese toda la pantalla.
$(document).height() // - $(''body'').offset().top
y / o
$(window).height()
Consulte Pregunta de desbordamiento de pila Cómo obtener la altura de un elemento de cuerpo .
Intenta esto para encontrar la altura del cuerpo en jQuery:
if $("body").height()
No tiene un valor si Firebug . Tal vez ese es el problema.
jQuery(''.home_vidio_img1 img'').click(function(){
video = ''<iframe src="''+ jQuery(this).attr(''data-video'') +''"></iframe>'';
jQuery(this).replaceWith(video);
});
jQuery(''.home_vidio_img2 img'').click(function(){
video = <iframe src="''+ jQuery(this).attr(''data-video'') +''"></iframe>;
jQuery(''.home_vidio_img1 img'').replaceWith(video);
jQuery(''.home_vidio_img1 iframe'').replaceWith(video);
});
jQuery(''.home_vidio_img3 img'').click(function(){
video = ''<iframe src="''+ jQuery(this).attr(''data-video'') +''"></iframe>'';
jQuery(''.home_vidio_img1 img'').replaceWith(video);
jQuery(''.home_vidio_img1 iframe'').replaceWith(video);
});
jQuery(''.home_vidio_img4 img'').click(function(){
video = ''<iframe src="''+ jQuery(this).attr(''data-video'') +''"></iframe>'';
jQuery(''.home_vidio_img1 img'').replaceWith(video);
jQuery(''.home_vidio_img1 iframe'').replaceWith(video);
});