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

Vue hybride

Discussions similaires

Partager

Partager