Intégrer deux iframes javascript dans page html
Bonjour à tous !
Je suis débutant et je teste ceci :
Fichier FormInf.JS
-----------------
Code:
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
| // iFrame javaScript --- DEBUT
// Création de iFrame
function createIframe1() {
var cont1 = document.getElementById('main1');
if (!cont1){return};
// Création de l'élément iFrame
// var iframe1 = document.getElementById('iframe1');
var iframe1 = document.createElement('iframe');
// Assigner des attribut à iFrame
// iFrame1.setAttribute('id', 'iframe1');
iframe1.setAttribute('src', 'form/email.php');
iframe1.setAttribute('width', '605px');
iframe1.setAttribute('height', '405px');
iframe1.setAttribute('scrolling', 'no');
iframe1.setAttribute('frameborder', 0);
cont1.innerHTML = '';
// append the IFRAME element to the 'main' container
cont1.appendChild(iframe1);
}
// Insertion de la iFrame aprés la fin du loading de la page web html
window.onload = function() {
createIframe1();
}
// iFrame javaScript --- FIN |
Fichier Index.html
-----------------
Code:
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
| <head>
<!-- Feuille de style --- DEBUT -->
<!-- Navigateurs IE -->
<!--[if IE]>
<link rel="stylesheet" href="css/ContFormIE.css" type="text/css" media="screen"/>
<![endif]-->
<!-- Pour IE 7 et supérieur -->
<!--[if gte IE 8]>
<style type="text/css" title="">
.cc_content{
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#184823', endColorstr='#03b4ddb4',GradientType=1 );
width:692px;
height:590px;
position:absolute;
left:-693px;
overflow:hidden;
font-size:13px;
color:#FFFFFF;
text-transform:none;
background:url(../images/content_bg1a.png) repeat;
}
</style>
<![endif]-->
<!-- Autres Navigateurs -->
<![if !IE]>
<link rel="stylesheet" href="css/ContFormAutre.css" type="text/css" media="screen"/>
<![endif]>
<!-- Feuille de style --- FIN -->
<!-- AdOn Javascript iFrame Form -->
<script type="text/javascript" src="js/FormInf.js"></script>
</head>
<body>
<div id="wrap">
<!-- Formulaire ------------------- DEBUT -->
<div class="cc_content_4_2 block">
<h1>Demande <span>d'informations</span></h1>
<div class="scroll-wrap-formX" >
<div id="wrapper1">
<div id="main1" class="transp"></div>
</div>
</div>
</div>
<!-- Formulaire ------------------- FIN -->
</div>
</body> |
Cela marche impeccablement !
Je désire ajouter une deuxième ifram javascript. Cela donne :
Fichier FormRdV.JS
------------------
Code:
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
| // iFrame javaScript --- DEBUT
// Création de iFrame
function createIframe2() {
var cont2 = document.getElementById('main2');
if (!cont2){return};
// Création de l'élément iFrame
var iframe2 = document.createElement('iframe');
// Assigner des attribut à iFrame
iframe2.setAttribute('src', 'form/reserv.php');
iframe2.setAttribute('width', '605px');
iframe2.setAttribute('height', '405px');
iframe2.setAttribute('scrolling', 'no');
iframe2.setAttribute('frameborder', 0);
cont2.innerHTML = '';
// append the IFRAME element to the 'main' container
cont2.appendChild(iframe2);
}
// Insertion de la iFrame aprés la fin du loading de la page web html
window.onload = function() {
createIframe2();
}
// iFrame javaScript --- FIN |
Fichier Index.html
-----------------
Code:
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
| <head>
<!-- Feuille de style --- DEBUT -->
<!-- Navigateurs IE -->
<!--[if IE]>
<link rel="stylesheet" href="css/ContFormIE.css" type="text/css" media="screen"/>
<![endif]-->
<!-- Pour IE 7 et supérieur -->
<!--[if gte IE 8]>
<style type="text/css" title="">
.cc_content{
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#184823', endColorstr='#03b4ddb4',GradientType=1 );
width:692px;
height:590px;
position:absolute;
left:-693px;
overflow:hidden;
font-size:13px;
color:#FFFFFF;
text-transform:none;
background:url(../images/content_bg1a.png) repeat;
}
</style>
<![endif]-->
<!-- Autres Navigateurs -->
<![if !IE]>
<link rel="stylesheet" href="css/ContFormAutre.css" type="text/css" media="screen"/>
<![endif]>
<!-- Feuille de style --- FIN -->
<!-- AdOn Javascript iFrame Form -->
<script type="text/javascript" src="js/FormInf.js"></script>
<script type="text/javascript" src="js/FormRdV.js"></script>
</head>
<body>
<div id="wrap">
<!-- Formulaire ------------------- DEBUT -->
<div class="cc_content_4_2 block">
<h1>Demande <span>d'informations</span></h1>
<div class="scroll-wrap-formX" >
<div id="wrapper1">
<div id="main1" class="transp"></div>
</div>
</div>
</div>
<!-- Formulaire ------------------- FIN -->
<div class="cc_content_4_3 block">
<h1>Prener <span>rendez-vous</span></h1>
<div class="scroll-wrap-formX" >
<div id="wrapper1">
<div id="main2" class="transp"></div>
</div>
</div>
</div>
</div>
</div>
</body> |
L'affichage de l'iframe s'affiche seulement si je mets en commentaire l'une des deux lignes de chargement du module JS.
Je ne comprends pas pourquoi.
Comment puis-je avoir l'affichage de l'un ou de l'autre normalement selon le click du lien ?
Merci d'avance de votre réponse.
