Controlar la altura del iframe con jQuery

Question

Estoy usando jQuery para controlar la altura de un iframe.

jQuery("iframe",top.document).contents().height(); 

Esto funciona cuando la altura de los aumentos de iframe. Cuando la altura disminuye, no funciona. Devuelve el valor anterior solamente. ¿Por qué está pasando esto?

Answer 1

Funciona para mí Si lo configuro y lo recupero sin usar .contents(). Por favor, mira mi ejemplo a continuación.

function changeFrameHeight(newHeight){ 
    jQuery("iframe",top.document).height(newHeight); 
    alert("iframe height=" + jQuery("iframe",top.document).height()); 
} 

EDIT: Si he entendido bien, usted está tratando de deshacerse de las barras de desplazamiento mediante una llamada al incremento y volver a la altura original llamando decremento.

Después de realizar múltiples pruebas en diferentes navegadores. Aquí está el código que funciona en FF, IE, Chrome, Safari y Opera.

//first declare a variable to store the original IFrame height. 
var originalHeight = $("iframe",top.document).height(); 

Cambiar la heightIncrement función para utilizar el siguiente:

heightIncrement:function(){ 
var heightDiv = jQuery("iframe",top.document).contents().find('body').attr('scrollHeight'); 
jQuery("iframe",top.document).css({height:heightDiv}); 
} 

Cambiar su función heightDecrement utilizar el siguiente:

heightDecrement:function(){ 
jQuery("iframe",top.document).css({height:originalHeight}); 
} 

Answer 2

En el momento de la carga que llamo esta función

heightIncrement:function(){  
      if($.browser.mozilla) 
      { 
      var heightDiv = jQuery("iframe",top.document).contents().attr("height")+"px";      
      jQuery("iframe",top.document).css({height:heightDiv}); 
      } 
      else if($.browser.opera || $.browser.safari || $.browser.msie) 
      {    
      var heightDiv = jQuery("iframe",top.document).height();     
      jQuery("iframe",top.document).css({height:heightDiv}); 
      } 
} 

si uso sin contenido() devuelve cero.

Answer 3

utilizo el siguiente y funciona perfectamente ...

$("#frameId").height($("#frameId").contents().find("html").height()); 

por supuesto, sólo cuando se llama (sin "autoresize") ... pero funciona aumentar como disminuir

Answer 4

Esta es antigua pero espero que ayude

Parece que Chrome (o quizás todo el webkit, no estoy seguro) tiene un error por el cual scrollHeight puede aumentar pero no disminuir (al menos en el caso del contenido de un iframe). Entonces, si el contenido crece, entonces se reduce, scrollOffset permanece en el nivel superior. Eso no es muy agradable cuando intentas hacer que la altura del iframe sea lo suficientemente grande para su contenido en constante cambio.

Una solución de hack es hacer que vuelva a calcular la altura estableciendo la altura en algo definitivamente lo suficientemente pequeño como para causar que la altura del iframe sea menor que su contenido, y luego scrollHeight se restablece.

var frame = top.document.getElementById('iFrameParentContainer').getElementsByTagName('iframe')[0]; 
var body = frame.contentWindow.document.body; 
var height = body.scrollHeight; // possibly incorrect 
body.height = "1px"; 
height = body.scrollHeight; // correct 

Esto puede causar un ligero parpadeo, pero normalmente no funciona, al menos, en mi máquina (tm).

Answer 5

He cambiado correctamente el ancho y el ancho del iframe cuando está cargado.básicamente se puede hacer esto como abajo, y también publicar un pequeño artículo en mi blog: http://www.the-di-lab.com/?p=280

 

$(".colorbox").colorbox(

{iframe:true, 

innerWidth:0, 

innerHeight:0, 

scrolling:false, 

onComplete:function(){ 

$.colorbox.resize(

{ 

innerHeight:($('iframe').offset().top + $('iframe').height()), 

innerWidth:($('iframe').offset().left + $('iframe').width()) 

} 

); 

} 

} 

); 

Answer 6

Si la fuente de marco flotante es un dominio diferente de su padre, entonces es probable que necesite usar easyXDM.

Answer 7

yo uso esto:.

$ ('# iframe') en vivo ('mousemove', function (event) {

var theFrame = $ (this, parent.document.body) ;

this.height ($ (document.body) .height() - 350);
});

Answer 8

No estoy seguro si la gente está satisfecha con sus métodos pero he escrito un enfoque muy simple que parece funcionar bastante bien para mí, en el más nuevo de Safari, Chrome, IE9, Opera y Firefox.

Tuve un problema al redimensionar un calendario de Google alimentado con iFrame, así que acabo de hacer un tamaño predeterminado en el estilo del iFrame: width = "600" y ajustes de altura de básicamente el máximo que quisiera, 980 creo, luego se envuelve que en un contenedor div con altura y anchura al 100% y min-altura y min-anchura en 400 píxeles y 300 píxeles respectivamente, y después se añadió un poco de jQuery funcione a onload y onresize ...

 <script> 

     var resizeHandle = function(){ 
      var caseHeight = $('#calendarCase').height(); 
      var caseWidth = $('#calendarCase').width(); 
      var iframeWidth = $('#googleCalendar').width(caseWidth - 10); 
      var iframeHeight = $('#googleCalendar').height(caseWidth - 10);; 
     }; 


</script> 


<body id ="home" onLoad="resizeHandle()" onResize="resizeHandle()"> 

tan para aclarar, la función de cambio de tamaño se ejecuta onLoad porque apuntar a teléfonos móviles y tabletas en mi diseño receptivo, que toma el alto y ancho del div de calendario y establece el alto y el ancho del iframe (#googleCalendar) en consecuencia, menos 10 píxeles para algo de relleno.

edit Olvidé mencionar que he utilizado caseWidth para establecer la altura del iFrame a fin de mantener las proporciones restringidas y en algún lugar cuadrado.

Esto ha funcionado bien hasta ahora, si alguien tiene alguna idea por qué podría no ser estable por favor avise,

aplausos

Answer 9

Este es un simple jQuery que trabajó para mí. Probado en iExplorer, Firefox y Crome:

$('#my_frame').load(function() { 
     $(this).height($(this).contents().find("html").height()+20); 
}); 

agrego 20 píxeles sólo para evitar cualquier barra de desplazamiento, pero es posible tratar una cota inferior.