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

Vue hybride

Discussions similaires

Partager

Partager