popups : exemple pratique de popup propre et référençable

[bamby]

Saluche à tous

Je viens de lire 50 messages sur les popups et le javascript, plus http://openweb.eu.org/articles/popup/ .

Du coup je me retrouve avec 2 méthodes :

1) celle de George Abitbol :

<a href="nouveautes.htm" onclick="fen = window.open(this.href, 'fen');return false;">clic clic</a>

2) celle de Openweb :

<a href="page.htm" onclick="window.open(this.href); return false;">

Je ne comprends pas la partie en rouge de la méthode 1 :

<a href="nouveautes.htm" onclick="fen =window.open(this.href, 'fen');return false;">clic clic</a>

.

Dans mon cas précis, j' ai ceci :

<a href="javascript:;" onclick="open('nouveautes.htm', '', 'width=535,height=300,left=100,top=170,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no')"><img src="nouveautes_mini.jpg" alt="blabla" width="164" height="37" border="0" /></a>

Comment faire pour utiliser la "méthode 1" avec ce que j' ai ? Je ne capte pas ce qu' est ce "fen" et ce qu' il fait au milieu, entre onclick et window.open

Si vous pouviez me montrer svp...

[Tex]

le fen en question est une variable qui sert a stocker le resultat de la fonction window.open, normalement avec un evenement onclick il n'est pas necessaire, c'est surtout necessaire quand on utilise le javascript directemment dans le href pour courcircuiter l'envoi de resultat dans le navigateur (sans ça il arrive que le js ouvre une nouvelle fenetre avec un "object" enigmatique dedans).

ici il n'est pas necessaire, tout comme le return false dailleur.


ton code devrais ressembler a ça :

Code: Tout sélectionner

<a href="#" onclick="window.open('nouveautes.htm', '', 'width=535,height=300,left=100,top=170,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no')"><img src="nouveautes_mini.jpg" alt="blabla" width="164" height="37" border="0" /></a>

[bamby]

Salut Tex

Ce que tu me proposes, c' est un retour "en arrière" :

le "#" je n' aime pas vraiment, car cela fait "sauter" la page-mère vers le haut. C' est pour ça que j' utilise

<a href="javascript:;"

, pour empêcher ce saut vers le haut qui est comme celui d' une ancre.

Ensuite, je cherche à faire une popup "propre", qui marche même si le javascript est désactivé, et que google est capable d' indexer facilement (à l'heure actuelle, après des mois de présence, ce popup n' est pas indexé du tout).

C' est expliqué ici : http://openweb.eu.org/articles/popup/ (méthode 1) . D' où ce href=lien, que je souhaite mettre à la place de ce href=javascript:; .

Tu peux voir ce qu' ils disent ici aussi : http://www.webrankinfo.com/forums/viewtopic_10352.htm (méthode 2)

J' aimerais bien utiliser une méthode ou l' autre. Je pense que celle de Openweb me satisfera, mais je cherchais à comprendre l' autre, celle avec le "fen" . Tu dis qu' il n' est pas utile ? Peut-être... Mais en tout cas, le return false est quand à lui très utile, il empêche la propagation

Merci de ton aide quand même

[Tex]

ok j'avais pas le contexte et pas tout compris

effectivement dans ce cas précis le return false est indispensable puisqu'il désactive le href qui est en fait ici une alternative au onclick et non une simple requete nulle qui permet juste de placer un lien JS

par contre la variable fen n'est pas necessaire, mais n'est pas non plus impropre...

donc ton code ça devrais donner ça :

Code: Tout sélectionner

<a href="nouveautes.htm" onclick="window.open('nouveautes.htm', '', 'width=535,height=300,left=100,top=170,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no');return false" target=_blank><img src="nouveautes_mini.jpg" alt="blabla" width="164" height="37" border="0" /></a>

j'ai juste rajouté un taget=_blank pour "simuler" un popup car si le JS est désactivé , sans ça, tu aurra juste un lien qui s' ouvrira dans le meme fenetre de ton navigateur.

[bamby]

Super ! Merci beaucoup

Bonne idée le _blank

