Lien entre deux fenetres

**Lost In Translation** · 28/06/2007, 12h10

Bonjour à tous,

J'aimerais connaître le lien qu'il y a entre une fenetre et un "pop-up" ouvert à partir de cette dernière.

J'aimerais faire comme le système de smiley de ce forum.

En cliquant sur "plus", un pop-up s'ouvre avec une liste d'image, et en cliquant sur l'image que je souhaite insérer, le "code" s'affiche et la fenetre se ferme.
J'ai regardé dans les cours et scripts présents sur le site, mais j'n'ai rien trouvé (peut être ai-je mal cherché).

Quelqu'un pourrait me donner un coup de main ? Je suppose que c'est une fonction javascript qui gère ça... mais laquelle et comment, ^^ ceci est mon grand questionnement.

Merci de vos aides.

**Auteur** · 28/06/2007, 12h22

bonjour,

je pense que ces exemples peuvent t'aider

**Lost In Translation** · 28/06/2007, 12h49

Whoooo...

J''avais mal du chercher

!

Je vais regarder, si j'ai des petits soucis de mise en oeuvre, je viendrais poster mes problèmes.

Merci énormement et bonne journée

**Lost In Translation** · 29/06/2007, 11h40

Bonjour,

j'ai donc suivi le lien si dessus et j'ai regardé les différents code. Mon sujet s'apprentant à la version "pop-up", j'ai testé, mais à priori, il réside un soucis...
Quand je clique sur une image de mon pop-up (fenetre fille), elle ne s'affiche pas dans le textarea de la fenetre mère.

Voici donc le code de mes deux pages :

fichier creer_article.php?et=1 (fenetre mère)

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
            <head>
              <title>BBCode en Javascript</title>
              <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
              <script language="javascript" type="text/javascript" src="prev.js"></script>
              <script language="Javascript" type="text/javascript" src="bbcode.js"></script>
              <script type="text/javascript">
              <!--
                var fenFille;
                var chargeOk = "false";
 
                function ouvrirFenFille()
                {
                  if (chargeOk=="false")
                  fenFille = window.open("inserer_img.php","Insertion d'image","menubar=no, status=no, scrollbars=no, menubar=no, width=700, height=700");
                }
 
                function changeURLPageFille(url)
                {
                  if (chargeOk=="true")
                  {
                  fenFille.location.href = url;
                  }
                }
 
              //-->
              </script>
 
            </head>
            <body>
            <form method="post" action="creerArticle.php?et=2" name="formulaire">
 
<div style="border: 1px dashed red;">
<!--boite d'outils-->
 
<!--outil de mise en forme-->
 
<div style="border: 1px dashed green; margin: 5px 5px 5px 5px;">
                <input type="button" id="gras" name="gras" value="Gras" onClick="javascript:bbcode('[gras]', '[/gras]');return(false)" />
                <input type="button" id="italic" name="italique" value="Italic" onClick="javascript:bbcode('[italique]', '[/italique]');return(false)" />
                <input type="button" id="image" name="image" value="Image" onClick="javascript:bbcode('[image]', '[/image]');return(false)" />
                <input type="button" id="lien" name="lien" value="Lien" onClick="javascript:bbcode('<a href="http://&#39;, &#39;" target="_blank">', '</a>');return(false)" />
 
                <a href="#" title="Créer une citation" onClick="javascript:bbcode('[citation=AUTEUR]', '[/citation]');return(false)">Citation</a><br />
              </div>
<!--fin outil de mise en forme-->              
 
<!-- outil d'insertion>
<div style="border: 1px dashed blue; margin: 5px 5px 5px 5px;">
                <p>
                  écrire en : 
                  <select id="couleur" name="couleur">
                    <option value="red" onClick="javascript:bbcode('[couleur=red]', '[/couleur]');return(false)">Rouge</option>
                    <option value="green" onClick="javascript:bbcode('[couleur=green]', '[/couleur]');return(false)">Vert</option>
 
                  </select>
                   |||
                   insérer un plugin :
                   <select id="plugin" name="plugin"><option value="inscription" onClick="javascript:bbcode('[plugin:inscription]', '[/plugin]');return(false)">inscription</option><option value="delog" onClick="javascript:bbcode('[plugin:delog]', '[/plugin]');return(false)">delog</option><option value="log" onClick="javascript:bbcode('[plugin:log]', '[/plugin]');return(false)">log</option>
                  </select> 
                  |||
                  <input type="button" value="Ouvrir fenêtre enfant" onclick="ouvrirFenFille()">   
                </p>
              </div>
