Ajouter une classe à un corps sur la page d’accueil

J’essaie d’append une classe à la balise body juste sur la page d’accueil et c’est tout. Cependant, cela ne fonctionne pas. Qu’est-ce que je fais tordre?

 $(document).ready(function() { if(window.location.href===window.location.hostname) { $("body").addClass("home"); } });  

window.location.href ne sera jamais identique à window.location.hostname puisque le premier contiendra une partie de protocole (par exemple: http: //), contrairement à ce dernier.

Je ne pense pas

 if(window.location.href===window.location.hostname) { } 

sera toujours vrai. hostname sera quelque chose comme stackoverflow.com où href inclura le protocole, les ports et autres choses qui peuvent être en dehors de l’URL complète. Vous voulez vérifier si

 if(window.location.href.indexOf("home.html") != -1) { } 

Ou quelque chose de ce genre. Mais, comme indiqué dans les commentaires, il semble beaucoup plus simple d’append simplement à ce fichier html ou de le faire sur le serveur si vous générez le code HTML.

window.location.href contient des informations de protocole et ne sera jamais égal à window.location.hostname

Selon W3

  • window.location.href renvoie le href (URL) de la page en cours
  • window.location.hostname renvoie le nom de domaine de l’hôte Web
  • window.location.pathname renvoie le chemin et le nom de fichier de la page en cours

Vous devriez plutôt vérifier le pathname d’ pathname pour l’emplacement de la page d’accueil:

 var path = window.location.pathname; if (path == '/' || path == '/home.html') { $("body").addClass("home"); } 

C’est possible sans jquery très facile.

 window.addEventListener("load", MyFunction); function MyFunction(){ if(window.location.origin == window.location.href) { var body = document.getElementsByTagName('body'); body[0].className = "myclass"; } } 

ou

 window.addEventListener("load", MyFunction); function MyFunction(){ if(window.location.origin == window.location.href) { document.getElementsByTagName('body')[0].className = "myclass"; } } 

body[0] car la valeur body[0] par document.getElementsByTagName est un tableau.

Avec les commentaires, ça m’a fait réfléchir. Je l’ai essayé et ça marche.

  

J’ai oublié de mentionner dans la question que c’est sur un site Web alimenté par PHP. J’ai répondu à ma propre question pour aider les autres qui pourraient un jour avoir exactement la même question.