Iframe et chargement de page

**identifiant_bidon** · 10/09/2012, 11h04

Bonjour à tous,

Voici mon souci :

Je dispose sur mon site d'une page d'accueil avec 10 boutons. J'ai également 10 iframes dans des div. Les div (et donc les iframes) sont masquées au chargement (display:none).
Lorsque je clique sur un bouton, le div correspondant passe à display:block et l'iframe apparait donc.

Mon souci est que le temps de chargement de la page d'accueil est long puisque le contenu de chaque iframe se charge.

Quelqu'un aurait-il une astuce pour faire en sorte que les iframes ne se chargent pas au loading de la page d'accueil ? L'idéal serait que chaque iframe se charge au clic sur le bouton qui lui correspond.

Merci beaucoup.

**SpaceFrog** · 10/09/2012, 11h12

tu ne peux pas tre passer des iframes et faire du load() ??

**identifiant_bidon** · 10/09/2012, 11h26

Salut SpaceFrog

Éventuellement je pourrai le faire et prendre quelques heures pour refaire un refactoring complet du code si tu penses qu'il vaut vraiment mieux se passer des iframes.

Par contre, qu'appelles-tu "faire du load()" ? Tu aurais un exemple à me donner pour inspiration ?

Merci

**SpaceFrog** · 10/09/2012, 11h38

http://api.jquery.com/load/

**identifiant_bidon** · 10/09/2012, 12h39

Super SpaceFrog.

Ça marche nickel.
Autre petite question. Si je veux afficher mes div et leur contenu, je fais load mais lorsque je veux les masquer, j'imagine que je fais unload ?

**SpaceFrog** · 10/09/2012, 12h40

non a priori je dirais hide() ou empty() ...

**identifiant_bidon** · 11/09/2012, 13h20

Voilà j'avance pas mal mais me retrouve confronté à une autre difficulté.
Voici un exemple de code qui reprend ce que tu as proposé SpaceFrog :

index.php

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
<html>
<head>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script>
		$(function() {
			$("#button_1").click(function() 
			{
				$("#div_button1").load('contenu_button1.php');
			});
		});		
	</script>
</head>
<body>
<div id="div_button" style="position:absolute; left:0px; top:50px; width:200px; height:80%; border:2px solid #00CC00">
	<table width="100%" cellpadding="0" cellspacing="0" border="1">
	<tr><td id="button_1" name="button_1"><input type="button" value="BOUTON 1"/></td></tr>
	<tr><td><input type="button" id="button_2" name="button_2" value="BOUTON 2"/></td></tr>
	<tr><td><input type="button" id="button_3" name="button_3" value="BOUTON 3"/></td></tr>
	<tr><td><input type="button" id="button_4" name="button_4" value="BOUTON 4"/></td></tr>
	<tr><td><input type="button" id="button_5" name="button_5" value="BOUTON 5"/></td></tr>
	<tr><td><input type="button" id="button_6" name="button_6" value="BOUTON 6"/></td></tr>	
	<tr><td><input type="button" id="button_7" name="button_7" value="BOUTON 7"/></td></tr>
	<tr><td><input type="button" id="button_8" name="button_8" value="BOUTON 8"/></td></tr>
	<tr><td><input type="button" id="button_9" name="button_9" value="BOUTON 9"/></td></tr>
	<tr><td><input type="button" id="button_10" name="button_10" value="BOUTON 10"/></td></tr>
	</table>
</div>
<div id="div_button1" style="position:absolute; left:300px; top:50px; width:500px; height:80%; border:2px solid #00CC00">
&nbsp;
</div>
</body>
</html>

contenu_button1.php

Code :

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

1
2
3
4
5
6
7
8
<html>
<head>
 
</head>
<body>
<input id="btn_test" name="btn_test" type="button" value="test"/>
</body>
</html>

Mon besoin est le suivant :
Lorsque je clique sur le bouton se trouvant dans la div que j'ai fait apparaître (btn_test), cela déclenche une action côté serveur (requête en base en PHP) puis la div en question doit être rafraichie avec un résultat de la requête qui vient d'être effectuée.

Comment dois-je procéder à votre avis ?

Merci

**SpaceFrog** · 11/09/2012, 13h51

sur le clic du bouton un load()

Iframe et chargement de page

JavaScript

Discussions similaires

Partager

Partager