Bonjour à tous !
Je suis débutant et je teste ceci :
Fichier FormInf.JS
-----------------
Fichier Index.html
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 // 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
-----------------
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 <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 : 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 // 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 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 <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.
Partager