jquery obtenir la hauteur du contenu iframe lorsqu’il est chargé

J’ai une page d’aide, help.php que je charge dans un iframe dans main.php Comment puis-je obtenir la hauteur de cette page une fois chargée dans l’iframe?

Je le demande parce que je ne peux pas définir la hauteur de iframe à 100% ou auto. C’est pourquoi je pense que je dois utiliser javascript .. J’utilise jQuery

CSS:

body { margin: 0; padding: 0; } .container { width: 900px; height: 100%; margin: 0 auto; background: silver; } .help-div { display: none; width: 850px; height: 100%; position: absolute; top: 100px; background: orange; } #help-frame { width: 100%; height: auto; margin:0; padding:0; } 

JS:

 $(document).ready(function () { $("a.open-help").click(function () { $(".help-div").show(); return false; }) }) 

HTML:

 

This is a div with an iframe loading the help page

open Help in iFrame

hello world

hello world

hello world

hello world

hello world

    ok j’ai enfin trouvé une bonne solution:

     $('iframe').load(function() { this.style.height = this.contentWindow.document.body.offsetHeight + 'px'; }); 

    Étant donné que certains navigateurs (anciens Safari et Opera) signalent leur chargement terminé avant que CSS ne les affiche, vous devez définir un délai d’expiration micro et supprimer et réaffecter la src de l’iframe.

     $('iframe').load(function() { setTimeout(iResize, 50); // Safari and Opera need a kick-start. var iSource = document.getElementById('your-iframe-id').src; document.getElementById('your-iframe-id').src = ''; document.getElementById('your-iframe-id').src = iSource; }); function iResize() { document.getElementById('your-iframe-id').style.height = document.getElementById('your-iframe-id').contentWindow.document.body.offsetHeight + 'px'; } 

    La réponse moins compliquée consiste à utiliser .contents() pour accéder à l’iframe. Fait intéressant, cependant, il renvoie une valeur différente de ce que j’utilise avec le code dans ma réponse d’origine, à cause du remplissage du corps, je crois.

     $('iframe').contents().height() + 'is the height' 

    C’est comme ça que je l’ai fait pour la communication entre domaines, donc j’ai peur que ce soit compliqué inutilement. Tout d’abord, je mettrais jQuery dans le document de l’iFrame; cela consumra plus de mémoire, mais cela ne devrait pas augmenter le temps de chargement car le script n’a besoin d’être chargé qu’une seule fois.

    Utilisez jQuery de l’iFrame pour mesurer la hauteur du corps de votre iframe le plus tôt possible (onDOMReady), puis définissez le hachage de l’URL à cette hauteur. Et dans le document parent, ajoutez un événement onload à la balise iFrame qui examinera l’emplacement de l’iframe et extraira la valeur dont vous avez besoin. Comme onDOMReady se produira toujours avant l’événement de chargement du document, vous pouvez être certain que la valeur sera communiquée correctement sans condition de concurrence compliquant les choses.

    En d’autres termes:

    … dans Help.php:

     var getDocumentHeight = function() { if (location.hash === '') { // EDIT: this should prevent the resortingggering of onDOMReady location.hash = $('body').height(); // at this point the document address will be something like help.php#1552 } }; $(getDocumentHeight); 

    … et dans le document parent:

     var getIFrameHeight = function() { var iFrame = $('iframe')[0]; // this will return the DOM element var strHash = iFrame.contentDocument.location.hash; alert(strHash); // will return something like '#1552' }; $('iframe').bind('load', getIFrameHeight ); 

    J’ai trouvé ce qui suit pour travailler sur Chrome, Firefox et IE11:

     $('iframe').load(function () { $('iframe').height($('iframe').contents().height()); }); 

    Une fois le contenu Iframes terminé, l’événement se déclenche et il définit la hauteur IFrames à celle de son contenu. Cela ne fonctionnera que pour les pages du même domaine que celle de IFrame.

    Vous n’avez pas besoin de jquery dans l’iframe pour le faire, mais je l’utilise car le code est tellement plus simple …

    Mettez ceci dans le document dans votre iframe.

     $(document).ready(function() { parent.set_size(this.body.offsetHeight + 5 + "px"); }); 

    ajouté cinq ci-dessus pour éliminer la barre de défilement sur les petites fenêtres, ce n’est jamais parfait sur la taille.

    Et ceci dans votre document parent.

     function set_size(ht) { $("#iframeId").css('height',ht); } 

    Le code pour faire ceci sans jQuery est sortingvial de nos jours:

     const frame = document.querySelector('iframe') function syncHeight() { this.style.height = `${this.contentWindow.document.body.offsetHeight}px` } frame.addEventListener('load', syncHeight) 

    Décrocher l’événement:

     frame.removeEventListener('load', syncHeight) 

    c’est la bonne réponse qui a fonctionné pour moi

     $(document).ready(function () { function resizeIframe() { if ($('iframe').contents().find('html').height() > 100) { $('iframe').height(($('iframe').contents().find('html').height()) + 'px') } else { setTimeout(function (e) { resizeIframe(); }, 50); } } resizeIframe(); }); 

    La réponse acceptée $('iframe').load produira désormais a.indexOf is not a function erreur de a.indexOf is not a function . Peut être mis à jour pour:

     $('iframe').on('load', function() { // ... }); 

    Quelques autres similaires à .load désapprouvés depuis jQuery 1.8: Erreur “Uncaught TypeError: a.indexOf n’est pas une fonction” lors de l’ouverture d’un nouveau projet de fondation