Ajuster la hauteur iframe en fonction du contenu

Question

J'utilise le script suivant pour ajuster automatiquement la hauteur iframe.

function autoIframe(frameId) { 
    try { 
    frame = document.getElementById(frameId); 
    innerDoc = (frame.contentDocument) ? 
       frame.contentDocument : frame.contentWindow.document; 
    objToResize = (frame.style) ? frame.style : frame; 
    objToResize.height = innerDoc.body.scrollHeight + 10 + 'px'; 
    } 
    catch (err) { 
    window.status = err.message; 
    } 
} 

J'ai trois onglets jquery et iframes deux premiers onglets (myiframe1 et myiframe2)

J'appelle le code ci-dessus à onload des iframes aiment.

<iframe id="myiframe1" width="100%" onload="autoIframe('myiframe1');" 
     scrolling="auto" frameborder="0" src="mypath1"> 
</iframe> 

<iframe id="myiframe2" width="100%" onload="autoIframe('myiframe2');" 
     scrolling="auto" frameborder="0" src="mypath2"> 
</iframe> 

Cela fonctionne très bien dans google chrome et IE8. Mais dans Firefox, l'iframe dans le premier onglet (onglet visible) a la hauteur selon le contenu et l'iframe dans le deuxième onglet n'est pas défini avec la bonne taille. La hauteur du deuxième onglet est définie sur 10px.

Quel peut être le problème ici?

Answer 1

display:none Les éléments ont une hauteur de 0 iirc, mais jquery offre un moyen de "ne pas masquer mais de déplacer le contenu des onglets hors de l'écran".

Vous pouvez trouver de la documentation/exemple ici:

jquery ui docs - tabs - faq

Answer 2

vous pouvez essayer ceci:

sélectionnez l'onglet de l'iframe que vous souhaitez redimensionner premier (donc quand il est devenu visible, il obtient une hauteur) puis sélectionnez le premier onglet (en cours) à nouveau:

$('#tabs').tabs('select', 2); 
// adjust second tab iframe height here 
$('#tabs').tabs('select', 1); 

(probablement la hauteur du contenu de l'onglet invisible/non sélectionné est 0, le redimensionnement ne fonctionnera donc pas).