https://idea-hack.com/courses/lets-understand-the-methods-and-properties-related-to-browser-operations-that-are-often-used-in-javascript/lessons/use-javascript-to-send-the-user-another-page-other-than-by-clicking-the-a-tag/
https://idea-hack.com/courses/lets-understand-the-methods-and-properties-related-to-browser-operations-that-are-often-used-in-javascript/lessons/use-javascript-to-send-the-user-another-page-other-than-by-clicking-the-a-tag/

JavaScriptでaタグクリック以外の方法でユーザーを他ページに遷移させるのに便利なlocation.hrefプロパティの使い方

ユーザーを別ページに移動させる

JavaScriptでaタグをクリックすることなくユーザーを別のページに移動させたい時はlocaltion.hrefプロパティを利用します。

プロパティ

プロパティ意味
location.href現在のブラウザーのURLを表示する。
もし、新しいURLをこのプロパティに代入すると、その時点でそのURLへページ遷移する。
文字列型
location.href

サンプルコード

サンプルコードではまず、location.hrefをそのまま呼び出して取得データをHTMLに書きます。

その上で、location.hrefに新しいURL(当サイトのURL)を代入するスクリプトを用意し、「ボタン」を押し、確認ようダイアログボックスで「OK」を押すと遷移する様にしています。

Output
Pug
 button#button.mb-4 Button
 div#targetText
SCSS
#button {
	--background-color: #fff;
  --color: #576574;
	--transition: all .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');
//まず現在のページのURLを表示
targetText.textContent = location.href;
// ボタンをクリックしたら予め用意していたonClickAction()関数を実行する
document.getElementById('button').addEventListener('click', onClickAction);
/** ボタンをクリックと関数を実行 */
function onClickAction() {
	//コンファームを表示
	const checkConfirm = confirm('トップページに遷移します。よろしいですか?'); 
	if ( checkConfirm ) {
		location.href = 'https://idea-hack.com';
	}
}
インストラクター
コメント

コメントを残す