jquery obtenir la hauteur de l'iframe contenu lorsqu'il est chargé

Question

J'ai une page d'Aide, help.php que je suis de chargement à l'intérieur d'une iframe dans main.php Comment puis-je obtenir la hauteur de cette page, une fois qu'il a chargé dans l'iframe?

Je demande cela parce que je peux pas le style, la hauteur de l'iframe de 100% ou auto. C'est pourquoi je pense que j'ai besoin d'utiliser le javascript.. Je suis à l'aide de 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:

<div class='container'>
    <!-- -->
    <div class='help-div'>
        <p>This is a div with an iframe loading the help page</p>
        <iframe id="help-frame" src="../help.php" width="100%" height="100%" frameborder="1"></iframe>
    </div>  <a class="open-help" href="#">open Help in iFrame</a>

    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
</div>

Answer 1

ok j'ai enfin trouvé une bonne solution:

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

Parce que certains navigateurs (âgés de Safari et Opera) rapport onload terminé avant de CSS rend vous devez définir un micro Délai d'attente et de vide et de réaffecter l'iframe src.

$('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';
}

Answer 2

Le moins compliqué réponse est d'utiliser .contents() pour obtenir de l'iframe. Il est intéressant de noter, cependant, il renvoie une valeur différente de ce que j'ai à l'aide du code dans ma réponse originale à cette question, en raison du rembourrage sur le corps, je crois.

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

---

C'est la façon dont je l'ai fait pour les communications inter-domaines, de sorte que je crains c'est peut-être inutilement compliqué. Tout d'abord, je voudrais mettre jQuery à l'intérieur de l'iFrame du document; cela consomme plus de mémoire, mais il ne devrait pas augmenter le temps de chargement que le script ne doit être chargée qu'une seule fois.

Utiliser l'iFrame de jQuery pour mesurer la hauteur de votre iframe du corps le plus tôt possible (onDOMReady) et puis définissez l'URL de hachage à la hauteur. Et dans le document parent, ajouter un onload événement à la balise iFrame qui se penchera sur l'emplacement de l'iframe et d'en extraire la valeur dont vous avez besoin. Parce que onDOMReady toujours se produire avant que le document de l'événement de chargement, vous pouvez être certain que la valeur aurez communiquées correctement sans condition de course de compliquer les choses.

En d'autres termes:

...Help.php:

var getDocumentHeight = function() {
    if (location.hash === '') { // EDIT: this should prevent the retriggering 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 );

Answer 3

J'ai trouvé le suivant fonctionne sur Chrome, Firefox et IE11:

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

Lorsque le Iframes contenu est terminé le chargement de l'événement se déclenche et il donnera la IFrames hauteur à celle de son contenu. Cela ne fonctionne que pour les pages dans le même domaine que celui de l'IFrame.

Answer 4

Vous n'avez pas besoin de jquery à l'intérieur de l'iframe pour ce faire, mais je l'utilise provoquer le code est tellement plus simple...

Mettre cela dans le document à l'intérieur de 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 de petites fenêtres, il n'est jamais parfait de la taille.

Et ce à l'intérieur de votre document parent.

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

Answer 5

Je ne suis pas sûr de ce que, le cas échéant, les événements dans l'iFrame sont retournés à la page parent (je suis assez sûr que rien ne le faire revenir, mais je ne suis pas tout à fait certain). Tout ce que je peux penser à suggérer, dans cette affaire, c'est que dans l'appel de fonction pour charger l' help.php page, vous aussi mettre en œuvre un appel à:

$('#iframeID').height();

Qui, de toute évidence, le retour de la hauteur de l'élément (dans la page). Vous pouvez ensuite l'utiliser comme un console.log(/*...*/), ou un alert(/*...*/) ou de quelque façon que vous le souhaitez. Le problème demeure, cependant, que je ne pense pas qu'il y a une façon de répondre à un changement, ou de la charge, de l'événement dans l'iFrame.