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

**Athos77** · 25/07/2009, 18h14

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 !

**Macmillenium** · 25/07/2009, 18h23

Bonjour,

C'est possible en JavaScript en manipulant le DOM.

**Athos77** · 25/07/2009, 18h42

salut Macmillenium,

c'est quoi le DOM ?...

ok je devrais poser ma question ailleurs dans la section javascript ? (y'avait 1 chance sur 2 !)

**Macmillenium** · 25/07/2009, 19h02

DOM.

Pourrais tu poster ton code JavaScript ?

**Athos77** · 25/07/2009, 19h08

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 :

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

<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

**SpaceFrog** · 25/07/2009, 20h58

une focntion dans le head

Code :

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

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 :

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

<body onload="initlink()">

et au niveau des liens

Code :

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

<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

**Athos77** · 25/07/2009, 22h41

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

**MisterV** · 26/07/2009, 01h14

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 :

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

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 :

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

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

**SpaceFrog** · 26/07/2009, 10h08

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

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

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

**Athos77** · 28/07/2009, 22h50

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 !

**franculo_caoulene** · 29/07/2009, 10h19

Sinon, il y a ça : http://www.developpez.net/forums/d66...t/#post4335395

**Bovino** · 29/07/2009, 13h11

Code html :

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

<base target="_blank" />

dans le head

**SpaceFrog** · 29/07/2009, 13h58

Beef
c'est deprecated et en plus tu ne gères pas la taille d'ouverture

**Athos77** · 29/07/2009, 19h21

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.

**Bovino** · 29/07/2009, 19h24

Le DTD xHTML Strict l'accepte

En revanche, l'attribut target nécessite un DTD transitional.

**SpaceFrog** · 29/07/2009, 19h43

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

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 :

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

**Athos77** · 29/07/2009, 20h32

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

**SpaceFrog** · 30/07/2009, 08h37

si tu as deja des class sur les balises a , rajoute le pop avec un espace

Code :

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

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

et modifie la fonction comme ceci:

Code :

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

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

**Athos77** · 30/07/2009, 12h55

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 :

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

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 :

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

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

**SpaceFrog** · 30/07/2009, 12h58

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

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

JavaScript

Discussions similaires

Partager

Partager