web-dev-qa-db-fra.com

Contrôle la hauteur de l'iframe avec jQuery

J'utilise jQuery pour contrôler la hauteur d'un iframe.

jQuery("iframe",top.document).contents().height();

Cela fonctionne lorsque la hauteur de l'iframe augmente. Lorsque la hauteur diminue, cela ne fonctionne pas. Il ne renvoie que l'ancienne valeur. Pourquoi cela arrive-t-il?

jqueryhtmliframe
20
Saravanan

j'utilise ce qui suit et cela fonctionne parfaitement ...

$("#frameId").height($("#frameId").contents().find("html").height());

bien sûr, juste au moment où on l'appelle (pas de "redimensionnement automatique") ... mais cela fonctionne de plus en plus lentement

30
Tom

Cela fonctionne pour moi si je le configure et le récupère sans utiliser .contents(). S'il vous plaît voir mon exemple ci-dessous.

function changeFrameHeight(newHeight){
  jQuery("iframe",top.document).height(newHeight);
  alert("iframe height=" + jQuery("iframe",top.document).height());
}

EDIT: Si je comprends bien, vous essayez de supprimer les barres de défilement en appelant l'incrément et de revenir à la hauteur d'origine en appelant décrément.

Après avoir effectué plusieurs tests sur différents navigateurs. Voici le code qui fonctionne dans FF, IE, Chrome, Safari et Opera.

//first declare a variable to store the original IFrame height.
var originalHeight = $("iframe",top.document).height();

Modifiez votre fonction heightIncrement pour utiliser les éléments suivants:

heightIncrement:function(){
 var heightDiv = jQuery("iframe",top.document).contents().find('body').attr('scrollHeight'); 
 jQuery("iframe",top.document).css({height:heightDiv});
}

Changez votre heightDecrement pour utiliser ce qui suit:

heightDecrement:function(){
 jQuery("iframe",top.document).css({height:originalHeight});
}
5
Jose Basilio

C'est ancien mais j'espère que ça aide.

On dirait que Chrome (ou peut-être tout le Webkit, pas sûr) a un bug où le scrollHeight peut augmenter mais pas diminuer (du moins dans le cas du contenu dans une iframe). Donc, si le contenu augmente, puis diminue, le scrollOffset reste au niveau supérieur. Ce n'est pas très gentil lorsque vous essayez de rendre la taille de l'iframe juste assez grande pour un contenu en constante évolution.

Une solution de contournement consiste à faire recalculer la hauteur en la définissant à une valeur suffisamment petite pour que la hauteur de l'iframe soit inférieure à son contenu, puis la propriété scrollHeight est réinitialisée.

var frame = top.document.getElementById('iFrameParentContainer').getElementsByTagName('iframe')[0];
var body = frame.contentWindow.document.body;
var height = body.scrollHeight; // possibly incorrect
body.height = "1px";
height = body.scrollHeight; // correct

Cela peut provoquer un léger scintillement mais ne fonctionne normalement pas, du moins, cela fonctionne sur ma machine (tm).

3
InfinitiesLoop

Au moment du chargement, j'appelle cette fonction 

heightIncrement:function(){     
           if($.browser.mozilla)
           { 
             var heightDiv   = jQuery("iframe",top.document).contents().attr("height")+"px";                    
             jQuery("iframe",top.document).css({height:heightDiv});
           }
           else if($.browser.opera  || $.browser.safari || $.browser.msie)
           {               
             var heightDiv   = jQuery("iframe",top.document).height();                   
             jQuery("iframe",top.document).css({height:heightDiv}); 
           } 
}

si j'utilise sans contenu (), il retourne zéro.

1
Saravanan

Ceci est un simple jQuery qui a fonctionné pour moi. Testé dans iExplorer, Firefox et Chrome:

 $('#my_frame').load(function () {  
      $(this).height($(this).contents().find("html").height()+20);
});

J'ajoute 20 pixels pour éviter toute barre de défilement, mais vous pouvez essayer une limite inférieure. 

1
Carlos Quintero

Si la source iframe est un domaine différent de celui de son parent, vous devrez probablement utiliser easyXDM .

0
dsjoerg

j'utilise ceci: 

$ ('# iframe'). live ('mousemove', function (event) { 

var theFrame = $ (this, parent.document.body);

this.height ($ (document.body) .height () - 350);
});

0
Idham Perdameian

Je ne sais pas si les gens sont satisfaits de leurs méthodes, mais j’ai écrit une approche très très simple qui semble fonctionner assez bien pour moi, dans les versions les plus récentes de Safari, Chrome, IE9, Opera et Firefox.

J'ai eu un problème pour redimensionner un agenda Google alimenté par iFrame, donc je viens de lui donner une taille par défaut dans le style de iFrame: width = "600" et des paramètres de hauteur correspondant au maximum que je voudrais, 980 je crois, puis enveloppés dans un conteneur Div avec hauteur et largeur à 100% et min-height et min-width à 400px et 300px respectivement, puis ajouté quelques jQuery pour s'exécuter à la charge et à la taille ...

        <script>

        var resizeHandle = function(){
            var caseHeight = $('#calendarCase').height();
            var caseWidth = $('#calendarCase').width();
            var iframeWidth = $('#googleCalendar').width(caseWidth - 10);
            var iframeHeight = $('#googleCalendar').height(caseWidth - 10);;
        };


</script>


<body id ="home" onLoad="resizeHandle()" onResize="resizeHandle()">

donc, pour clarifier, la fonction de redimensionnement est activée car je cible les téléphones mobiles et les tablettes dans mon design réactif, qui prend la hauteur et la largeur de calendarCase div et définit la hauteur et la largeur de l'iframe (#googleCalendar) en conséquence, moins 10 pixels pour un peu de rembourrage.

edit J'ai oublié de mentionner que j'ai utilisé caseWidth pour définir la hauteur de l'iFrame afin de conserver les proportions contraignantes et un peu à la place.

Cela a bien fonctionné jusqu'à présent. Si quelqu'un a des idées sur les raisons pour lesquelles il pourrait ne pas être stable, veuillez le signaler,

à votre santé

0
user482024

J'ai correctement redimensionné la hauteur et la largeur de l'iframe quand il est chargé. En gros, vous pouvez le faire comme ci-dessous, et je publie également un petit article sur mon blog: http://www.the-di-lab.com/?p=280


 $ (". colorbox"). colorbox (

 {iframe: true, 

 innerWidth: 0, 

 innerHeight: 0, 
 
 défilement: faux, 

 onComplete: fonction () {

 $. colorbox.resize (

 {

 innerHeight: ($ (' iframe '). offset (). top + $ (' iframe '). height ()), 

 innerWidth: ($ (' iframe '). offset (). left + $ (' iframe ') .largeur())

}

);

}

}

);
0
XuDing