Redimensionnement dynamique d'une iframe

**Vanito** · 30/04/2014, 08h38

Bonjour,

Actuellement j'utilise du javascript pour redimensionner une iframe par rapport à son contenu de cette manière:

Code :

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

1
2
3
<div id="content">
    <iframe name="tht" width="100%" src="path" onload='javascript:resizeIframe(this);'></iframe>
</div>

Code javascript :

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

1
2
3
function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}

Mais j'ai remarqué depuis quelque temps lorsque le fichier à afficher est trop gros (+ en parallèle il ya d'autre traitement sur la page) et que le serveur et lent, l'iframe ne se redimensionne pas ou pire ne se redimensionne pas et n'affiche rien.
Peut être que la solution que j'utilise n'est pas la bonne. Je précise tout de même que les essai fait en local y a pas de souci.

Y t'il d'autre moyen de faire exactement ce que je souhaite faire sans utiliser du javascript quelque chose de plus "robuste"?

Sachant que je suis pas contre le fait d'utiliser du javascript si j'arrive à comprendre pourquoi dans certain cas ça ne marche pas

Merci

**Kitzumé** · 02/05/2014, 12h29

Salut,

en local les éléments se charge beaucoup plus vite.
Le problème que tu doit rencontrer c'est qu'un éléments n'as pas du être charger lors de l’exécution du JavaScript.

En utilisant juste du css comme ceci

Code :

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

1
2
3
4
5
 
#content iframe {
	width: 100%;
	height: 100%;
}

Et mettre les dimensions au "#content"

En faisant "scrollHeight" c'est quel valeur que tu veux récupérer ?

**cedsun** · 02/05/2014, 20h00

+1 Kitzumé

Le truc c'est qu'il veut que la iframe prenne la hauteur de son contenu et pour ça, la fonction JS récupère la hauteur de scroll de la iframe.

Le soucis est effectivement le temps de chargement.
Il faudrait appliquer le JS q'une fois que la page est chargée.

Avec Jquery ça pourrait être simple en utilisant l'objet window

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script type='text/javascript'>
$(window).load(
        function(){
                jQuery('#tht').height(jQuery('#tht').find('body').height());
        }
);
</script>
</head>
<body>
 <iframe name="tht" id="tht" width="100%" src="path"></iframe>
</body>
</html>

(j'ai ajouté un id sur la iframe)
Je sais pas si ce code va fonctionner mais on doit pas être très loin.

**Kitzumé** · 03/05/2014, 10h18

Ok je m'en douté.

Vu qu'il utilise pas de jQuery il cherche une méthode sans

JAVASCRIPT

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<script type='text/javascript'>
function autoResize(iframe){
        var body = iframe.contentWindow.document.body;
        var frameHeight = body.scrollHeight;
        var frameWidth = body.scrollWidth;
        iframe.height = frameHeight;
        iframe.width = frameWidth;
}
</script>