javascript - bootstrap - iframe width

Calcular una altura de iframe entre exploradores

Question

Uno de los problemas más difíciles en mi experiencia de javascript ha sido el cálculo correcto (es decir, "cross-browser") de una altura de iframe . En mis aplicaciones, tengo una gran cantidad de iframes generados dinámicamente y quiero que todos hagan una especie de conversión automática al final del evento de carga para ajustar su altura y ancho.

En el caso de la computación en altura , mi mejor solución es la siguiente (con la ayuda de jQuery):

function getDocumentHeight(doc) {
  var mdoc = doc || document;
  if (mdoc.compatMode==''CSS1Compat'') {       
      return mdoc.body.offsetHeight;
  }
  else {
    if ($.browser.msie)
      return mdoc.body.scrollHeight;
    else  
      return Math.max($(mdoc).height(), $(mdoc.body).height());
  }
}

Busqué en internet sin éxito. También probé la biblioteca de Yahoo que tiene algunos métodos para las dimensiones de documentos y ventanas, pero no es satisfactoria. Mi solución funciona decentemente, pero a veces calcula una altura más alta. He estudiado y probado toneladas de propiedades con respecto a la altura del documento en Firefox / IE / Safari: documentElement.clientHeight, documentElement.offsetHeight, documentElement.scrollHeight, body.offsetHeight, body.scrollHeight, ... También jQuery no tiene una coherencia comportamiento en varios navegadores con las llamadas $(document.body).height(), $(''html'', doc).height(), $(window).height()

Llamo a la función anterior no solo al final del evento de carga, sino también en el caso de elementos DOM insertados dinámicamente o elementos ocultos o mostrados. Este es un caso que a veces rompe el código que solo funciona en el evento de carga.

¿Alguien tiene una verdadera solución de navegador cruzado (al menos Firefox / IE / Safari)? Algunos consejos o sugerencias?

Answer 1

Aunque me gusta su solución, siempre he encontrado que las IFRAME son más problemáticas de lo que valen.

Por qué ? 1. El problema del tamaño. 2. el iframe tiene ese atributo src de qué preocuparse. es decir, camino absoluto. 3. la complejidad extra con las páginas.

Mi solución: DIV que se cargan dinámicamente a través de llamadas AJAX. DIVs tamaño automático. Aunque el código AJAX requiere el trabajo de JavaScript (que se puede realizar a través de frameworks), son relativos a donde se encuentra el sitio. 3 es un lavado, estás intercambiando complejidad en páginas hasta JavaScript.

En lugar de <IFRAME ...> use <DIV id = "mystuff" />

Haga la llamada ajax para llenar el div de mystuff con datos y deje que el navegador se preocupe por ello.

Answer 2

Aquí hay una solución que parece funcionar. Básicamente, scrollHeight es el valor correcto en la mayoría de los casos. Sin embargo, en IE (específicamente 6 y 7), si el contenido está simplemente contenido en nodos de texto, la altura no se calcula y solo se establece de forma predeterminada en la altura establecida en CSS o en el atributo "altura" en el iframe. Esto fue encontrado a través de prueba y error, así que tómalo por lo que vale.

function getDocumentHeight(doc) {
  var mdoc = doc || document; 
  var docHeight = mdoc.body.scrollHeight;

  if ($.browser.msie) {
      // IE 6/7 don''t report body height correctly.  
      // Instead, insert a temporary div containing the contents.

      var child = $("<div>" + mdoc.body.innerHTML + "</div>", mdoc);
      $("body", mdoc).prepend(child);
      docHeight = child.height();
      child.remove();
  }

  return docHeight;
}

Answer 3

He encontrado que esta solución funciona en, por ejemplo, 6+, ff 3.5+, safari 4+. Estoy creando y agregando un iframe al documento. El siguiente código se ejecuta al final del evento de carga de jQuery después de alguna otra manipulación dom. El tiempo de espera es necesario para mí debido a la manipulación dom adicional que tiene lugar en el evento de carga.

// sizing - slight delay for good scrollheight
setTimeout(function() {
   var intContentHeight = objContentDoc.body.scrollHeight;
   var $wrap = $("#divContentWrapper", objContentFrameDoc);
   var intMaxHeight = getMaxLayeredContentHeight($wrap);
   $this.height(intContentHeight > intMaxHeight ? intMaxHeight : intContentHeight);

   // animate
   fireLayeredContentAnimation($wrap);
}, 100);

Tengo algunas restricciones de tamaño para considerar, que es lo que la llamada getMaxLayeredContentHeight está comprobando para mí. Espero que ayude.

Answer 4

Como en su ejemplo está accediendo al documento dentro del IFRAME, supongo que está hablando de conocer la altura del documento y no del marco en sí. Además, eso significa que el contenido proviene de su propio sitio web y usted tiene control sobre sus contenidos.

Entonces, ¿por qué no simplemente coloca un DIV alrededor de su contenido y luego usa el cliente? ¿Altura de ese DIV?

Código que carga en su IFRAME:

...
<body>
  <div id="content">
  ...
  </div>
</body>

El documento principal:

 function getDocumentHeight(mdoc) {
    return mdoc.getElementById("content").clientHeight;
 }

Por cierto, esta parte de su función de ejemplo no tiene sentido ya que "documento" no se refiere a IFRAME: var mdoc = doc || document; var mdoc = doc || document;

Answer 5

Aquí hay un script que cambia el tamaño del iFrame dependiendo del cuerpo dentro de su altura.

Answer 6

Esto ha sido sin una respuesta aceptada por un tiempo, así que quería contribuir con la solución que terminé yendo después de algunas investigaciones. Esto es entre navegadores y dominios cruzados (por ejemplo, cuando el iframe apunta a contenido de un dominio diferente)

Terminé usando el mecanismo de paso de mensajes de html5 envuelto en un plugin jQuery que lo hace compatible con navegadores más antiguos usando varios métodos (algunos de ellos descritos en este hilo).

La solución final es muy simple.

En la página de host (principal):

// executes when a message is received from the iframe, to adjust 
// the iframe''s height
    $.receiveMessage(
        function( event ){
            $( ''my_iframe'' ).css({
                height: event.data
            });
    });

// Please note this function could also verify event.origin and other security-related checks.

En la página iframe:

$(function(){

    // Sends a message to the parent window to tell it the height of the 
    // iframe''s body

    var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);

    $.postMessage(
        $(''body'').outerHeight( true ) + ''px'',
        ''*'',
        target
    );

});

He probado esto en Chrome 13+, Firefox 3.6+, IE7, 8 y 9 en XP y W7, safari en OSX y W7. ;)