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

js modifie dynamiquement le titre du navigateur

小云云
小云云original
2017-12-06 16:17:041686parcourir

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 = '需要设置的值';

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的值。

Par 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 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('')

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 = '需要设置的值';

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的值。

Par 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 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('')

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!

Déclaration:
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
Article précédent:Curry de fonction JavaScriptArticle suivant:Curry de fonction JavaScript