Javascript MEMO

言語切替によりタイトルを変更したい場合は
document.titleを使用することになります。
document.title は、
ブラウザのタブやウィンドウのタイトルバーに表示される
ページのタイトルを取得、
または
変更するためのプロパティです。

しかし、読み込んだ画像が諸事情により重い処理があるなどの理由があると
document.titleが正しく反映されないケースがあります。
この場合は、DOMContentLoadedのタイミングで実行することにより
タイトルの反映が可能になります。
[HTML/CSS]

copy

window.addEventListener('DOMContentLoaded', ()=>
{
	changeLang();//言語判定処理
	changeTitle();//タイトル変更
});
//言語判定処理
//lang:
//0:japanese
//1:english
function changeLang()
{
	let url = new URL(window.location.href);
	let param = url.searchParams;
	let lang = param.get('lang');
	const obj = document.getElementById('lang');
	if(lang==1 || obj.value==1)
	{
		obj.value = 1;
	}
	else
	{
		obj.value = 0;
	}
}
//タイトル変更
function changeTitle()
{
	const obj = document.getElementById('lang');
	let lang = obj.value;
	const title = document.getElementById('t1');
	//背景色と文字色を変更する
	title.style.display = "flex";
	title.style.justifyContent = "center";
	title.style.alignItems = "center";
	title.style.backgroundColor = "rgb(240 255 240 / 1.00)";
	document.title = lang == 0 ? "日本語のタイトル" : "english title";
}

copy

window.addEventListener('DOMContentLoaded', ()=>
{
	changeLang(); // Language Determination Process
	changeTitle(); // Change Title
});
// Language Determination Process
//lang:
//0: Japanese
//1: English
function changeLang()
{
	let url = new URL(window.location.href);
	let param = url.searchParams;
	let lang = param.get('lang');
	const obj = document.getElementById('lang');
	if(lang==1 || obj.value==1)
	{
		obj.value = 1;
	}
	else
	{
		obj.value = 0;
	}
}
// Change Title
function changeTitle()
{
	const obj = document.getElementById('lang');
	let lang = obj.value;
	const title = document.getElementById('t1');
	//Change background and text colors
	title.style.display = "flex";
	title.style.justifyContent = "center";
	title.style.alignItems = "center";
	title.style.backgroundColor = "rgb(240 255 240 / 1.00)";
	document.title = lang == 0 ? "English Title" : "English Title";
}

loadイベントで実行することは
ページ全体の読み込みが終わってから実行されるため、
タイミングとしては確実な部類に入ります。
しかし、load イベントは、画像や広告、外部スクリプトがすべて読み込まれるまで発生しません。
このためload イベントが発生していない（＝実行待ち状態）」になっている可能性があります。

[解決策]

「DOMContentLoaded」を使う方法があります。
これは画像などを待たず、HTMLの構造さえ読み込めれば実行されるため、より早く確実にタイトルを変えられます。

[DOMContentLoaded イベント]

ブラウザがHTML（DOMツリー）の解析を終えた瞬間に実行されます。
画像などを待たないので、より早いタイミングで確実にタイトルを書き換えることができます。