Changer le titre de l'onglet

Fermé
Caydo Messages postés 11 Date d'inscription samedi 21 décembre 2019 Statut Membre Dernière intervention 22 février 2020 - 24 déc. 2019 à 11:46
 Rotpe - 26 déc. 2019 à 08:27
Bonjour,
J'ai un problème, je veux changer le titre de l'onglet lorsque je clique sur un lien, j'ai donc essayé avec "document.title" mais cela ne fonctionne pas car j'utilise des frames donc ça modifie le titre de la page sur laquelle je suis et non la page index où sont organisé les frames.
Est-ce que quelqu'un peut m'aider svp.
Si des choses n'ont pas été compris hésiter pas à me poser des questions pour avoir plus de renseignement.
Merci d'avance

Caydo


Configuration: Windows / Chrome 79.0.3945.88

3 réponses

jordane45 Messages postés 38137 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
24 déc. 2019 à 12:00
Bonjour,

Sans voir le code html correspondant à ta question ... ni le code JS que tu essaies d'utiliser... impossible de te répondre !

NB: Pour poster ton code sur le forum, merci d'utiliser les balises de code (en y indiquant le langage afin d'avoir la coloration syntaxique et l'indentation)
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
0
Caydo Messages postés 11 Date d'inscription samedi 21 décembre 2019 Statut Membre Dernière intervention 22 février 2020 1
24 déc. 2019 à 12:22
Voici mon code html :
<!doctype html> 
<html lang = "fr">
	<head>
		<meta charset = "utf-8">
		<title>Menu</title>
		<link rel = "stylesheet" href = "CSS_Menu.css">
		<script src = "JavaScript.js"></script>
		<link href="https://fonts.googleapis.com/css?family=Orbitron:700&display=swap" rel="stylesheet">
	</head>
	
	<body background="Background_Menu.jpg">
	<div class="Titre_Menu">
		<div class="Bloc_Menu">
			<div class="Logo">
				<div class="rotate"> 
					<a href="Accueil.html" target=bas><img class="Logo_Google" src="Logo_Google2.png"></a>
				</div>
			</div>

			<div class="Page1"> <a href="Fondateur.html" target=bas onclick="A()"> Fondateur </a>
			</div>
				
			<div class="Page2"> <a href="Google.html" target=bas> Google </a>
			</div>
			
			<div class="Page3"> <a href="Google_X.html" target=bas> Google X </a>
			</div>
			
			<div class="Page4"> <a href="Android.html" target=bas> Android </a>
			</div>
		
		</div>
	</body>
</html>


et je n'ai pas encore fait de JavaScript, je faisait juste des tests pour le moment.
Il faut que je fasse appel a une fonction js lorsque je clique sur un lien pour changer le titre de l'onglet.

Mon index :
<!doctype html> 
<html lang = "fr">
	<head>
		<meta charset = "utf-8">
		<title>Google</title>
		<link rel = "stylesheet" href = "CSS.css">
		<script src = "JavaScript.js"></script>
		<link rel="icon" type="image/x-icon" href="Favicon.ico" /><link rel="shortcut icon" type="image/x-icon" href="Favicon.ico" />
	</head>
	
	<frameset rows="11%, 89%" frameborder="0">
		<frame src = "Menu.html" name="haut">
		<frame src = "Google.html" name="bas">
	</frameset>
</html>
0
Salut,
"et je n'ai pas encore fait de JavaScript, je faisait juste des tests pour le moment. "
Oui enfin vu que c'est cette partie où vous demandez de l'aide il faudrait voir déjà ce que vous avez fait pour savoir ce qui ne marche pas et ce qui marche dans ce que vous avez...

Sinon pour le sélecteur utilisez plutôt celui indiqué ici:

https://www.w3schools.com/jsref/dom_obj_title.asp

ou en tenant compte du chemin complet:

document.head.getElementByTagName('title');

Par contre pour écrire/modifier vous pouvez utiliser .innerHTML

https://www.w3schools.com/jsref/prop_html_innerhtml.asp

