onclick declaré depuis une iframe disparait si on recharge l'iframe

Version imprimable

29/04/2010, 14h08
Neity

onclick declaré depuis une iframe disparait si on recharge l'iframe
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:

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:

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

Mais malgré un :

Code:

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?

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

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:

li.appendChild(a);

29/04/2010, 14h42
Neity

1 pièce(s) jointe(s)
J'ai joint une petite explication visuelle.

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

Code:

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

Mais visiblement ce n'est pas la bonne synthaxe. :oops:
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:

1 2 top.document.func_annonceFormImageLien".$i." = function () { [...] } a.onclick = top.document.func_annonceFormImageLien".$i.";
29/04/2010, 14h49
SpaceFrog

Citation:

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 ...
29/04/2010, 14h55
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
29/04/2010, 14h57
SpaceFrog

le li dans lequel tu appendes ... ilo est dans l'iframe ou dans le top ?
29/04/2010, 14h58
SpaceFrog

éventuellement

Code:

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

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:

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:

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).

la page fille:

Code:

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:

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

29/04/2010, 15h25
Neity

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

Code:

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:

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 :evil:
le lien perd son onclick au rechargement de liframe bien que la fonction soit rattachée au top ???
je creuse

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

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

29/04/2010, 16h04
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 ) :)
29/04/2010, 16h10
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 :roll:

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

Code:

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:

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

29/04/2010, 16h46
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:

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. :P

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

la mère :

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
<!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:

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>

heu ... :oops::oops::oops:

Code:

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:

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 :cfou::fou::scarymov::marteau:
pour ffx aucun souci

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:

1 2 3 4 5 function setOnclickValue (cible, script) { cible.onclick = function() { eval(script); }; }
Ensuite dans l'iframe :
Code:

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 :ccool:

Merci ! :cry: