Auto Actualiser le titre du document?

J'ai essayé de nombreuses façons d'afficher automatiquement le titre de la page toutes les 3 secondes afin que le titre puisse afficher le nombre de messages non lus qu'ils ont.

Voici ce que j'ai essayé:

setInterval(function() { document.title = "<?php echo $inboxcc; ?>"; }, 3000); 

et

 $(function() { setInterval(function() { $(this).attr("title", "<?php echo $inboxcc; ?>"); }, 3000); }); 

Mais aucun d'entre eux ne fonctionne.

Cette approche ne fonctionnera pas. Votre instruction PHP s'exécutera une fois sur le côté serveur, alors peu importe ce que vous faites en JavaScript, le titre ne changera pas plus d'une fois.

Vous avez besoin d'une approche basée sur AJAX, qui définira la propriété document.title en cas de succès:

 $.ajax({ url: 'new_page_title.php', data: {name: 'username', password: 'userpass'}, success: function(data) { document.title = data;}, dataType: 'text' }); 

Maintenant: alors que vous pouvez certainement imbriquer ce code dans un appel setInterval , je dirais que le contrôle tous les 3 secondes pourrait être un peu dur sur votre serveur et pas nécessaire. Toutes les 15 à 60 secondes seraient plus douces.

 setInterval(function() { $.ajax({ ... }); }, 30000); // milliseconds 

Vous devez actualiser les données du serveur chaque fois que vous voulez des données nouvelles, car le bloc PHP n'est exécuté qu'une fois par page (sur le serveur). Faites une page PHP comme ceci:

 <?php // data.php // Grab the user from the session and calculate the 'unread messages' value $user['inboxcc'] = the_unread_messages_value; echo json_encode($user); ?> 

Ensuite, tirez le numéro de manière dynamique comme ceci:

 var updater = function() { $.getJSON('data.php',function(jsonuser){ document.title = jsonuser.inboxcc; setTimeout(updater,3000); }); }; setTimeout(updater,3000); 

Notez que j'utilise setTimeout au lieu de setInterval , car vous ne pouvez pas être sûr que toutes les demandes retournent en 3 secondes. L'utilisation de setTimeout est mieux en général.

Pour compléter la réponse de @mblase75 (ce qui est correct), voici une autre explication de l'idée fausse commune dans laquelle vous êtes tombé.


PHP est un préprocesseur côté serveur qui délivre le HTML et le Javascript qui sont envoyés à votre navigateur, alors rien n'a plus à voir avec quoi que ce soit.

Donc, votre PHP:

 <?php $inboxcc = 'Title'; ?> <script type="text/javascript"> setInterval(function() { document.title = "<?php echo $inboxcc; ?>"; }, 3000); </script> 

Rend le résultat:

 <script type="text/javascript"> setInterval(function() { document.title = "Title"; }, 3000); </script> 

C'est ce que votre navigateur voit. Et c'est tout.

Le bloc PHP à l'intérieur de JavaScript ne peut pas mettre à jour ses informations. Vous devez mettre à jour le titre en utilisant AJAX, iframe caché ou autre. À ce stade, votre code change l'élément <title> à la même valeur.

Votre code php ne peut pas être interprété dans le javascript, alors cachez la valeur dans une entrée cachée:

 <input type="hidden" id="inboxcc" value="<?php echo $inboxcc; ?>"> 

Maintenant vous pouvez appeler la valeur en javascript:

 setInterval(function() { document.title = document.getElementById('inboxcc').value; }, 3000);