Et pour l'interactivité(réagir au clic ou autre événement):
https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener

Par contre il ne faut pas utiliser de frame, préférez les iframe qui sont d'ailleurs plus simple à écrire.
Quoi qu'il en soit le titre étant dans chaque page c'est dans chaque page où il doit être modifié que la modification doit avoir lieu!
Les frameset ( dépréciés et à bannir car trop compliqué et bancal au niveau fonctionnement-et assassin du référencement) comme les iframes ne font qu'appeler une autre page dans la page contenant les autres.
Si vous voulez tout faire à partir de la page qui contient les autres frames vous devrez simplement passer d'une page à l'autre comme ceci, mais ça complique un peu la logique:

http://www.xorax.info/blog/programmation/100-cibler-javascript-document-iframe.html

Mais bon une page s'affichant dans le navigateur c'est son titre qui s'affichera et non le titre des pages qui peuvent être incluse en tant que frame.
Je dit des choses évidentes mais cela n'avais pas l'air de l'être dans votre question.
Une page affiche un seul titre.

En dernier point: Le titre ne devrais pas être changé sur une page (une fois affichée, avant on peut toujours) puisque le titre d'une page est une information essentielle au référencement de celle ci, la description de à quoi et sur quel sujet est la page.
Il doit donc être explicite et représenter le contenu de la page.

Hors "Menu" ne veut rien dire de précis (et personne cherche menu sur Internet ou alors avec le mot restaurant)... si vous mettez "Choix de la page de ...thème/sujet concerné par la page" vous avez déjà quelque chose qui indique ce que comporte votre page, donc les utilisateurs pourrons la trouver avec les mots clés adéquats.

Côté "menuS" vous avez par contre à utiliser les bonnes balises pour que le navigateur(et le référencement) puisse établir un contenu hiérarchique, sémantique et faire une table des matières (table of content).
Cela se fait en HTML5 avec les balises "section" et "article" suivit d'un titre(H1,H2...qui deviendra l'intitulé de l'article concerné):

section>article>h(x)
(x) étant à remplacer par le nombre de 1 à 6 d'importance du titre d'article.


Bon pour résumer vous essayer d'apprendre le JavaScript en utilisant des balises qui ne doivent pas l'être depuis plus de 10 ans(frame et frameset) et à avoir un programme qui fonctionne sur 3 pages alors qu'elle n'ont aucun moyen de communiquer entre elles(enfin on peut toujours faire un formulaire mais bon c'est compliqué)
...ok je veut bien.

Mais bon autant partir d'un HTML correct, avec création d'une table de matière et un titre qui veut dire quelque chose et qui est en rapport avec le contenu de la page. Mais bon JavaScript permettant d'intervenir sur toute la page il serais plus intéressant que vous regardiez tout ce qu'il peut faire sur le contenu de la page et non juste modifier un titre qui n'a pas vocation à être modifié...en tout cas pas sans y perdre en qualité de vos pages et la visibilité qu'auront les gens à trouver votre site.

Et d'avoir 3 pages au lieu d'une à gérer et à rajouter la programmation adéquate vous apporte quoi? Pourquoi pas tout réunir en une seule page claire et nette.
Si vous préférez vous compliquer la vie attendez au moins d'avoir quelques bases en JavaScript, vous verrez ça viendra tout seul XD


Sur la sémantique HTML5
https://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html

sur les iframe:
https://www.w3schools.com/tags/tag_iframe.asp

voir commentaire en rouge sur les frameset
https://www.w3schools.com/TAGs/tag_frameset.asp

En JavaScript détails sur le sélecteur avec .getElementsByTagName* renvoi un Array(tableau)
https://www.w3schools.com/js/js_arrays.asp
  • globalement à éviter pour d'autres sélecteurs plus rapide et précis(

.getElementsByTagName renvoi la table de toute les balises avec le nom indiqué en paramètre de fonction, c'est forcément plus long/moins performant de lister tout les éléments 'machin' de la page pour n'en utiliser qu'un seul).
0