<!--fin outil d'insertion-->
            <br />
<!-- check box qui quand elle est selectionné génére automatiquement l'aperçu-->
            <input name="auto" id="auto" type="checkbox" onClick="automatique()" /> <label for="auto">Pr&eacute;visualisation automatique</label>
</div>
<!--Fin boite outil-->
            <br />
            <div style="float:left;">
<!--Textarea ou j'écris mon article et insère les différents éléments-->
              <textarea cols=60 rows=25 id="textarea" name="textarea"></textarea><br>
              <input type="button" value="Prévisualiser" onClick="previsualisation();return(false)" /><br /><p>idArt : <br />
 
                <input type="hidden" name="idArt" value="28" /><br />
                </p><p>resume : <br />
                <input type="text" name="resume" value="" /><br />
                </p><p>envoyer : <br />
                <input type="submit" name="envoyer" value="Creer Article" /><br />
                </p></div>
<!--textarea ou se fait l'aperçu-->
              <div style="border: 1px dashed #000000; padding: 0.2em; height: 400px; overflow: auto; width:600px; float:right;" align="left" id="prev"></div></form>

inserer_image.php (fenetre fille)

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
 
<html>
<head>
<title></title>
<script type="text/javascript">
<!--
function charge()
{
 window.opener.chargeOk = "true";
}
function decharge()
{
 window.opener.chargeOk = "false";
}
function changePage(url)
{
 window.opener.changeURLPageFille(url);
}
 
function transmetInfos(data)
{
 window.opener.document.getElementById("textarea").innerHTML = data;
}
//-->
</script>
</head>
 
<body>
 
<!-- partie haute-->
 
<!-- partie upload image depuis son pc -->
<form action="upload.php?op=int" method="post">
<legend>Insérer une image depuis votre PC</legend>
<fieldset>
 
  <input type="file" name="upload_file"><br>
  <input type="submit" value = "envoyer cette image au serveur">
</fieldset>
</form>
<!--fin upload depuis le pc-->
<br>
 
<hr>
<!-- je liste chaque image de mon dossier userfiles et en cliquant dessus elles s'insèrent dans le textarea de ma page mère -->
<a href="#" onClick="transmetInfos([img:The_Prince_of_Persia_by_Saskei.jpg])"><img src="../userfiles/The_Prince_of_Persia_by_Saskei.jpg" height="100" width="100"></a>
<!--fin liste-->
</body>
</html>

---------------
Voilà, surement que l'erreur est petite et comme je ne suis pas féru de javascript, je n'arrive pas à la déceller. Merci de vos aides.

En cliquant sur l'image, je voudrais voir s'afficher dans le text area : [img:nom_img].

Mon code n'est pas très propre ni conforme W3C car c'est une page de "test" vite fait. J'attends que les fonctions principales fonctionnent pour rendre le code propre et joli

**Auteur** · 29/06/2007, 12h55

je regarderai ton code

Une première remarque :

Code javascript :

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

1
2
fenFille = window.open("inserer_img.php","Insertion d'image","menubar=no, status=no, scrollbars=no, menubar=no, width=700, height=700");

IE n'accepte pas d'espace dans le second argument de open()

**Lost In Translation** · 29/06/2007, 13h50

Je viens de faire la modification vu que je souhaite que ma petite application marche sous les principaux (voir tous) navigateurs.

Cela n'a pas résolu le problème d'affichage, mais comme vous l'avez signifié, ce n'est qu'une première remarque et je vous en remercie.

**Lost In Translation** · 30/06/2007, 18h27

Voilà, mon problème est donc résolu...

Il y avait juste un soucis de quote simple.

voici donc les quelques lignes que j'ai eu à modifier :

Code :

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

1
2
3
4
5
6
function transmetInfos(data)
{
  var envoi = "[img="+data+"][/img]";
 window.opener.document.getElementById("textarea").innerHTML = envoi;
 self.close();
}

et

Code :

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

<a href="#" onClick="transmetInfos('nom_image')">

voilà, en remerciant encore Auteur pour les liens et sa contribution ^^

Bonne fin de week end à tous et à bientot (j'aurais surement d'autres problèmes

)

