IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

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


Sujet :

JavaScript

  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Janvier 2008
    Messages
    35
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2008
    Messages : 35
    Par défaut 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 !

  2. #2
    Rédacteur
    Avatar de Macmillenium
    Homme Profil pro
    Développeur front-end
    Inscrit en
    Mars 2008
    Messages
    2 333
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur front-end
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 2 333
    Par défaut
    Bonjour,

    C'est possible en JavaScript en manipulant le DOM.

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Janvier 2008
    Messages
    35
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2008
    Messages : 35
    Par défaut
    salut Macmillenium,

    c'est quoi le DOM ?...

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

  4. #4
    Rédacteur
    Avatar de Macmillenium
    Homme Profil pro
    Développeur front-end
    Inscrit en
    Mars 2008
    Messages
    2 333
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur front-end
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 2 333
    Par défaut
    DOM.

    Pourrais tu poster ton code JavaScript ?

  5. #5
    Membre averti
    Profil pro
    Inscrit en
    Janvier 2008
    Messages
    35
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2008
    Messages : 35
    Par défaut
    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

  6. #6
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    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
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  7. #7
    Membre averti
    Profil pro
    Inscrit en
    Janvier 2008
    Messages
    35
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2008
    Messages : 35
    Par défaut
    aïe... ça ne fonctionne pas..

  8. #8
    Invité de passage
    Profil pro
    Inscrit en
    Juillet 2009
    Messages
    1
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2009
    Messages : 1
    Par défaut
    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

  9. #9
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    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 ???
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  10. #10
    Membre averti
    Profil pro
    Inscrit en
    Janvier 2008
    Messages
    35
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2008
    Messages : 35
    Par défaut
    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 !

  11. #11
    Membre Expert Avatar de franculo_caoulene
    Profil pro
    Inscrit en
    Octobre 2003
    Messages
    2 880
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2003
    Messages : 2 880

  12. #12
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <base target="_blank" />
    dans le head
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  13. #13
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    Beef
    c'est deprecated et en plus tu ne gères pas la taille d'ouverture
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  14. #14
    Membre averti
    Profil pro
    Inscrit en
    Janvier 2008
    Messages
    35
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2008
    Messages : 35
    Par défaut
    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.

  15. #15
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut

    Le DTD xHTML Strict l'accepte
    En revanche, l'attribut target nécessite un DTD transitional.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  16. #16
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    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>
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  17. #17
    Membre averti
    Profil pro
    Inscrit en
    Janvier 2008
    Messages
    35
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2008
    Messages : 35
    Par défaut
    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...

  18. #18
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    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])){
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  19. #19
    Membre averti
    Profil pro
    Inscrit en
    Janvier 2008
    Messages
    35
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2008
    Messages : 35
    Par défaut
    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 :
    <a href="http://www" class="friendlink" title="voir le site de">Site ami</a>
    Est-ce que j'ai bien suivi tes instructions ?

  20. #20
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    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
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

+ Répondre à la discussion
Cette discussion est résolue.
Page 1 sur 2 12 DernièreDernière

Discussions similaires

  1. Réponses: 1
    Dernier message: 10/10/2008, 16h23
  2. [Débutant] Faire en sorte que le nom commence par majuscule
    Par Monkey_D.Luffy dans le forum MS SQL Server
    Réponses: 11
    Dernier message: 29/05/2008, 16h51
  3. Comment faire en sorte que le prog se fasse répéter
    Par LeonHONORE dans le forum Pascal
    Réponses: 3
    Dernier message: 20/04/2008, 21h41
  4. Réponses: 3
    Dernier message: 17/05/2007, 19h30
  5. Réponses: 4
    Dernier message: 02/09/2006, 19h41

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo