Discussion :

[Neity]

Hello,

Description de la page :
J'ai une page avec un formulaire pour envoyer une image, et une liste d'image qui s'affiche sous ce formulaire (les images que j'ai chargé avec le formulaire). A coté de chaque image j'ai un lien "Supprimer" pour retirer une image de cette liste.

Mon procédé
J'utilise une iframe comme cible de ce formulaire.

Dans l'iframe, je traite en PHP l'image reçue. Et j'utilise ensuite Javascript pour afficher l'image nouvellement uploadée sur ma page. Toujours en JS, j'ajoute un lien permettant de supprimer cette image.

Code :

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

1
2
3
4
5
var a = top.document.createElement('a');
a.href = '#void';
a.onclick = function () { alert('ok'); }
alert(a.getAttribute('onclick'));
li.appendChild(a);

Mon problème :
Si j'ajoute une seule image, ça marche bien ; mon image s'affiche et le lien "Supprimer" s'ajoute et fonctionne.
Mais si j'ajoute 2 images à la suite, je perds le onclick du 1er lien crée (le 2e fonctionne).

Si j'ai bien compris, c'est parce que mon code ci-dessus fait que je déclare ma fonction dans mon iframe. Donc quand celle-ci est rechargée à nouveau, je perds ma fonction, et mon onclick.

J'ai essayé de modifier directement l'attribut HTML onclick du lien :

Code :

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

a.setAttribute('onclick', \"javascript:alert('ok');\");

Mais malgré un :

Code :

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

a.getAttribute('onclick');

qui affiche le bon résultat, mon onclick ne fonctionne pas (sous IE).



Quelqu'un a-t-il une idée de comment modifier le onclick, ou comment faire pour qu'il persiste dans ma fenetre principale malgré un rechargement de l'iframe?

[SpaceFrog]

mettre la fonction dans le top ? ou declarer une variable dans le top

Code :

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

1
2
3
4
var top.document.a = top.document.createElement('a');
top.document.a.href = '#void';
top.document.a.onclick = function () { alert('ok'); }
alert(top.document.a.getAttribute('onclick'));

...
// mais le li il se trouve ou ???

Code :

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

li.appendChild(a);

[Neity]

J'ai joint une petite explication visuelle.

J'ai bien essayé de mettre la fonction dans le top en faisant un :

Code :

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

a.onclick = top.function () { alert('ok'); }

Mais visiblement ce n'est pas la bonne synthaxe.
Mais je pense que c'est la piste à suivre.

Mon "var a" ne me sert que de variable temporaire. Je ne le réutilise pas après donc je pense que "top.document.a" ne me sert pas.

C'est vraiment la partie "function () {}" que je perds dans cette histoire.

Je viens de tester ça sans succès (le $i est dans un for () qui va de 0 à 10 pour identifier mes images) :

Code :

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

1
2
top.document.func_annonceFormImageLien".$i." = function () { [...] }
a.onclick = top.document.func_annonceFormImageLien".$i.";

[SpaceFrog]

Mon "var a" ne me sert que de variable temporaire. Je ne le réutilise pas après donc je pense que "top.document.a" ne me sert pas.

ben si tu es dans l'iframe ... a est affectée à window ... donc au frame ... tu fermes le frame = tu perds a ...

[Neity]

Si je comprends bien, on peut penser que je garde le ID, HREF et tout parce que ce sont des attributs HTML mais que mon onclick est une propriété javascript et non un attribut HTML, et que donc ce serait perdu si je perds "a".

Malheureusement mettre top.document.a ne semble pas résoudre mon problème.

Je vais voir si je peux "simplifier" le système dans une page vierge à part et la mettre en piece jointe

[SpaceFrog]

le li dans lequel tu appendes ... ilo est dans l'iframe ou dans le top ?

[SpaceFrog]

éventuellement

Code :

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

var self.top.window['a'] = self.top.document.createElement('a');

[Neity]

Le LI est dans TOP

Voilà le problème en version simplifiée car mon code contient trop de trucs qui n'ont rien à voir :

Une page test.html

Code :

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

1
2
3
4
5
6
7
8
9
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <body>
 
  <a id='lien' href='#void' onClick="alert('ok');">Mon lien qui fait OK</a>
  <iframe src='test2.html' width='400' height='400'>
 
  </body>
</html>

Et l'iframe test2.html :

Code :

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

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <body>
 
  Iframe
 
  <a id='lien' href='#void' onClick="top.document.getElementById('lien').onclick = function () { alert('PLOUF'); }">Mon lien fait désormais PLOUF</a>
 
  </body>
</html>

Fonctionnement :

Je clique sur "Mon lien qui fait OK", ça fait une fenetre d'alerte qui dit "OK".
Le 2e lien change ce OK en PLOUF.
Ensuite : fais clic-droit -> actualiser dans l'iframe, puis re-clic sur le lien : ça ne marche plus (pas de fenetre d'alerte).