**Auteur** · 30/06/2007, 18h43

ok

. Je pensais regarder ton code ce dimanche

bonne fin de week-end

Deux petites remarques :

page mère :

Code html :

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

1
2
 <textarea cols=60 rows=25 id="textarea" name="textarea"></textarea>

et dans la page fille :

Code jasvacript :

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

1
2
3
4
5
function transmetInfos(data)
{
 window.opener.document.getElementById("textarea").innerHTML = data;
}

personnellement, je n'aime pas donner à un élement un id qui porte le nom d'une balise, ici textarea (pour éviter les confusions).

dans la page mère :

Code javascript :

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

1
2
3
4
5
6
7
8
 
                function changeURLPageFille(url)
                {
                  if (chargeOk=="true")
                  {
                  fenFille.location.href = url;
                  }
                }

et dans la page fille

Code javascript :

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

1
2
3
4
5
 
function changePage(url)
{
 window.opener.changeURLPageFille(url);
}

je ne pense pas que tu aies besoin de ces fonctions dans ce cas là. A l'origine le code était fait pour naviguer dans une pop-up sans perdre l'url de la page mère (mais tu peux les laisser sans que cela pose problème

).

**Lost In Translation** · 01/07/2007, 11h01

Oki merci ^^

Je vais faire les modifications

Merci pour ton coup de main

**Lost In Translation** · 02/07/2007, 11h51

Coucou, je viens d'enlever le résolu.

En fait, il réside un probleme. J'ai fais en sorte que lorsque j'insère une image, la fenetre pop up se ferme.

Ca marche, sauf qu'ensuite, si je la réouvre, et que je veux insérer une deuxieme image... ca ne marche pas.

Je me suis dit qu'il ne fallait donc pas la "fermer". Sauf que dans ce cas là, si j'insère une deuxieme image, elle remplace la 1ere

...

Je suis donc un peu perdu

Un petit coup de main ?

**Auteur** · 02/07/2007, 15h50

bon, j'ai réaxaminé ton code : et j'avoue avoir laissé passer beaucoup de fautes

page mère :

Code javascript :

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

1
2
3
4
5
6
function ouvrirFenFille()
                {
                  if (chargeOk=="false")
                  fenFille = window.open("inserer_img.php","Insertion d'image","menubar=no, status=no, scrollbars=no, menubar=no, width=700, height=700");
                }

enlève l'espace et l'apostrophe. Sous IE cela provoque une erreur.

Code html :

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

1
2
 
<input type="button" id="lien" name="lien" value="Lien" onClick="javascript:bbcode('<a href="http://', '" target="_blank">', '</a>');return(false)" />

la succession des " et ' provoque des "constantes de chaines non terminées" dans les paramètres de la fonction bbcode() : utilise les caractères déchappement \'

Code html :

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

1
2
 
<input type="button" id="lien" name="lien" value="Lien" onClick="javascript:bbcode('<a href=\'http://', '\' target=\'_blank\' >', '</a>');return(false)" />

Code html :

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

1
2
 
<!-- outil d'insertion>

commentaire mal fermé :

Code html :

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

1
2
 
<!-- outil d'insertion -->

page fille

Code javascript :

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

1
2
3
4
5
6
7
function transmetInfos(data) 
{  
var envoi = "[img="+data+"][/img]"; 
window.opener.document.getElementById("textarea").innerHTML = envoi; 
self.close(); 
}

trois choses :

tu envoies l'information à un textarea donc, ce n'est pas innerHTML, mais value :

Code javascript :

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

1
2
 
window.opener.document.getElementById("textarea").value= envoi;

avec cette syntaxe tu écrases le contenu déjà présent dans le textarea, il faut donc concaténer cette chaine au contenu déjà présent dans le textarea :
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
```
1
2
window.opener.document.getElementById("textarea").value += envoi;
```
là c'est purement esthétique :
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
```
var envoi = "[img="+data+"][/img]";
```
ajoute un espace à la fin de la chaine. Comme ça la suite du texte ne sera pas collée à ta balise :
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
```
var envoi = "[img="+data+"][/img] ";
```

**Lost In Translation** · 02/07/2007, 19h01

Fantastique, tout marche.

Cette fois, je pense que le problème est résolu...

Merci beaucoup

Lien entre deux fenetres

JavaScript

Discussions similaires

Partager

Partager