web-dev-qa-db-fra.com

Comment obtenir la hauteur d'un iframe avec javascript depuis l'intérieur de l'iframe? Qu'en est-il des pages avec plusieurs iframes?

Existe-t-il un moyen de détecter la hauteur et la largeur d'un iframe, en exécutant un script depuis l'intérieur de l'iframe? J'ai besoin de positionner dynamiquement certains éléments dans l'iframe en fonction de la hauteur/largeur différente de l'iframe.

Y aurait-il une différence s'il y a plusieurs iframes dans la même page? c'est-à-dire que chaque iframe veut trouver ses propres dimensions.

Les solutions Javascript ou jquery sont les bienvenues.

Merci!

<iframe src='http://example.com' width='640' height='480' scrolling='no' frameborder='0' longdesc='http://example.com'></iframe>

Les iframes doivent être intégrés sur d'autres sites, et comme mentionné par l'une des réponses ci-dessous, j'ai rencontré des problèmes d'autorisation.

javascriptjqueryhtmldomiframe
18
VKen

Si la page de votre iframe et sa page parent sont servies à partir de différents domaines (ce qui signifie que vous ne pouvez pas accéder aux propriétés DOM de la page parent à partir de la page iframe), je pense que c'est la même chose que lorsque vous essayez de déterminer la hauteur de la fenêtre d'affichage.

Pour cela, voir:

Ou peut-être ceci:

6
Paul D. Waite

Soyez conscient que le code comme celui-ci:

var thisIframesHeight = window.parent.$("iframe.itsID").height();

ne sera sûr que si la source de la fenêtre iframe et parent provient du même domaine. Sinon, vous obtiendrez des problèmes d'autorisation refusée et vous devrez adopter une autre approche.

5
Julian Jelfs

peut être un peu en retard, car toutes les autres réponses sont plus anciennes :-) mais ... voici ma solution. Testé dans FF réel, Chrome et Safari 5.0.

css:

iframe {border:0; overflow:hidden;}

javascript:

$(document).ready(function(){
    $("iframe").load( function () {
        var c = (this.contentWindow || this.contentDocument);
        if (c.document) d = c.document;
        $(this).css({
            height: $(d).outerHeight(),
            width: $(d).outerWidth()
        });
    });
});

J'espère que cela aidera n'importe qui.

3
ddlab

Chaque <iframe> Aurait besoin d'un id je suppose. Et puis à l'intérieur du <iframe> Vous le référenceriez comme ceci:

var thisIframesHeight = window.parent.$("iframe#itsID").height();

3
Anriëtte Myburgh

oui, vous pouvez exécuter la fonction de fenêtre du parent depuis l'intérieur du cadre et passer des paramètres, comme ceci:

window.parent.FUNC_NAME(iframe_height,iframe_width)

n'oubliez pas de définir la fonction FUNC_NAME dans la fenêtre parent

0
Valentin Kantor