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 :

Aide demandée pour un onload


Sujet :

JavaScript

  1. #1
    Expert éminent sénior

    Profil pro
    Inscrit en
    Janvier 2007
    Messages
    10 603
    Détails du profil
    Informations personnelles :
    Âge : 66
    Localisation : France

    Informations forums :
    Inscription : Janvier 2007
    Messages : 10 603
    Points : 17 913
    Points
    17 913
    Billets dans le blog
    2
    Par défaut Aide demandée pour un onload
    Bonjour à tous..

    En vue de la validation finale de mon site (optimisé aussi pour les SEO), et pour lequel je fournis une version sans javascript, il me reste quelques petits pièges à résoudre...

    J'ai posté ailleurs (dans le sous-forum "validation", ici) le total de mon bilan, mais je vais vous poser ici un des points soulevés :

    Ce que je veux faire : lors du chargement de la page, si javascript est activé, je veux changer la classe du body - temporairement jusqu'à la fin du chargement -, et lui ajouter 2 event handlers : onload et onunload.

    Ce que j'ai fait :

    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <script type=text/javascript>
    document.write('</head><body id=mybod class=bod1 onload="StartInit()" onunload="CloseSess()">')
    </script>
    <noscript></head><body class=bod2 id=mybod></noscript>

    Losque je passe cette page à un validateur html, si je met le </head> à l'extérieur, il me signale un script entre un head et un body... Donc j'inclus le </head> dans le script.

    Mais alors le validateur me donne :

    Error: Stray end tag head.
    From line 4, column 144; to line 4, column 150
    <noscript></head><body

    Error: Bad start tag in body in head.
    From line 4, column 151; to line 4, column 176
    pt></head><body class=bod2 id=mybod></nosc

    Error: Stray end tag noscript.
    From line 4, column 177; to line 4, column 187
    id=mybod></noscript>↩<div
    Dans l'autre post, on m'a suggeré :

    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    var oBody = document.querySelector('BODY');
    oBody.id = "js-actif";
    oBody.className = "js-class";

    Du coup, si je fais ça, et que j'y ajoute le onload et onunload, j'ai fais ceci :

    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    </head><body class=bod2 id=mybod>
    <script type=text/javascript>var b=document.querySelector('BODY');b.onload="StartInit()";b.onunload="CloseSess()";b.className="bod1";</script>

    MAIS Il change bien la classe mais n'exécute pas - ou ne termine pas - le onload.... Il reste suspendu je ne sais pas où....

    Des idées ou suggestions ???

    Merci d'avance

    Jean
    "Un homme sage ne croit que la moitié de ce qu’il lit. Plus sage encore, il sait laquelle".

    Consultant indépendant.
    Architecture systèmes complexes. Programmation grosses applications critiques. Ergonomie.
    C, Fortran, XWindow/Motif, Java

    Je ne réponds pas aux MP techniques

  2. #2
    Membre chevronné

    Homme Profil pro
    Ingénieur Hospitalier
    Inscrit en
    Juillet 2004
    Messages
    993
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur Hospitalier
    Secteur : Santé

    Informations forums :
    Inscription : Juillet 2004
    Messages : 993
    Points : 1 768
    Points
    1 768
    Billets dans le blog
    1
    Par défaut
    Salut il faut créer les functions événementielles qui onload et unload ou beforeunload le body directement dans ta balise script sans devoir faire du inline qui n'a pas de sense surtout pour un body onload sachant que tu veux placer un onload en inline (dans une balise html) durant un onload ce qui ne provoquera pas l'appel que tu souhaite durant ce onload puisque celui a déjà été appelé.

    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
     
     
    <script type=text/javascript>
    document.body.onload = function(){
    //pendant le load
    StartInit();
    };
     
    document.body.unload = function(){
    //durant le unload
    CloseSess()
    this.className = "body1";
    };
     
    document.body.beforeunload = function(){
    //avant le unload ce que tu veux ...
    };
    </script>

  3. #3
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 120
    Points
    44 120
    Par défaut
    Bonjour,
    voir réponse faite dans cette discussion.

  4. #4
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    document.write te mènera dans une impasse. Il existe déjà de nombreuses ressources expliquant pourquoi document.write est une mauvaise pratique. En plus de cela, les développeurs de Google Chrome commencent à envisager (août 2016) de désactiver cette fonction en cas de mauvaise connectivité.

    En tant qu’utilisateur de l’extension NoScript, je te remercie chaleureusement de penser à moi Tu fais partie de cette minorité de développeuses et développeurs qui font les choses correctement sur ce plan. (Je sais qu’on n’a pas toujours le choix, malheureusement.) Cependant, l’extension est aussi capable de bloquer les balises <noscript>, qui sont parfois utilisées à mauvais escient — par exemple, pour des publicités intrusives. D’autre part, je ne sais pas du tout comment se comportent les navigateurs accessibles (comme Lynx) vis-à-vis de cette balise.

    Ainsi, il existe au moins un cas de figure où ni le JavaScript, ni les balises <noscript> ne fonctionnent, et ta solution tombe à l’eau. Le mieux est de faire comme NoSmoking le conseille dans l’autre topic. Une autre pratique qui ressemble beaucoup à sa solution, c’est d’avoir au départ une classe sur le body (par exemple no-js), et de retirer cette classe via JavaScript. Le reste est une affaire de CSS.

    Citation Envoyé par headmax Voir le message
    Salut il faut créer les functions événementielles qui onload et unload ou beforeunload
    Les évènements unload et beforeunload ont une différence conceptuelle : l’un est annulable et l’autre pas. On peut annuler beforeunload avec preventDefault, et ainsi empêcher la fermeture de la page. Pour limiter les abus, les navigateurs affichent un dialogue dans le style « un script de la page tente d’empêcher la fermeture ».

    Le choix d’unload ou beforeunload dépend donc principalement de l’intention : si on veut donner une chance à l’utilisateur de revenir sur sa décision de fermer la page, on utilise beforeunload. En revanche, si on veut faire une opération de nettoyage ou de sauvegarde, on utilise unload.

    Comme indiqué dans la doc, au moment d’unload, le processus de déchargement de la page a déjà commencé et il est trop tard pour faire marche arrière. À ce moment, la page est dans un état particulier : le DOM et le contexte JavaScript existent toujours, mais le contenu n’est plus visible et les API d’interaction (alert, etc.) sont désactivées. À ce moment, il est possible de faire un dernier dialogue avec le serveur en utilisant une requête synchrone. C’est le seul cas légitime de requête synchrone à ma connaissance. Voir cet excellent article de Zach Leatherman : Don’t Let the Door Hit You Onunload.

    Je me permets de corriger le code de headmax qui, en l’état, ne fonctionne pas. Les évènements liés au chargement ou déchargement de la page s’attachent à document ou à window. De plus, il est préférable d’utiliser addEventListener.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    document.addEventListener("load", function (event) {});
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    // DOMContentLoaded est souvent plus adapté que load
    document.addEventListener("DOMContentLoaded", function (event) {});
    Voir DOMContentLoaded.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    document.addEventListener("unload", function (event) {// ici on peut faire une requête synchrone
      var req = new XMLHttpRequest();
      req.open("GET", "url.php", false);
      …
    });
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    document.addEventListener("beforeunload", function (event) {// cet évènement est annulable
      if (/* condition */) {
        event.preventDefault();
      }
    });
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  5. #5
    Expert éminent sénior

    Profil pro
    Inscrit en
    Janvier 2007
    Messages
    10 603
    Détails du profil
    Informations personnelles :
    Âge : 66
    Localisation : France

    Informations forums :
    Inscription : Janvier 2007
    Messages : 10 603
    Points : 17 913
    Points
    17 913
    Billets dans le blog
    2
    Par défaut
    Citation Envoyé par Watilin Voir le message
    En tant qu’utilisateur de l’extension NoScript, je te remercie chaleureusement de penser à moi Tu fais partie de cette minorité de développeuses et développeurs qui font les choses correctement sur ce plan.
    De rien

    Il se trouve que j'ai du temps, et que j'aime faire les choses correctement Vu que c'était pas mon domaine, je me suis renseigné sur "les bonnes pratiques", et ça comprenait ça...



    Citation Envoyé par Watilin Voir le message
    Cependant, l’extension est aussi capable de bloquer les balises <noscript>, qui sont parfois utilisées à mauvais escient — par exemple, pour des publicités intrusives. D’autre part, je ne sais pas du tout comment se comportent les navigateurs accessibles (comme Lynx) vis-à-vis de cette balise.
    Moi non plus, mais je fais le max de ce que je peux faire comme ça...

    En fait, si ça détecte <noscript> , ça affiche un popup qui dit que puisque javascript est pas activé, l'expérience du site ne sera pas aussi complète que avec, mais que toute l'information est là, et ça bascule sur un autre fichier sans script aucun, avec lui juste une balise <script> qui détecte si on rebranche javascript et à ce compte-là re-bascule sur la version avec...


    Mais si on ne tient pas compte des balises, alors c'est qu'on s'attend à ce que le site ou la page soit exclusivement sans script, non ? C'est peut-être un peu sur-dimensionné comme réponse, non ??

    En tous cas moi je m'en tiens à ce que j'ai décrit plus haut.. Tu pourras aller sur le site indiqué dans l'autre thread pour voir (en anglais il y a encore une légère différence avec la version française) et me dire ce que tu en penses, de ton point de vue avec tes propres settings. Moi j'ai testé avec Firefox en désactivant JS...



    PS: d'ailleurs, si tu habitué à coder sans JS, tu pourras peut-être me donner un tuyau : j'ai tenté de faire avec css des :target sur 2 niveaux de menus, et ça ne marche pas, en tous cas pas de la manière dont je l'avais fait... Exemple :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    menu1
       item1
       item2
    --
    panneau de item2 
       menu2
         item1
         item2
     
    ..
    Si dans le CSS je mets une règle sur les items du menu1, et que j'en mets une autre sur les items du menu2, via des :target, ça marche pas au niveau 2...




    Citation Envoyé par Watilin Voir le message
    .../...
    Une autre pratique qui ressemble beaucoup à sa solution, c’est d’avoir au départ une classe sur le body (par exemple no-js), et de retirer cette classe via JavaScript.
    Pour la solution j'ai mis dans l'autre discussion ma solution.... Ca revient un peu à ce que tu disais ci-dessus...


    Je ferme cette discussion comme résolue
    "Un homme sage ne croit que la moitié de ce qu’il lit. Plus sage encore, il sait laquelle".

    Consultant indépendant.
    Architecture systèmes complexes. Programmation grosses applications critiques. Ergonomie.
    C, Fortran, XWindow/Motif, Java

    Je ne réponds pas aux MP techniques

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 120
    Points
    44 120
    Par défaut
    PS: d'ailleurs, si tu habitué à coder sans JS, tu pourras peut-être me donner un tuyau : j'ai tenté de faire avec css des :target sur 2 niveaux de menus, et ça ne marche pas, en tous cas pas de la manière dont je l'avais fait... Exemple :
    Ouvre une nouvelle discussion, si tu ne trouves rien, sur le forum CSS.

  7. #7
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    Citation Envoyé par souviron34 Voir le message
    PS: d'ailleurs, si tu habitué à coder sans JS
    Eh bien en fait non Je suis habitué à naviguer sans JS, mais pour ce qui est de coder, c’est ce langage que j’utilise le plus. En fait tu peux scripter une page avec l’extension Greasemonkey, même quand JS est désactivé. Ça permet vraiment de façonner le Web à ta convenance pour les sites que tu utilises souvent.

    Et je suis loin d’être un expert en CSS… Je n’ai pas de solution à ton problème de menu. Cela dit je m’interroge sur l’utilité de mettre le #target sur un item de menu.
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [AppleScript] Aide demandée pour iTunes et AppleScript
    Par cyberjabs dans le forum AppleScript
    Réponses: 6
    Dernier message: 08/06/2010, 09h23
  2. Super aide demandée pour un déploiement
    Par du Chaxel dans le forum Installation, Déploiement et Sécurité
    Réponses: 4
    Dernier message: 14/09/2007, 08h52
  3. Aide demandée pour sélection de données dans une liste
    Par pyprog dans le forum Général Python
    Réponses: 2
    Dernier message: 15/08/2006, 22h11

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