Récupération hauteur d'une page en iframe

**Soundboy39** · 02/12/2012, 21h01

Bonjour,

Voilà je suis en train de faire un script de popup de type Lightbox,
avec le soutien de jQuery, dont je ne peu plus me passer...
J'ai déjà pas mal avancé dans mon périple sans avoir a demander de l'aide
mais là je coince.

En fait j'affiche dans la popup une page via une iframe, et pour savoir quelle taille doit faire la popup il faut que je sache quelle taille fait la page contenu dans l'iframe.

J'arrive à récupérer cette valeur via ce code présent sur la page affichée dans l'iframe :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
$(document).ready( function() { 
var frame_width = $(document).width();		
var frame_height = $(document).height();
parent.showBox(frame_width, frame_height);
});

Le script appel la fonction "showBox" présente sur la page parente, cette fonction sert à dimensionner l'iframe(et donc la popup) de manière à ce que la page entière s'affiche.

Tout fonctionne bien mis à part le fait que la hauteur envoyée à la fonction "showBox" n'est pas la bonne, la valeur est de "172" au lieu d'être de "300".

Pensant que le problème venait de "$(document).ready" j'ai essayé d'autre méthodes dont ".load()"... jusqu'à l'utilisation d'un événement ".onLoad()" sur "<body>",
mais rien y fait.

Qui peut me dire où se situ mon erreur ?? Merci d'avance !!

MICKAEL

**SylvainPV** · 02/12/2012, 21h22

Peux-tu essayer ce code au onload de ton iframe:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<IFRAME SRC="..." width="100%" height="200px" id="iframe1" frameborder="0" onLoad="autoResize(this);"></iframe>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
function autoResize(iframe){
     var body = iframe.contentWindow.document.body;
     var frameHeight = body.scrollHeight;
     var frameWidth = body.scrollWidth;
     iframe.height = frameHeight;
     iframe.width = frameWidth;
    showBox(frameWidth, frameHeight);
}

avec autoResize sur la page parente. Comme ça tu adaptes la taille de ton iframe à celle du contenu. Par contre ce qui va être délicat c'est d'attendre l'évènement onLoad avant de redimensionner la pop-up.

**Soundboy39** · 08/12/2012, 21h06

merci pour ta réponse Sylvain et désolé pour
mon retour tardif...

en fait le problème ne vient même pas de l'iframe, car entre temps j'ai
eu à utiliser .height() dans un autre context, et il se trouve que là aussi
la valeur n'était pas la bonne (environ 20% inférieur...).

J'aimerai donc savoir si il n'y a pas une autre alternative à .height() ??
En passant pas du javascript classique peut être ??

MERCI pour votre aide.

**SylvainPV** · 09/12/2012, 01h05

jQuery.fn.height fait appel à différentes propriétés selon les navigateurs pour récupérer la hauteur d'un élément. En théorie cette fonction est là pour t'aider et ne pas avoir à gérer toutes les particularités de chaque navigateur.

Mais effectivement certains bugs sont à signaler, on est pas encore parvenus à un résultat parfait. Après faut voir ce qu'on entend par hauteur: entre la margin, le padding, la border, le contenu overflow... difficile de se mettre d'accord ^^

Tu as testé ma solution ? Justement elle ne passe pas par $.fn.height mais document.body.scrollHeight, ce qui est plus approprié pour mesurer la hauteur d'un document.

Récupération hauteur d'une page en iframe

JavaScript

Discussions similaires

Partager

Partager