Je vais mettre ça en pratique (j'ai du boulot, pfff... ).

[Fluidex]

par contre la variable fen n'est pas necessaire

Pour ma part je pense que c'est bien plus propre de l'utiliser. Il se peut que window.open plante (en réalité c'est surtout vrai si les paramètres de la fonctions sont dynamiques) et dans ce cas la variable fen permet d'avoir un controle la dessus. Il suffit de remplacer :

Code: Tout sélectionner

return false

par

Code: Tout sélectionner

if (fen) { fen.focus(); return false; } else  return true

fen.focus() c'est juste pour avoir le focus sur la popup.

Il est également plus propre de donner un nom à la fenêtre (pour éventuellement pouvoir la désigner ultérieurement) et de laisser this.href pour éviter de nommer 2 fois le lien:

Code: Tout sélectionner

window.open(this.href, 'fen',...)

[bamby]

Intéressant tout ça

Est-ce que c' est correct selon ta méthode ? :

Code: Tout sélectionner

<a href="nouveautes.htm" onclick="window.open(this.href, 'fen', 'nom de la popup', 'width=535,height=300,left=100,top=170,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no');if (fen) { fen.focus(); return false; } else  return true" target=_blank><img src="nouveautes_mini.jpg" alt="blabla" width="164" height="37" border="0" /></a>

Bamby à la recherche de la fenêtre volante parfaite Yeaaah !

[Fluidex]

Voilà ce que je voulais dire :

Code: Tout sélectionner

<a href="nouveautes.htm" onclick="fen=window.open(this.href,'fen', 'width=535,height=300,left=100,top=170,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no');if (fen) {fen.focus();return false;} else return true" target="_blank"><img src="nouveautes_mini.jpg" alt="blabla" width="164" height="37" border="0" /></a>

[bamby]

Ok

Et le nom de la popup, tu ne l' as pas mis non ?

Ce serait pas comme ça (avec le nom) :

Code: Tout sélectionner

<a href="nouveautes.htm" onclick="fen=window.open(this.href,'fen', "NOM DE LA POPUP", 'width=535,height=300,left=100,top=170,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no');if (fen) {fen.focus();return false;} else return true" target="_blank"><img src="nouveautes_mini.jpg" alt="blabla" width="164" height="37" border="0" /></a>

[Fluidex]

Excuse moi bamby, c'est vrai que mes explications ne sont pas limpides. En fait il faut prendre le code que je t'ai donné et non pas celui que tu proposes.
Dans

Code: Tout sélectionner

fen=window.open(this.href,'fen',...)

le premier fen est l'objet qui a été créé par window.open. Cet objet a différentes propriétés dont son nom qui est donné par le second fen : 'fen'. En l'occurrence l'objet fen a une propriété name qui vaut fen.
Du coup ton "NOM DE LA POPUP" est de trop.

Dans le code que je t'ai fourni on utilise l'objet fen (en testant s'il existe bien).

Et le nom de l'objet dans tout ça ? Il peut te servir à distinguer plusieurs fenetres entre elles ou au contraire à mettre de nouveaux contenus toujours dans la même fenêtre sans en ouvrir de nouvelles.

[bamby]

Merci de tes explications détaillées, en plus d' être utile, c' est intéressant au niveau théorique (pour un débutant comme moi du moins ).

Je pourrais donc appeler le 2° fen "scoubidou" si je voulais, au lieu que ce soit "fen" ?

Comme ceci :

Code: Tout sélectionner

<a href="nouveautes.htm" onclick="fen=window.open(this.href,'scoubidou', 'width=535,height=300,left=100,top=170,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no');if (fen) {fen.focus();return false;} else return true" target="_blank"><img src="nouveautes_mini.jpg" alt="blabla" width="164" height="37" border="0" /></a>

Et ainsi, s' il y avait un popup dans la popup scoubidou, et qu' elle s' appelait elle aussi "scoubidou" , elle s' ouvrirait dans la même fenêtre, n' est-ce pas ?

Je crois que j' ai compris ...

[Fluidex]

Oui ton code est correcte.
Effectivement si tu as une popup ouverte sur le poste de l'internaute et que cette popup porte le nom scoubidou, alors tout nouveau window.open(this.href,'scoubidou',...) va envoyer les données dans la popup déjà ouverte.

[bamby]

Merci beaucoup de ton aide Fluidex : j' ai maintenant la méthode pour faire une popup propre et référençable !

@pluche !