Maison > interface Web > js tutoriel > js modifie dynamiquement le titre du navigateur

js modifie dynamiquement le titre du navigateur

小云云
Libérer: 2017-12-06 16:17:04
original
1738 Les gens l'ont consulté

title est un élément de nœud spécial dans html car il peut utiliser document.getElementsByTagName("title")[0] pour obtenir la balise title de la page Web, mais il ne peut pas utiliser document.getElementsByTagName("title")[0].innerHtml 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]), j'ai découvert que l'étiquette <title> peut être imprimée. Il n'y a que des nœuds de texte dans l'étiquette, donc je suppose qu'elle ne peut reconnaître que TextNode. , utilisez donc la méthode innerText pour le définir. La valeur du titre a bien été réussie.

document.getElementsByTagName("title")[0].innerText = '需要设置的值';
Copier après la connexion
Copier après la connexion

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的值。
Copier après la connexion
Copier après la connexion

Par exemple :

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

Nous modifions la valeur du titre lorsque le navigateur gagne et perd le focus. Vous pouvez constater que changer d'onglet du navigateur à ce moment-là, title a changé.

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('')
Copier après la connexion
Copier après la connexion

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


Résumé

En js natif, on peut modifier dynamiquement le innerText de la page web de deux manières : document.title et title Dans
. jq, nous pouvons utiliser $('title').html('') Ou $('title').text('') apporter des modifications.


title est un élément de nœud spécial dans html car il peut utiliser document.getElementsByTagName("title")[0] pour obtenir la balise title de la page Web, mais sa valeur ne peut pas être modifiée en utilisant document.getElementsByTagName("title")[0].innerHtml. 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]), j'ai découvert que l'étiquette <title> peut être imprimée. Il n'y a que des nœuds de texte dans l'étiquette, donc je suppose qu'elle ne peut reconnaître que TextNode. , utilisez donc la méthode innerText pour le définir. La valeur du titre a bien été réussie.

document.getElementsByTagName("title")[0].innerText = '需要设置的值';
Copier après la connexion
Copier après la connexion

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的值。
Copier après la connexion
Copier après la connexion

Par exemple :

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

Nous modifions la valeur du titre lorsque le navigateur gagne et perd le focus. Vous pouvez constater que changer d'onglet du navigateur à ce moment-là, title a changé.

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('')
Copier après la connexion
Copier après la connexion

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

Le contenu ci-dessus est un tutoriel sur la façon de modifier dynamiquement le titre du navigateur avec js. J'espère que cela pourra aider tout le monde.

Recommandations associées :

JS pour le développement php pour modifier le style CSS de la page

Introduction à la modification js des attributs du prototype_compétences javascript

Comment utiliser js pour modifier les compétences de registre_javascript du client

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal