JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで別のWebページにリダイレクトする方法を解説

JavaScriptを使えば、ボタンのクリックや特定の条件を満たしたタイミングで、ユーザーを別のWebページへ簡単に誘導（リダイレクト）できます。最も一般的なのは、window.location.href プロパティに移動先のURLを代入する方法です。

主なリダイレクトの方法

  • window.location.href = "URL"：最もシンプルで広く使われる方法です。
  • window.location.assign("URL")：hrefと同じ動作をし、ブラウザの履歴にも残ります。
  • window.location.replace("URL")：現在のページを置き換えるため、「戻る」ボタンで元のページに戻ることができません。

コード例

次の例では、ボタンをクリックすると指定したサイトへリダイレクトされます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webページへのリダイレクト例</title>
</head>
<body>
<h1>別のWebページへのリダイレクト例</h1>
<button class="redirectBtn">リダイレクト</button>
<p>上のボタンをクリックすると、別のWebページへ移動します。</p>
<script>
document.querySelector(".redirectBtn").addEventListener("click", redirectFunction);
function redirectFunction() {
window.location.href = "https://tutorialspoint.com/";
}
</script>
</body>
</html>

ポイント

location.href は関数ではなくプロパティのため、location.href("URL") のように括弧で呼び出すことはできません。必ず = "URL" の形式で代入してください。関数形式で書きたい場合は location.assign("URL") を使用します。

実行結果

上記のコードを実行すると、次のような画面が表示されます。

JavaScriptで別のWebページにリダイレクトする方法を解説

「リダイレクト」ボタンをクリックすると、指定した新しいサイトへ移動します。

JavaScriptで別のWebページにリダイレクトする方法を解説

リダイレクトが役立つ場面

  • ログイン状態に応じて表示ページを切り替えたいとき
  • フォーム送信後に完了ページ（サンキューページ）へ移動させたいとき
  • setTimeout() と組み合わせて、一定時間後に自動的に別ページへ転送したいとき

用途に応じて href・assign()・replace() を使い分けることで、ユーザー体験を損なわないスムーズなページ遷移を実現できます。

  1. JavaScriptでオートコンプリート（入力補完）機能を実装する方法

    JavaScriptによるオートコンプリートの実装検索フォームなどでユーザーの入力に合わせて候補を自動的に表示する「オートコンプリート（入力補完）」機能は、JavaScriptを使えばライブラリなしでも実装できます。本記事では、配列に格納されたデータを候補として表示し、マウスクリックやキーボード操作で選択できるオートコンプリートの作り方を、完全なサンプルコードとともに解説します。実装のポイントこのサンプルでは以下のような仕組みでオートコンプリートを実現しています。inputイベント：テキストフィールドに入力があるたびに発火し、入力値と前方一致する項目を候補リストとして動的に生成します。キーボー

  2. JavaScriptでテキストを切り替える（トグルする）方法を解説

    JavaScriptを使えば、ボタンをクリックするたびに表示されるテキストを切り替える（トグルする）処理を簡単に実装できます。ここでは、innerHTMLプロパティと条件分岐を組み合わせた、最も基本的なテキスト切り替えの方法をサンプルコード付きで解説します。実装コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>