Attendre le chargement complet d'une iFrame

**ToxiK** · 11/01/2010, 02h10

Bonsoir,

j'ai une iFrame que je charge dynamiquement, ensuite j'aimerais la redimensionner mais je n'y arrive pas.

Code :

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

1
2
3
4
5
dyn = $('#dynamicWindow');
 
html = '<iframe id="dynamicFrame" name="dynamicFrame" src="' + url + '" width="960px" height="3000px" scrolling="auto" frameborder="0"></iframe>';
 
dyn.html(html);

J'aimerais déjà récupérer la hauteur du contenu de l'iFrame, mais une fois sur deux le contenu n'est pas complètement chargé et du coup mon alert() ne s'affiche pas.

Je suis perdu je ne sais plus ou chercher...

**danielhagnoul** · 11/01/2010, 11h31

Bonjour.

Exemple :

Code :

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

1
2
3
4
5
6
7
8
<script>
	$(function(){
		$('#affiche').html('<iframe id="dynamicFrame" src="Provisoire/efface12.html" width="600" height="500" scrolling="auto" frameborder="0"></iframe>');						
	});
	$(window).load(function(){
		$("#dynamicFrame").contents().find("#conteneur p").css({color:"red"});
	});		
</script>

Le point important, c'est que l'on accède à l'iframe par

Code :

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

$("#dynamicFrame").contents().find(...)

après le chargement de window.

**ToxiK** · 11/01/2010, 12h17

Bonjour,

rien n'a faire je n'y arrive pas....

Je reprend en plus complet.

J'utilise une fonction qui charge dynamiquement une iFrame

Code :

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

1
2
3
4
5
6
7
8
9
10
function loadWindow(url)
{
 
	$('#dynamicWindow').html('<iframe id="dynamicFrame" src="' + url + '" width="600" height="500" scrolling="auto" frameborder="0"></iframe>');						
 
	$(window).load(function(){
		alert('coucou');
	});
 
}

Mon alert ne s'affiche jamais :s

**danielhagnoul** · 11/01/2010, 12h46

Normal ! $(window).load() ne doit pas être dans une fonction !

Exemple :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8"/>
    <!-- <base href="http://danielhagnoul.developpez.com/"> -->
    <base href="file:///C:/Documents%20and%20Settings/user/Mes%20Documents/KOMODO%20SPACE/DVJH/"/>
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style>
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}
		div#affiche {
			margin:12px;
			border:1px solid #999999;
		}
 
		/* TEST */
	</style>
	<script charset="utf-8" src="lib/jquery-1.4a2.min.js"></script>
	<script>
		$(document).ready(function(){
			$('#affiche').html('<iframe id="dynamicFrame" src="Provisoire/efface12.html" width="600" height="500" scrolling="auto" frameborder="0"></iframe>');						
		});
		$(window).load(function(){
			$("#dynamicFrame").contents().find("#conteneur p").css({color:"red"});
		});		
	</script>	
</head>
<body>
	<div id="conteneur">
		<div id="affiche"></div>
	</div>
</body>  
</html>

**ToxiK** · 11/01/2010, 17h19

je n'arrive à rien !!

Je n'arrive pas à faire marcher mon code, donc je suis parti du tien, mais je n'arrive pas à récupérer la taille du contenu de mon iFrame.

Est-ce bien comme ça qu'il faut faire ?

le alert() me renvoi null

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
17
18
19
20
<html>
<head>
	<title>Page type</title>
	<script src="./lib/jquery.js" type="text/javascript"></script>
	<script>
		$(function(){
			$('#affiche').html('<iframe id="dynamicFrame" src="../forum/index.php" width="600px" height="500px" scrolling="auto" frameborder="0"></iframe>');	
		});
 
		$(window).load(function(){
			alert($("#dynamicFrame").contents().find('body').css('height'));
		});
	</script>	
</head>
<body>
	<div id="conteneur">
		<div id="affiche"></div>
	</div>
</body>  
</html>

**danielhagnoul** · 12/01/2010, 00h10

Bonsoir.

La taille de l'iframe ? Elle est fixée au départ ! Pour obtenir les tailles internes d'un élément, le fait que l'on manipule un élément de l'iframe n'y change rien, il suffit d'appliquer la documentation jQuery, exemple pour body :

Code :

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

1
2
3
4
5
6
7
8
$(window).load(function(){
	var obj = $("#dynamicFrame").contents().find("body");
 
	var height = obj.innerHeight();
	var width = obj.innerWidth();
 
	alert("body innerHeight = " + height + "\n body innerWidth = " + width);
});

**ToxiK** · 13/01/2010, 17h54

Ca y est j'arrive bien a récupérer la hauteur et largeur du contenu de l'iFrame, avec un setTimeOut comme ça au bout d'un moment le contenu de l'iFrame est bien chargé et là ça marche

Par contre je n'arrive pas avec le $(window).load(function(){}...

J'ai mis le $(window).load hors de ma fonction, mais il n'est appelé qu'une seule fois non ?

Exemple concret : ma page est chargé avec le header le footer et un div de contenu #dynamicWindow.

Quand je clique sur un bouton, je met du contenu dans le #dynamicWindow (dans un cas l'iFrame)

Code :

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

$('#dynamicWindow').html('<iframe id="dynamicFrame" src="' + url + '" width="960" height="3000" scrolling="auto" frameborder="0"></iframe>');

Et là le code du $(window).load ne s'exécute pas (parce que la page est considérée comme déjà chargée ?)

Est-ce que je dois rajouter un $(window).load quand je charge mon #dynamicWindow ?

**danielhagnoul** · 13/01/2010, 18h23

Bonjour.

Je commence à comprendre, enfin j'espère !

Mon exemple s'applique pour une page qui contient un iframe dès sa création alors que dans votre cas l'iframe est chargé par l'intermédiaire d'un clic sur un bouton ! Dans ce cas, c'est toujours un événement load, mais à « l'ancienne » :

Code :

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

1
2
3
4
5
6
7
8
 
<script type="text/javascript">
    function frameReady(){
        $("#dynamicFrame").contents().find( ... etc
    }
</script>
 
$('#dynamicWindow').html('<iframe id="dynamicFrame" src="' + url + '" width="960" height="3000" scrolling="auto" frameborder="0" onload="frameReady();"></iframe>');

**ToxiK** · 13/01/2010, 22h23

Oui super !!

Ca y est j'ai réussi à faire ce que je voulais.

Par contre mon contenu (qui est un forum) change de taille lorsque je que navigue, du coup j'ai mis un setTimeout() qui rappelle ma fonction de redimensionnement.

Est-ce la meilleure façon de faire ?

J'ai mis 100 ms pour réduire au maximum l'intervalle de temps ou l'iFrame n'a pas la bonne taille, est-ce que ça fait beaucoup forcer le navigateur ?

Attendre le chargement complet d'une iFrame

jQuery

Discussions similaires

Partager

Partager