Charger iframe en javascript au clique

**Anonyme1784** · 06/12/2013, 20h34

Salut, je souhaite faire une sorte de lecteur à fichiers :
• à gauche la liste des liens (avec un ECHO, c'est-à-dire avec un nombre de liens inconnu)
• et à droite un cadre accueillant une iframe.
=> Au clique sur un des liens je souhaite que le cadre, l'iframe à droite donc, fasse apparaître (en chargeant rapidement) un aperçu de ce que contient (pdf etc...) le lien cliqué.

Je vois les liens à gauche, je clique sur le 4ème lien, je vois un aperçu à droite qui apparaît quasiment instantanément,
ensuite je clique sur le 7ème lien, je vois un aperçu à droite qui apparaît quasiment instantanément... etc.

Il y a sûrement quelque chose à faire en javascript mais je m'y connais pas

mais mon problème est surtout avec le nom de l'id... car j'ai une boucle qui affiche les fichiers que je mets, je ne souhait pas modifier ce système... Enfin je voudrais éviter si possible.
Donc j'ai des liens et les id je sais pas trop comment les controler.

Aidez moi s'il vous plait

Merci !!

**stephcache** · 07/12/2013, 10h11

Salut j'ai fait un truc comme sa il y a pas longtemps, je te pose mon code si sa peut aidé

Code html :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Visualisation des sch&eacute;mas de GATES</title>
<link rel="icon" type="image/png" href="image/mafavicon.png" />
<link rel="stylesheet" type="text/css" href="css/style-schemas.css" />
<!--[if lt IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=8" >
<link rel="stylesheet" type="text/css" href="css/style-schemas_ie.css" />
<![endif]-->
</head>
<body>
<div id="header">
<div id="logo_apave"><img src="" /></div>
<div id="text">Visualisation des sch&eacute;mas &eacute;lectrique</div>
<div id="logo_societe"><img src="" /></div>
</div>
 
<div id="nav">
<div id="titre">* Liste des sch&eacute;mas *</div>
<ul id="ul">
<li><a href="#A0">Synoptique</a></li>
<li><a href="#A1">Schémas N° 1 - TGBT</a></li>
<li><a href="#A2">Schémas N° 2 - Coffret chaudière et chauffe eau</a></li>
<li><a href="#A3">Schémas N° 3 - Coffret bureau expédition</a></li>
<li><a href="#A4">Schémas N° 4 - Coffret réfectoire</a></li>
<li><a href="#A5">Schémas N° 5 - Coffret informatique haut et bas</a></li>
<li><a href="#A6">Schémas N° 6 - Coffret chargeur logitrans</a></li>
<li><a href="#A7">Schémas N° 7 - Coffret PC passage E4 et expédition</a></li>
<li><a href="#A8">Schémas N° 8 - Coffret bureau RDC côté photocopie</a></li>
<li><a href="#A9">Schémas N° 9 - Coffret poteau bureau étage</a></li>
<li><a href="#A10">Schémas N° 10 - Armoire placard toilette RDC</a></li>
<li><a href="#A11">Schémas N° 11 - Coffret PC local chargeur</a></li>
</ul>
<div id="fr" title="A venir" disabled><a href="#francais" onclick='return false'>Fiche de contrôle</a></div>
<div id="en" title="A venir" disabled><a href="#anglais" onclick='return false'>Checklist</a></div>
</div>
 
<div id="section">
<!--[if lt IE 9]>
<script type="text/javascript" src="js/iframe.js"></script>
<![endif]-->
<!--[if !IE]><!-->	
<iframe id="A0" src="./pdf/Synoptique.pdf"></iframe>
<iframe id="A1" src="./pdf/Schémas N° 1 - TGBT.pdf"></iframe>
<iframe id="A2" src="./pdf/Schémas N° 2 - Coffret chaudière et chauffe eau.pdf"></iframe>
<iframe id="A3" src="./pdf/Schémas N° 3 - Coffret bureau expédition.pdf"></iframe>
<iframe id="A4" src="./pdf/Schémas N° 4 - Coffret réfectoire.pdf"></iframe>
<iframe id="A5" src="./pdf/Schémas N° 5 - Coffret informatique haut et bas.pdf"></iframe>
<iframe id="A6" src="./pdf/Schémas N° 6 - Coffret chargeur logitrans.pdf"></iframe>
<iframe id="A7" src="./pdf/Schémas N° 7 - Coffret PC passage E4 et expédition.pdf"></iframe>
<iframe id="A8" src="./pdf/Schémas N° 8 - Coffret bureau RDC côté photocopie.pdf"></iframe>
<iframe id="A9" src="./pdf/Schémas N° 9 - Coffret poteau bureau étage.pdf"></iframe>
<iframe id="A10" src="./pdf/Schémas N° 10 - Armoire placard toilette RDC.pdf"></iframe>
<iframe id="A11" src="./pdf/Schémas N° 11 - Coffret PC local chargeur.pdf"></iframe>
<!--<![endif]-->
</div>
 
<div id="footer">
 
</div>
 
<script type="text/javascript" src="js/dimention.js"></script>
 
</body>
</html>

Code :

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

1
2
3
4
5
6
7
8
9
10
var largueur = document.documentElement.clientWidth;
var hauteur = document.documentElement.clientHeight;
 
var hauteur_section = hauteur - 140;
var largueur_section = largueur - 350;
var hauteur_menu = hauteur - 723;
 
document.getElementById("section").style.width = largueur_section + "px";
document.getElementById("section").style.height = hauteur_section + "px";
document.getElementById("ul").style.height = hauteur_menu + "px";

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
var liste_fichier = [
'Synoptique', 
'01_Poste de livraison', 
'02_Poste N° 1', 
'03_Poste N° 2', 
'04_Station de lavage', 
'05_Armoire nouveau bureau admin',
'06_Armoire gauche bureau local technique',
'07_Armoire droite bureau local technique',
'08_Armoire N° 8 - RT 2',
'09_Armoire éclairage travée D - RT 7',
'10_Armoire local grenallieuse travée D - RT 6',
'11_Armoire N° 8 - RT 2',
'12_Armoire N° 9',
'13_Armoire N° 10',
'14_Armoire N° 14 - RT 4',
'15_Armoire N° 6',
'16_Armoire N° 6 Bis',
'17_Armoire N° 6 Ter',
'18_Armoire atelier prototipe N° 3',
'19_Armoire machine outil N° 2',
'20_Armoire magasin N° 2',
'21_Armoire éclairage magasin N° 2',
'22_Armoire hydraulique N° 7',
'23_Atelier sous ensemble N° 5',
'24_Armoire logistique',
'25_Armoire bureau projet',
'26_Armoire bureau projet - logistique',
'27_Vestiare Armoire N° 1',
'28_Coffret sanitaire appentis',
'29_Armoire magasin N° 1',
'30_Armoire expédition',
'31_Armoire nouveau bureau appentis',
'32_Armoire bureau appentis'
];
 
var tableau = document.getElementsByTagName('a');
 
for (var i = 0; i < tableau.length; i++)
{
	tableau[i].onclick = function()
	{	
	var href = this.getAttribute('href');
	console.log(href);
	numeros = href.split('A');
	console.log(numeros[1]);
	var section = document.getElementById("section");
	section.innerHTML = '<iframe src="./pdf/' + liste_fichier[numeros[1]] + '.pdf"></iframe>';
	}
}

Code css :

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
*, *:after, *:before {box-sizing: border-box;}
 
iframe {width: 100%; height: 100%;}
 
body {margin: 0; padding: 0; font-family: comic sans ms; font-size: 12px; width: 100%;}
a:link, a:visited, a:active, a:hover {text-decoration: none; color: #000;}
 
#header {width: 100%; min-width: 970px; margin-bottom: 10px; border-bottom: 1px solid #000; padding: 0px;  display: block;}
#header #logo_apave {display: inline-block; float: left;}
#header #logo_apave img {height: 100px;}
#header #text {display: inline-block; height: 100px; line-height: 100px; vertical-align: middle; text-align: center; font-size: 250%; width: 64%;}
#header #logo_societe {display: inline-block; float: right; vertical-align: middle;}
#header #logo_societe img {height: 100px;}
 
#nav {width: 300px; margin-left: 10px; padding: 0px; position: fixed;}
#nav #titre {width: 100%; text-align: center; font-size: 150%;}
#nav ul {max-height: 728px; padding: 5px; list-style-type: none; border: 1px solid #000; padding: 0; font-size: 9px;}
#nav ul li {font-size: 120%; height: 22px; line-height: 22px; vertical-align: middle; padding-left: 2px;}
#nav li:hover {background: rgb(181, 181, 181);}
#nav ul li a {width: 100%; display: block; background: url("../image/pdf.gif") no-repeat center left; padding-left: 23px;}
#nav #fr, #nav #en {padding-left: 5px;}
#nav #fr a,#nav #en a {width: 100%; display: block; padding-left: 73px; font-size: 17px; height: 64px; line-height: 64px; vertical-align: middle;}
#nav #fr a {background: url("../image/drapeau_france.png") no-repeat center left;}
#nav #en a {background: url("../image/drapeau_royaume_uni.png") no-repeat center left;}
#nav #en:hover, #nav #fr:hover {background-color: rgb(181, 181, 181);}
 
#section {position: fixed; left: 320px; border: 1px solid #000;}
 
#A0, #A1, #A2, #A3, #A4, #A5, #A6, #A7, #A8, #A9, #A10, #A11, #francais, #anglais {display: none;}
#A0:target, #A1:target, #A2:target, #A3:target, #A4:target, #A5:target, #A6:target, #A7:target, #A8:target, #A9:target, #A10:target, #A11:target, #francais:target, #anglais:target {display: block;}
 
#footer {position: absolute; min-width: 590px; bottom: 0; height: 30px; line-height: 30px; vertical-align: middle; right: 0;}

**Anonyme1784** · 07/12/2013, 16h13

Merci,

Envoyé par To175

mais mon problème est surtout avec le nom de l'id... car j'ai une boucle qui affiche les fichiers que je mets, je ne souhait pas modifier ce système... Enfin je voudrais éviter si possible.
Donc j'ai des liens et les id je sais pas trop comment les controler.

Charger iframe en javascript au clique

JavaScript

Discussions similaires

Partager

Partager