JavaScriptでURL遷移する方法

JavaScriptでブラウザをURLに遷移させる方法

JavaScriptを使用すると、ブラウザを特定のURLにナビゲートさせることができます。これは、ユーザーを別のページにリダイレクトしたり、新しいタブを開いたりする際に便利です。

window.locationオブジェクトを使用する

最も一般的な方法は、window.locationオブジェクトを使用することです。このオブジェクトは、現在のブラウザのURLに関する情報を提供し、変更することができます。

URLに直接設定する:

window.location.href = "https://www.example.com";

このコードは、ブラウザを「」にリダイレクトします。

現在のURLを置き換える:

window.location.replace("https://www.example.com");

このコードは、現在のURLを「」で置き換えます。これにより、ブラウザの履歴に新しいエントリが作成されません。

新しいタブを開く:

window.open("https://www.example.com", "_blank");

location.assign()メソッドを使用する

location.assign()メソッドは、window.location.hrefと同様の機能を提供します。

location.assign("https://www.example.com");

location.hrefプロパティを使用する

location.hrefプロパティは、現在のURLを設定または取得します。

location.href = "https://www.example.com";

例:

function navigateToExample() {
  window.location.href = "https://www.example.com";
}

このコードは、navigateToExample()関数を呼び出すと、ブラウザを「」にリダイレクトします。

注意

• window.open()メソッドは、ポップアップブロッカーによってブロックされる可能性があります。
• ブラウザのセキュリティ制限により、クロスオリジンリソースへのリダイレクトが制限される場合があります。

JavaScriptでURL遷移する方法のコード例

window.location.href = "https://www.example.com";

window.location.replace("https://www.example.com");

window.open("https://www.example.com", "_blank");

location.assign("https://www.example.com");

location.href = "https://www.example.com";

function navigateToExample() {
  window.location.href = "https://www.example.com";
}

<a>タグを使用する

HTMLの<a>タグを使用して、リンクを作成し、クリックするとブラウザを別のURLに遷移させることができます。

<a href="https://www.example.com">リンクテキスト</a>

setTimeout()関数を使用する

setTimeout()関数を使用して、一定時間後にブラウザを別のURLに遷移させることができます。

setTimeout(function() {
  window.location.href = "https://www.example.com";
}, 3000); // 3秒後に遷移

history.pushState()メソッドを使用する

history.pushState()メソッドを使用して、ブラウザの履歴に新しいエントリを追加し、URLを変更することができます。

history.pushState(null, null, "https://www.example.com");

location.reload()メソッドを使用して、現在のページを再読み込みすることができます。

location.reload();

window.open()メソッドのオプションを使用する

window.open()メソッドのオプションを使用して、新しいウィンドウやタブのサイズや位置を指定することができます。

window.open("https://www.example.com", "_blank", "width=800,height=600");