Intégrer deux iframes javascript dans page html

**taratata2015** · 05/11/2012, 14h12

Bonjour à tous !

Je suis débutant et je teste ceci :

Fichier FormInf.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
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 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.

**Bovino** · 05/11/2012, 14h51

window.onload est une propriété. Donc si tu la définis deux fois, la seconde définition va écraser la première qui ne sera donc jamais exécutée !
La meilleure solution est de passer par addEventListener().

Sinon, au passage,

Code :

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

1
2
3
window.onload = function() {
  createIframe1();   
}

peut se résumer à

Code :

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

window.onload = createIframe1;

**taratata2015** · 05/11/2012, 17h15

je ne vois pas comment utiliser la commande addEventListener!
c'est comme une condition if!

svp donner moi un exemeple ou un début de voix à suivre

merci d'avance

**Bovino** · 05/11/2012, 17h23

http://lmgtfy.com/?q=addEventListener()

**taratata2015** · 05/11/2012, 17h34

j'ai essayé ceci

Code :

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

1
2
3
4
  window.onload = function() {
    // createIframe2();   
    cont2.addEventListener("", createIframe2(), true);
  }

cela ne donne rien!

une idée svp - merci

**SpaceFrog** · 05/11/2012, 17h36

1) tu ne précise pas l'event à écouter
2) tu assignes le resultat d'une fonction et pas une fonction

Intégrer deux iframes javascript dans page html

JavaScript

Vue hybride

Discussions similaires

Partager

Partager