whatwg - Controle la altura del iframe con jQuery

w3c html standards

Question

Estoy usando jQuery para controlar la altura de un iframe.

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

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

Answer 1

En el momento de la carga, llamo a 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 contents () devuelve cero.

Answer 2

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

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

Agrego 20 píxeles solo para evitar cualquier barra de desplazamiento, pero puede intentar un límite inferior.

Answer 3

Esto es antiguo pero espero que ayude.

Parece que Chrome (o tal vez todo el webkit, no estoy seguro) tiene un error donde el 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 provisional es hacer que recalcule 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, funciona en mi máquina (tm).

Answer 4

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());
}

EDITAR: Si entiendo correctamente, está tratando de deshacerse de las barras de desplazamiento llamando al incremento y volver a la altura original llamando decremento.

Después de hacer 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();

Cambie su función HeightIncrement para usar lo siguiente:

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

Cambie su función HeightDecrement para usar lo siguiente:

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

Answer 5

He cambiado el tamaño y el ancho del iframe con éxito cuando se carga. Básicamente puedes hacer esto de la siguiente manera, y también publico 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

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, básicamente, el máximo que quisiera, 980 creo, luego lo envolví en un contenedor Div con alto y ancho al 100% y min-height y min-width a 400px y 300px respectivamente, y luego agregó un jQuery para ejecutar en 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()">

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 un poco de relleno.

Editar Me olvidé de mencionar que he utilizado CaseWidth para establecer la altura del iFrame a fin de mantener las proporciones restringidas y en algún lugar cuadrado.

Hasta ahora, esto ha funcionado bien, si alguien tiene alguna idea de por qué no es estable, por favor asesórese,

aclamaciones

Answer 7

Si el origen del iframe es un dominio diferente de su padre, entonces probablemente necesite usar easyXDM .

Answer 8

Uso lo siguiente y funciona perfectamente ...

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

por supuesto, justo cuando se llama (sin "autoresize") ... pero funciona aumentando a medida que disminuye

Answer 9

yo uso esto :

$ (''# iframe''). live (''mousemove'', función (evento) {

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

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