Attendre le chargement complet d'une iFrame

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

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, 10h31

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, 11h17

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, 11h46

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, 16h19

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** · 11/01/2010, 23h10

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);
});

Attendre le chargement complet d'une iFrame

jQuery

Vue hybride

Discussions similaires

Partager

Partager