Ajustement automatique de la hauteur de l'iFrame

En ce moment, j'ai une boîte de dialogue contextuelle jQuery UI qui lit à partir d'une page externe. Cette page lit d'un autre externe qui a une vidéo via flowplayer.Ajustement automatique de la hauteur de l'iFrame

J'utilise iframe pour intégrer la vidéo dans la première:

<div id="donkeyVideo"> 
<iframe id="iframeDonkey" width="100%" height="496" src="../../../../video/donkey-2009-02-23.html" frameBorder="0"></iframe> 
</div>

La largeur semble tout droit à 100%, mais une hauteur de 100% ne fonctionne pas. Y a-t-il un moyen de contourner ceci?

Où et comment est-ce que j'intègre le code, ainsi que le matériel d'identification. S'il vous plaît, n'importe qui, aidez?

Source

2011-05-12 Ricky

Essayez-vous de définir la hauteur iframe de la page parent ou de la page enfant? –

Je ne sais pas. La vidéo est dans (exemple) video.html et le code ci-dessus est dans index.html. index lit à partir de la vidéo. – Ricky

Vous devrez utiliser une sorte de JavaScript pour ajuster dynamiquement la hauteur d'un iframe si vous voulez utiliser quelque chose comme 100% plutôt qu'une valeur de pixel. Malheureusement, d'après ce que je comprends, vous ne pouvez pas modifier dynamiquement la hauteur d'un iframe pointant vers un domaine différent du vôtre.

De lost-in-code:

jQuery : Auto iFrame Height

S'il vous plaît noter que ce plugin jQuery autoHeight ne fonctionnera pas avec iFrames accéder au contenu d'un autre domaine ou l'emplacement à distance depuis l'objet fenêtre provenant d'un domaine différent ne peut pas être accessible à partir de l'actuel en raison de restrictions de sécurité JavaScript.

Source

2011-05-12 20:09:25 magzalez

si vous ne voulez pas utiliser un plugin jquery, vous pouvez le faire en utilisant simplement la méthode que je l'ai expliqué sur mon facebook post (https://www.facebook.com/antimatterstudios/posts/10151007211674364

Avez-vous un IFrame, dont vous souhaitez définir automatiquement la hauteur, car vous hébergez une page d'un autre site Web dans le vôtre. Eh bien, malheureusement, l'IFrame ne peut pas prendre la hauteur du contenu que vous chargez et, sauf si vous mettez une hauteur, elle affichera la hauteur par défaut, ou pas de hauteur du tout. C'est énervant.

J'ai la solution pour vous, il ne fonctionnera qu'avec les récents navigateurs standards, mais fonctionnera également avec IE8, donc pour 99% d'entre vous, c'est parfait. Le seul problème est que vous devez insérer un javascript dans l'iframe, ce qui est facile si le contenu que vous chargez vous appartient, vous pouvez simplement ouvrir le contenu que vous chargez et mettre le javascript dans le contenu.

Dans votre site, vous avez besoin d'un morceau de javascript qui peut « recevoir un message du IFrame », comme celui-ci

jQuery(document).ready(function(){ 
    jQuery(window).bind("message",function(e){ 
     data = e.data || e.originalEvent.data; 
     jQuery("iframe.newsletter_view").height(data.height); 
    }); 
});

dans votre contenu iFrame, ajoutez ceci au bas, probablement il est autorisé à il suffit de faire quelque chose comme « modèle $. $ javascript » en utilisant PHP ou quelque chose, même si le javascript n'est pas dans la balise

<script type="text/javascript" src="jquery-1.7.1-min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    parent.postMessage({ 
     height:$(document.body).height()+50+"px" 
    },"*"); 
}); 
</script>

il est évident que j'utilise jquery, vous ne devez pas, il est juste plus facile et probablement vous êtes en l'utilisant, alors évitez les tracas.

si vous faites cela, lorsque les charges iframe, il va envoyer un signal à la fenêtre parent, qui redimensionne l'iframe en fonction de la longueur du contenu :)

Je suis sûr que vous pouvez comprendre comment modifier les petites choses, mais c'est la méthode que j'utilise

Source

2012-12-30 19:45:55

Ajustement automatique de la hauteur de l'iFrame

Répondre

Questions connexes