https://idea-hack.com/courses/lets-understand-the-methods-and-properties-related-to-browser-operations-that-are-often-used-in-javascript/lessons/dynamically-change-the-title-field-of-browser-tab-with-javascript-d/
https://idea-hack.com/courses/lets-understand-the-methods-and-properties-related-to-browser-operations-that-are-often-used-in-javascript/lessons/dynamically-change-the-title-field-of-browser-tab-with-javascript-d/

JavaScriptでブラウザタブのタイトル欄を動的に変更するdocument.titleプロパティの使い方

ブラウザタブのタイトルを動的に変更する

JavaScriptで、ブラウザタブのタイトルを動的に変更したい場合はdocuent.titleプロパティを利用します。

メソッド

プロパティ意味
document.titleブラウザタブのタイトル情報を取得する。このプロパティに新しい値を代入すると、そのタイトルタブが動的に更新される。
document.titleプロパティ

サンプルコード

サンプルコードとして、ボタンを押すと入力された値をブラウザタブのタイトルに反映するコードを紹介します。

Output
タイトルバーを更新する
Pug
div タイトルバーを更新する
	textarea.textarea.w-100.mb-2#userInput
	button#button.mb-4.text-center 更新
	#targetText
SCSS
#button {
	--background-color: #fff;
	--color: #576574;
	--transition: all 0.3s;
	margin-bottom: 10px;
	background-color: var(--background-color);
	padding: 10px;
	color: var(--color);
	border: 1px solid #576574;
	cursor: pointer;
	width: 120px;
	transition: var(--transition);
	&:hover {
		transition: var(--transition);
		color: var(--background-color);
		background-color: var(--color);
	}
}
JavaScript
const targetText = document.getElementById( 'targetText' );
const userInput = document.getElementById( 'userInput' );
document.getElementById('button').addEventListener('click', onClickAction);
targetText.textContent = `現在のタイトルは「${document.title}」です。`;

/** ボタンをクリックと関数を実行 */
function onClickAction() {
	const userInputTitle = userInput.value;
	document.title = userInputTitle;
	targetText.textContent = `現在のタイトルは「${document.title}」です。`;
}

ちなみに、サンプルコードの様にfocus();を付与すると、別窓で開いた時にウィンドウが必ずアクティブになり、画面に表示される様になります。

インストラクター
コメント

コメントを残す