JavaScript で相対 URL にリダイレクトする
Web サイトでは、ページを頻繁にリダイレクトする必要がある場合があります。サーバー側から Web ページと URL を取得することをお勧めしますが、JavaScript を使用してクライアント側からページをリダイレクトする必要がある場合があります。
このチュートリアルでは、JavaScript を使用してシフトする方法を説明します。
JavaScript で相対 URL にリダイレクトする
jQuery などのほとんどの JavaScript ライブラリには、Web ページをリダイレクトするための関数があらかじめ用意されていますが、プレーン JavaScript を使用する方が常に簡単です。JavaScript リダイレクトメソッドは 2つあります。
www.newwebsite.com/new-location に再ルーティングするシナリオを考えてみましょう。この状況では、Web ページの JS コードに次のコマンドのいずれかを含めることができます。
構文：
window.location.replace("/url or path"); //or
window.location.href = "/url or path";
リダイレクトは、最初のインスタンスでブラウザの履歴にレコードを追加しません。ただし、Web サイトから別の URL をクリックするのと同様に、2 番目のインスタンスで説明が追加されます。
例：
<!DOCTYPE html>
<html>
<head>
<script>
function nUrl() {
window.location.href = "b.html";
}
</script>
</head>
<body>
<input type="button" value="Redirect page" onclick="nUrl()" />
</body>
</html>
注：指定する相対パスが絶対パスであることを確認してください。また、別のページを
b.htmlとして保存する必要があります。
出力：
Redirect page ボタンをクリックすると、ページリンクは次のようにリダイレクトされます。
次の点に注意してください。
-
JavaScript を使用して HTTPS Web ページから HTTP Web サイトにリダイレクトすることはできません。大多数のブラウザはあなたにそれをさせません。
JavaScript を使用して、HTTP から HTTP、HTTP から HTTPS、および HTTPS から HTTPS ページにのみリダイレクトできます。HTTPS から HTTPWeb サイトへのサーバー側リダイレクトを使用する必要があります。
-
絶対パス（
/new-locationなど）または完全な URL（http://www.newwebsite.com/new-locationなど）を使用できます。リダイレクトの相対パスを指定した場合、ブラウザは変更せずに同じ HTTP/HTTPS プロトコルを使用して Web サイトに再ルーティングします。HTTP から HTTPS ページにリダイレクトするために URL 全体を指定した場合に最適です。
-
ブラウザがページを再ルーティングするのではなくフォームを送信するため、
Submitボタンの関数ハンドラーにリダイレクトを配置すると機能しない場合があります。このような状況では、AJAX を使用してフォームを送信し、ボタンの回答に基づいてリダイレクトすることができます。
Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.
LinkedIn