[SpaceFrog]

la page 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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
 
<script type="text/javascript">
function foo(){
top.document.getElementById('lien').onclick = function () { alert('PLOUF'); }
document.getElementById('lien').style.color='red';
}
</script>
</head>
<body>
 <a id='lien' href='#void' onClick="foo();return false;">Mon lien fait désormais PLOUF</a>
  <input type='button' onclick="self.location.reload()" value="recharger" />
  </body>
</html>

la page mère:

Code :

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

1
2
3
4
5
6
7
8
9
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <body>
 
  <a id='lien' href='#void' onClick="alert('ok');">Mon lien qui fait OK</a>
  <iframe src='fille.htm' width='400' height='400'>
 
  </body>
</html>

Quand on modifie le click le lien devient rouge, au rechargement il reprend sa couleur initiale.
Quand on clique sur le bouton on ne recharge QUE l'iframe...
Je conserve bien le PLOUF...

[Neity]

Apparement c'est propre à IE qu'on perd le PLOUF. Je l'ai bien sous Firefox, mais pas sous IE (8)

[SpaceFrog]

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
 
<script type="text/javascript">
function foo(){
top.window['func']= function () { alert('PLOUF'); return false; }
top.document.getElementById('lien').onclick =top.func
document.getElementById('lien').style.color='red';
}
</script>
</head>
<body>
 <a id='lien' href='#' onclick="foo();return false;">Mon lien fait désormais PLOUF</a>
  <input type='button' onclick="self.location.reload()" value="recharger" />
  </body>
</html>

Code :

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

1
2
3
4
5
6
7
8
9
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <body>
 
  <a id='lien' href='#' onclick="alert('ok');return false;">Mon lien qui fait OK</a>
  <iframe src='fille.htm' width='400' height='400'>
 
  </body>
</html>

??? marche parfaitement sous ffx ...mais pas sous IE
le lien perd son onclick au rechargement de liframe bien que la fonction soit rattachée au top ???
je creuse

[SpaceFrog]

En fait sous IE la fonction bien que declarée sur la mère depuis la fille disparait avec la fille

Code :

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

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <body>
 
  <a id='lien' href='#' onclick="alert('ok');return false;">Mon lien qui fait OK</a>
  <input type="button" onclick="func()" value="test func"/>
  <iframe src='fille.htm' width='400' height='400'>
 
  </body>
</html>

quand le lien est rouge le click sur le bouton donne le bon resultat !!
si on recharge il ne connait plus la fonction ...

[Neity]

Oui c'est comme si IE créeait la fonction dans l'iframe, et que dans la page mère il mette juste une sorte de variable référence à la fonction.

Je pense que je vais devoir revoir ma façon de gérer mon traitement JS de manière à ne pas déclarer de fonction depuis une iframe.

Merci beaucoup pour ton aide, jusque là je pensais que ça ne marchait pas même sous Firefox (pas pensé à tester :p )

[SpaceFrog]

A priori c'est un peu comme si IE gérait les fonctions dasn des namespace rattachés à l'iframe ...
Encore une victoire de IE

[SpaceFrog]

En fait c'est encore pire que je ne le croyais !!!!

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
 
