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

JavaScriptでURLをリダイレクトする方法を解説

Web開発において、ユーザーを別のページへ誘導する「リダイレクト」はよく使われる処理です。JavaScriptを使えば、ボタンクリックなどの操作に応じて簡単にURLを別のページへ切り替えることができます。

JavaScriptでリダイレクトを実現する基本の書き方

JavaScriptでページをリダイレクトするには、window.location.href に移動先のURLを代入します。以下のコードでは、ボタンがクリックされたタイミングで www.google.com へ遷移するようにしています。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
</style>
</head>
<body>
<h1>JavaScript Redirect a URL</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、www.google.com へリダイレクトされます
</h3>
<script>
    document.querySelector('.Btn').addEventListener('click',()=>{
        window.location.href = 'https://www.google.com';
    })
</script>
</body>
</html>

実行結果

ページを開くと、次のように「CLICK HERE」ボタンと説明文が表示されます。

JavaScriptでURLをリダイレクトする方法を解説

「CLICK HERE」ボタンをクリックすると、ブラウザが自動的に Google のトップページ（www.google.com）へ移動します。

JavaScriptでURLをリダイレクトする方法を解説

コードのポイント

  • window.location.href：現在のページのURLを表すプロパティです。ここに新しいURLを代入すると、そのページへ即座に遷移します。
  • addEventListener('click', ...)：ボタンのクリックイベントを検知し、リダイレクト処理を実行しています。
  • document.querySelector()：CSSセレクタを使って対象の要素（ここでは .Btn クラスのボタン）を取得しています。

このように、window.location.href を使うことで、数行のコードでシンプルかつ確実にURLリダイレクトを実装できます。フォーム送信後の遷移やログイン処理など、さまざまな場面で応用できる基本的なテクニックなので、ぜひ覚えておきましょう。

  1. SeleniumにおけるWebDriverのclick()とJavaScriptのclick()の違いと使い方

    はじめにSeleniumでは、リンクをクリックする方法として「WebDriver標準のclick()」と「JavaScript Executorを使ったclick()」の2つのアプローチがあります。それぞれ特徴や使いどころが異なるため、両方を理解しておくとテスト自動化の幅が大きく広がります。本記事では、WebDriverのclick()によるリンク操作の基本から、JavaScript Executorを使った代替手段まで、コード例を交えてわかりやすく解説します。WebDriverのclick()でリンクをクリックする方法Selenium WebDriverでリンクをクリックする場合、linkT

  2. 【解決済み】javascript:void(0)エラーの原因と対処法を徹底解説

    パソコンでインターネットを閲覧していると、「javascript:void(0)」というエラーに遭遇することがあります。致命的なエラーではありませんが、頻繁に表示されると非常に煩わしいものです。このエラーが出る場合、多くはブラウザ側に何らかの問題が発生しており、その結果として特定のウェブサイトへアクセスできなくなっています。興味深いことに、このエラーはすべてのサイトではなく、一部のサイトにアクセスしたときにのみ表示される点です。根本的な原因としては、ブラウザに組み込まれているポップアップブロッカーが考えられます。また、プロキシサーバー経由でインターネットに接続している場合にも、このエラーが発生