Faire en sorte que tous liens s'ouvrent de la même manière

Version imprimable

Voir 40 message(s) de cette discussion en une page

25/07/2009, 18h14
Athos77

Faire en sorte que tous liens s'ouvrent de la même manière

Bonjour à tous,

je voudrais que tous les liens de ma page aient les mêmes paramètres (popup), mais sans avoir à recopier le le code "onclick" pour chaque lien.

Y-a-t-il moyen de paramétrer le type d'ouverture des liens dans ma feuille de style, et si oui comment ?

Merci d'avance !
25/07/2009, 18h23
Macmillenium

Bonjour,

C'est possible en JavaScript en manipulant le DOM.
25/07/2009, 18h42
Athos77

salut Macmillenium,

c'est quoi le DOM ?...

ok je devrais poser ma question ailleurs dans la section javascript ? (y'avait 1 chance sur 2 !)
25/07/2009, 19h02
Macmillenium

DOM.

Pourrais tu poster ton code JavaScript ?
25/07/2009, 19h08
Athos77

merci d'avoir déplacé le sujet au bon endroit

voici un ex de lien (que l'on retrouvera 20 fois sur la page) et je voudrais que chaque lien ouvre une popup aux mêmes paramètres :

Code:

<a href="#" onclick="window.open('http://www...','www','toolbar=1,menubar=0,location=0,fullscreen=1,scrollbars=1,resizable=yes,width=600,height=500,left=500,top=30')" title="voir le site de..."><span class="jobtitle">www</span></a>

merci d'avance

une focntion dans le head
Code:

1 2 3 4 5 6 function intilinks(){ tablinks=document.getElementsByTagName('a'); i=0; while(tablinks[i]){ tablinks[i].onclick=function(){window.open(this.href,'www','toolbar=1,menubar=0,location=0,fullscreen=1,scrollbars=1,resizable=yes,width=600,height=500,left=500,top=30')} }
ça dans le body:

Code:

<body onload="initlink()">

et au niveau des liens

Code:

<a href="http://www" title="voir le site de..."><span class="jobtitle">www</span></a>

attention toutefois cela s'appliquera à tous les liens de la page.
Si tu veux que quelques liens ne reagissent pas pareil tu pourras tester par exemple un className dans la boucle sur les balises a

25/07/2009, 22h41
Athos77

aïe... ça ne fonctionne pas..

Salut,

Pour faire ce type de choses, je te conseil largement l'utilisation d'un framework javascript simple du type de jQuery (Prototype, mootools etc... feront probablement aussi l'affaire, mais je suis plus spécialisé jQuery).

Pourquoi utiliser un framework javascript ?
Parce-que ca te simplifie énormement la vie de deux manières :
- Ca absorbe une bonne partie des problèmes d'incompatibilité entre les navigateurs
- Ca te fourni toute une base d'outils facilitant énormément de choses (faisables en javascript pur, mais de manière complexe).

Pour chercher à te convaincre, voila comment réaliser ton histoire de liens en jQuery (On peu faire plus compact, mais ce serai moins clair) :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 // On défini la fonction qui sera exécuté lors du clique sur un lien function ouvreLien() { window.open(this.href, 'www', 'toolbar=1,menubar=0,location=0,fullscreen=1,scrollbars=1,resizable=yes,width=600,height=500,left=500,top=30'); return false; } // Une fois que le document est fini de chargé $(document).ready(function() { // on va rechercher tous les liens dans la page et on leur dit d'exécuter "ouvreLien" lors d'un click $('a').click(ouvreLien); });
Avec uniquement ce script chargé n'importe ou dans ta page ou dans un fichier javascript externe, tous les liens de ta page réagirons comme tu le veux. Plus besoin d'aucun code javascript dans le code HTML.

Et si tu veux appliquer ce comportement uniquement à certains liens, il te suffit d'attribuer une class aux liens en question, et de changer l'avant-dernière ligne du script :
Code:

1 2 $('a.maClass').click(ouvreLien);
Et maintenant le script n'ira chercher que les liens ayant la class "maClass".

Je pense que ça te permettra de réaliser à quel point jQuery peut simplifier la programmation en javascript.

Nico

Oui une lib complète pur un truc qui peut être fait en 3 lignes :ccool:

Désolé j'ai scripté ça vite fais hier soir sans tester, avec un peu de sommeil c'est mieux:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <script> function initlinks(){ tablinks=document.getElementsByTagName('a'); i=0; while(tablinks[i]){ params='toolbar=1,menubar=0,location=0,fullscreen=1,scrollbars=1,resizable=yes,width=600,height=500,left=500,top=30' tablinks[i].onclick=function(){window.open(this.href,'www',params); return false;}; i++;} } </script> </head> <body onload="initlinks()"> <a href="about:blank">dsfdsf</a> <a href="about:blank">dsfdsf</a> </body> </html>
Cependant je ne vois pas l'intéret du height width top et left si tu mets en fuillscreen ???

28/07/2009, 22h50
Athos77

Un grand merci pour vos réponses,
je vais reprendre tous mes liens et tester ça...

je reviens vite pour vous dire si ça fonctionne !
29/07/2009, 10h19
franculo_caoulene

Sinon, il y a ça : http://www.developpez.net/forums/d66...t/#post4335395
29/07/2009, 13h11
Bovino

Code:

<base target="_blank" />

dans le head :?
29/07/2009, 13h58
SpaceFrog

Beef
c'est deprecated et en plus tu ne gères pas la taille d'ouverture
29/07/2009, 19h21
Athos77

Un grand merci ! Cela fonctionne parfaitement. Merci à vous en particulier Spacefrog (et en effet j'ai viré "fullscreen" une erreur d'inattention).
J'ajoute que cela déclenche désormais l'ouverture des popup paramétrées sous IE, ce qui n'était pas le cas...

J'ai maintenant deux soucis, dont le 1er que vous aviez évoqué plus haut :

1/ désormais, même les liens <a href de mon MENU fonctionnent de la manière définie (bien évidemment...)

2/ sous Firefox, la fonction <a mailto présente sur chaque page déclenche l'ouverture d'une fenêtre du navigateur avant d'appeler le client de messagerie...

Comment faire pour résoudre ces deux choses ? Faut-il ajouter des exceptions dans le <head>, à la fonction initlinks ??

Je vous remercie pour votre aide précieuse.
29/07/2009, 19h24
Bovino

:nono:
Le DTD xHTML Strict l'accepte ;)
En revanche, l'attribut target nécessite un DTD transitional.

J'ai donné la réponse au problème dans un post précedent, ...

Citation:

attention toutefois cela s'appliquera à tous les liens de la page.
Si tu veux que quelques liens ne reagissent pas pareil tu pourras tester par exemple un className dans la boucle sur les balises a

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
function initlinks(){
 tablinks=document.getElementsByTagName('a');
params='toolbar=1,menubar=0,location=0,fullscreen=1,scrollbars=1,resizable=yes,width=600,height=500,left=500,top=30'
i=0;
while(tablinks[i]){
          if (tablinks[i].className=='pop'){
                           tablinks[i].onclick=function(){
                                                                  window.open(this.href,'www',params);
          return false;};
           }
            i++;}
}
</script>
</head>
 
<body onload="initlinks()">
<a href="about:blank" class="pop">dsfdsf</a>
<a href="mailto:truc@machinchose.fr" >dsfdsf</a>
</body>
 
</html>

29/07/2009, 20h32
Athos77

merci

en procédant comme ça, avec des class (j'ai déjà des class CSS sur les liens), ça re-fiche le bazar partout et tous les liens ouvrent une popup de la page en cours...
30/07/2009, 08h37
SpaceFrog
si tu as deja des class sur les balises a , rajoute le pop avec un espace

Code:

< a href="..." class="machin pop"

et modifie la fonction comme ceci:
Code:

1 2 3 var reg=/pop/ while(tablinks[i]){ if (reg.test(tablinks[i])){

Bonjour Spacefrog

non seulement la 1ère class ("machin pop" ici) chasse les effets de la 2ème class (du CSS), mais tous les liens s'ouvrent en self.

Voici mon code dans le head :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <script> function initlinks(){ tablinks=document.getElementsByTagName('a'); params='toolbar=1,menubar=0,location=0,scrollbars=1,resizable=yes,width=600,height=500,left=500,top=30' i=0; var reg=/pop/ while(tablinks[i]){ if (reg.test(tablinks[i])){ tablinks[i].onclick=function(){ window.open(this.href,'www',params); return false;}; } i++;} } </script>
- je souhaite que les liens du menu s'ouvrent classiquement (en self), donc je leur applique la variante que tu m'indiques :

Citation:

<li><a href="accueil.htm" class="machin pop" class="menuBleu" title="Aller à">ACCUEIL</a></li>

- pour le tout le reste de la page, les liens s'ouvriront en popup paramétrée (cf paramètres 'a' initlinks), donc je ne leur applique aucune class sinon celle du CSS :

Citation:

<a href="http://www" class="friendlink" title="voir le site de">Site ami</a>

Est-ce que j'ai bien suivi tes instructions ?

30/07/2009, 12h58
SpaceFrog

ajoute juste pop dans la class des liens que tu souhaites voir ouvrir en popup paramètrée ...

et modifies la fonction comme sus montré

sule les liens ayant "pop" dasn le className seront modifiés

Voir 40 message(s) de cette discussion en une page