Le blog de Philippe Poisse

Le code HTML

À ce niveau-là ça va être rapide. Dans l’entête de la page il faut mettre une balise « title » avec votre titre.
Cette balise est importante pour votre référencement, les moteurs de recherche s’en servent pour l’affichage des résultats.

Le code est donc :

<title>Le titre de ma page.</title>

Le JavaScript

var titre;
titre = document.title;
window.onfocus = function() {
    document.title = titre;
};
window.onblur = function()  {
    document.title = "N’hésitez pas à revenir !";
};

Là aussi je fais dans le rustique. Il existe sûrement plein de méthodes avec divers framework pour obtenir le même résultat. Mais moins j’en fais mieux je me porte.

Explication du code

Généralement les CMS créent le titre de la page automatiquement, donc il n’est pas nécessaire de sans soucier. Il suffit juste de le récupérer et de le passer dans une variable pour pouvoir le manipuler.
Dans un premier temps on crée donc une variable « titre ».

var titre ; 

Cette écriture permet de déclarer une globale, ainsi chacune des fonctions pourra l’utiliser.
Puis on la remplit avec le contenu de la balise « title ».

titre = document.title;

Le but de la manœuvre est de changer ce qui s’affiche dans l’onglet lorsque l’on quitte la passe. Cet événement correspond à « window.onblur ».
La fonction est toute simple.

 « function()  {
         document.title = "N’hésitez pas à revenir !";
     }; »

Si on en reste là, lorsque l’internaute revient dans la page le titre d’origine ne s’affiche plus. Une deuxième fonction est donc nécessaire. Elle est déclenchée par l’événement « window.onfocus ».

function() {
    document.title = titre;
 };

Dans le cas présent la fonction utilise la variable globale « titre » de manière à afficher le titre d’origine. Évidemment rien ne vous empêche d’afficher autre chose.

À part faire le cacou ce tutoriel n’a pas trop d’utilité dans le monde réel. Mais bon, c’est l’été, on a le droit de se détendre un peu.