<script type="text/javascript">
function func(){alert('PLOUF')}
</script>
  </head>
 
  <body>
 
  <a id='lien' href='#' onclick="alert('ok');return false;">Mon lien qui fait OK</a>
  <input type="button" onclick="func()" value="test func"/>
  <iframe src='fille.htm' width='400' height='400'>
 
  </body>
</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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
 
<script type="text/javascript">
function foo(){
//top.window['func']= function () { alert('PLOUF'); return false; }
parent.document.getElementById('lien').onclick =top.func;
document.getElementById('lien').style.color='red';
}
</script>
</head>
<body>
 <a id='lien' href='#' onclick="return foo();">Mon lien fait désormais PLOUF</a>
  <input type='button' onclick="self.location.reload()" value="recharger" />
  </body>
</html>

Là, la fonction est declarée dans la mère...
il n'y a que l'attribution qui se fasse depuis la fille ...
Ben devinez ... l'attribution ne survit pas au reload de la file

[Neity]

Donc en fait quand on clique il va chercher l'evenement onclick dans l'iframe oO

Il n'y a pas de méthode propre à IE pour changer la propriété HTML onClick à la manière de setAttribute?

Peut-être en passant par un innerHTML complet du lien ?
genre :

Code :

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

a.innerHTML = "<a href='#void' onClick='' ...></a>";

Je n'ai jamais utilisé innerHTML donc je ne suis pas sûr de la validité de ce que j'ai écris.

[SpaceFrog]

en remplaçant complètement le lien ça fonctionne

la 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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
 
<script type="text/javascript">
function func(){
var olda=document.getElementById('lien');
var newa=olda.cloneNode(true);
olda.id='oldlien';
newa.id="lien"
newa.onclick=function(){alert('PLOUF');return false;}
document.body.insertBefore(newa,olda);
olda.parentNode.removeChild(olda)
}
</script>
  </head>
 
  <body>
 
  <a id='lien' href='#' onclick="alert('ok');return false;">Mon lien qui fait OK</a>
  <input type="button" onclick="func()" value="test func"/>
  <iframe src='fille.htm' width='400' height='400'>
 
  </body>
</html>

la 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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
 
<script type="text/javascript">
function foo(){
top.func();
document.getElementById('lien').style.color='red';
}
</script>
</head>
<body>
 <a id='lien' href='#' onclick="return foo();">Mon lien fait désormais PLOUF</a>
  <input type='button' onclick="self.location.reload()" value="recharger" />
  </body>
</html>

[SpaceFrog]

heu ...

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
 
<script type="text/javascript">
function func(){
var olda=document.getElementById('lien');
olda.onclick=function(){alert('PLOUF');return false;}
}
</script>
  </head>
 
  <body>
 
  <a id='lien' href='#' onclick="alert('ok');return false;">Mon lien qui fait OK</a>
  <input type="button" onclick="func()" value="test func"/>
  <iframe src='fille.htm' width='400' height='400'>
 
  </body>
</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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
 
<script type="text/javascript">
function foo(){
top.func();
document.getElementById('lien').style.color='red';
}
</script>
</head>
<body>
 <a id='lien' href='#' onclick="return foo();">Mon lien fait désormais PLOUF</a>
  <input type='button' onclick="self.location.reload()" value="recharger" />
  </body>
</html>

ça fonctionne ça !!, il faut juste que la fonction qui modifie le onclik soit dans la mère pour IE, sinon l'attribution ne survit pas à la fille
pour ffx aucun souci

[Neity]

Huhu, elle était belle cette interprétation là, ça montre qu'il y a encore un beau gouffre à rattraper pour IE.

Voilà donc ce que j'ai ajouté dans ma page mère pour que ça marche de manière générique

Code :

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

1
2
3
4
5
function setOnclickValue (cible, script) {
  cible.onclick = function() {
                    eval(script);
                  };
}

Ensuite dans l'iframe :

Code :

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

1
2
3
4
5
6
var a = top.document.createElement('a');
// Le "#void" plutot "#", c'est pour éviter qu'on remonte en haut de page
a.href = '#void';
// Ici la definition du onclick via la fonction de la frame mère
top.setOnclickValue(a, "alert('ok');");
li.appendChild(a);

Et ça marche, c'est génial

Merci !