Comment modifier le titre du navigateur en utilisant javascript

Laissez-moi vous expliquer une méthode et une technique d'utilisation de JavaScript pour modifier le titre du navigateur. Les amis qui en ont besoin peuvent tester le code.

title est un élément de nœud spécial en HTML car il peut utiliser document.getElementsByTagName("title")[0] pour obtenir la balise de titre de la page Web, mais il ne peut pas utiliser document.getElementsByTagName("title). ") [0].innerHtml est utilisé pour modifier sa valeur. Après les tests, il existe deux façons de modifier le js natif, et cela peut également être facilement défini dans jQuery. Les amis qui ne sont pas sûrs peuvent le découvrir.

Méthode innerText

Grâce à console.log(document.getElementsByTagName("title")[0]), on constate que l'étiquette b2386ffb911b14667cb8f0f91ea547a7 nœuds dans l'étiquette, donc je suppose que seul TextNode peut être reconnu, donc la définition de la valeur du titre à l'aide de la méthode innerText a réussi.

document.getElementsByTagName("title")[0].innerText = '需要设置的值';

Méthode document.title

Après le test, la valeur du titre peut également être définie via document.title.

console.log(document.title);      # 可以获取title的值。
document.title = '需要设置的值';    # 设置title的值。

Exemple

window.onfocus = function () {
 document.title = '恢复正常了...';
};
window.onblur = function () {
 document.title = '快回来~页面崩溃了';
};

Nous modifions la valeur du titre lorsque le navigateur gagne et perd le focus. Vous pouvez constater que lorsque vous changez d'onglet du navigateur, le titre change.

Méthode jQuery

Bien sûr, si votre projet repose sur jQuery, vous pouvez utiliser la méthode jq pour le définir

$('title').html('')

$('title').text('')

Les deux méthodes peuvent être implémentées en jq

Résumé

En js natif, on peut modifier dynamiquement le titre de la page web via innerText et document.title.

En jq, on peut utiliser $('title' ).html(' ') ou $('title').text('') à modifier.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment juger si jQuery est chargé

Comment utiliser le composant de capture d'écran React Native (tutoriel détaillé)

Comment utiliser state et setState dans React (tutoriel détaillé)

Comment ajouter un composant de code de vérification mobile dans Vue

Comment contrôler le commutateur global console.log dans Vue

Comment désactiver le défilement de la page inférieure de la fenêtre contextuelle

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!