Aide demandée pour un onload

Version imprimable

16/12/2017, 17h07
souviron34

Aide demandée pour un onload
Bonjour à tous.. :D

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:

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 :

Citation:

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:

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:

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ù.... :calim2:

Des idées ou suggestions ???

Merci d'avance :D

Jean

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:

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>

17/12/2017, 10h17
NoSmoking

Bonjour,
voir réponse faite dans cette discussion.
17/12/2017, 14h56
Watilin
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

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:

1 2 3 document.addEventListener("load", function (event) { … });
Code:

1 2 3 4 // DOMContentLoaded est souvent plus adapté que load document.addEventListener("DOMContentLoaded", function (event) { … });
Voir DOMContentLoaded.
Code:

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:

1 2 3 4 5 6 7 document.addEventListener("beforeunload", function (event) { … // cet évènement est annulable if (/* condition */) { event.preventDefault(); } });
17/12/2017, 16h58
souviron34
Citation:

Envoyé par Watilin

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

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

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:

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

.../...
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 :mrgreen:
17/12/2017, 20h15
NoSmoking

Citation:

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.
17/12/2017, 21h00
Watilin

Citation:

Envoyé par souviron34

PS: d'ailleurs, si tu habitué à coder sans JS

Eh bien en fait non :P 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.