現在の言語: 日本語

戻る

読み込み時点でのhrefの切替
DOMContentLoadedによるhrefの切替

JavaScriptでリンク先を書き換える場合、loadイベントよりもDOMContentLoadedイベントの方が適切です。
[DOMContentLoaded]
HTMLの解析が完了し、DOMツリー（タグの構造）が構築された直後に発生します。
画像やスタイルシートの読み込み完了を待たずに実行されるため、
ユーザーがリンクをクリックできるようになる前に素早くhrefを書き換えることができます。

[load]
HTMLだけでなく、画像、動画、スタイルシート、iframeなどすべてのリソースが読み込まれた後に発生します。
画像の多いページでは実行までに数秒かかることがあり、
その間にユーザーが書き換え前の（間違った言語の）リンクをクリックしてしまうリスクがあります。

copy
window.addEventListener('DOMContentLoaded', ()=>
{
	const lang = parseInt(document.getElementById('lang').value);

	const appTitle = document.getElementById('appTitle');
	const btn = document.getElementById('btn');
	const url = document.getElementById('url');
	const img = document.getElementById('img');
	const title = lang ==0 ? "いたずらパンダ" : "mischief panda";
	if(lang==0)
	{
		url.href = "https://play.google.com/store/apps/details?id=com.xrea.s17.app.panda";
		img.src = "google_link_jp.png";
		btn.innerText = "アプリ紹介";
	}
	else
	{
		url.href = "https://play.google.com/store/apps/details?id=com.xrea.s17.app.panda&hl=en";
		img.src = "google_link_en.png";
		btn.innerText = "app introduce";
	}
	appTitle.innerText = title;
	img.alt = title;
});

[DOMContentLoaded]
リンクの書き換えに最も適した標準的なタイミングとなります。

[load]
遅すぎるため、リンク書き換えには不向きです。

[defer属性]
イベントを意識せずに最適なタイミングで実行できるため、外部JSファイルにするならこちらが推奨されます。




戻る

著作権情報
ホームページおよびアプリ等に掲載されている情報等については、いかなる保障もいたしません。
ホームページおよびアプリ等を通じて入手したいかなる情報も複製、販売、出版または使用させたり、
または公開したりすることはできません。
当方は、ホームページおよびアプリ等を利用したいかなる理由によっての障害等が発生しても、
その結果ホームページおよびアプリ等を利用された本人または他の第三者が被った損害について
一切の責任を負わないものとします。