概要: このチュートリアルでは、JavaScriptを使用して新しいURLまたはページにリダイレクトする方法を学習します。
JavaScriptリダイレクト入門
場合によっては、ユーザーをあるページからURLの異なる別のページにリダイレクトする必要があります。
たとえば、スマートフォンのオペレーティングシステムに応じて、ユーザーをGoogle PlayまたはApple Storeにリダイレクトするだけのアプリランディングページを作成できます。
そのためには、
- スマートフォンのオペレーティングシステムを検出する
- OSがiOSの場合はApple Storeに、OSがAndroidの場合はGoogle Playにリダイレクトする。
リダイレクションは、JavaScriptリダイレクトAPIを使用してWebブラウザで行うことができます。
JavaScriptリダイレクトはWebブラウザ上で完全に実行されることに注意することが重要です。したがって、サーバー側のリダイレクトのようにステータスコード301（永続的に移動）を返しません。
そのため、サイトを別のドメインに移動したり、古いページに新しいURLを作成する場合は、常にサーバー側のリダイレクトを使用する必要があります。
新しいURLへのリダイレクト
現在のページから新しいページへの新しいURLにWebブラウザをリダイレクトするには、locationオブジェクトを使用します。
location.href = 'new_url';Code language: JavaScript (javascript)例:
location.href = 'https://javascripttutorial.dokyumento.jp/';Code language: JavaScript (javascript)locationオブジェクトのhrefプロパティに値を代入することは、locationオブジェクトのassign()メソッドを呼び出すことと同じ効果があります。
location.assign('https://javascripttutorial.dokyumento.jp/');Code language: JavaScript (javascript)これらの呼び出しのいずれかによって、新しいURLにリダイレクトされ、ブラウザの履歴スタックにエントリが作成されます。つまり、ブラウザの戻るボタンを使用して前のページに戻ることもできます。
ブラウザの履歴スタックに新しいエントリを作成せずに新しいURLにリダイレクトするには、locationオブジェクトのreplace()メソッドを使用します。
location.replace('https://javascripttutorial.dokyumento.jp/');Code language: JavaScript (javascript)次の例では、OSがAndroidまたはiOSの場合はWebブラウザをGoogle PlayまたはApple Storeにリダイレクトするページを作成します。それ以外の場合は、OSがサポートされていないことを示すメッセージが表示されます。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Redirect</title>
</head>
<body>
<div class="message"></div>
<script src="js/app.js"></script>
</body>
</html>Code language: HTML, XML (xml)js/app.js
const apps = {
Android: 'https://play.google.com/',
iOS: 'https://www.apple.com/store',
};
const platform = () => {
let userAgent = navigator.userAgent || navigator.vendor || window.opera;
if (/windows phone/i.test(userAgent)) return 'Windows Phone';
if (/android/i.test(userAgent)) return 'Android';
if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) return 'iOS';
return null;
};
const redirect = () => {
let os = platform();
if (os in apps) {
location.replace(apps[os]);
} else {
const message = document.querySelector('.message');
message.innerText = 'Your OS is not supported';
}
};
redirect();Code language: JavaScript (javascript)動作原理
まず、キーがOSで値がGoogle PlayとApple StoreのURLであるappsオブジェクトを定義します。
const apps = {
Android: 'https://play.google.com/',
iOS: 'https://www.apple.com/store',
};Code language: JavaScript (javascript)次に、OSを検出する関数を定義します。
const platform = () => {
let userAgent = navigator.userAgent || navigator.vendor || window.opera;
if (/windows phone/i.test(userAgent)) return 'Windows Phone';
if (/android/i.test(userAgent)) return 'Android';
if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) return 'iOS';
return null;
};Code language: JavaScript (javascript)第三に、検出されたOSに基づいてOSを検出し、Webブラウザをリダイレクトするredirect()関数を生成します。
const redirect = () => {
let os = platform();
if (os in apps) {
location.replace(apps[os]);
} else {
const message = document.querySelector('.message');
message.innerText = 'Your OS is not supported';
}
};Code language: JavaScript (javascript)最後に、redirect()関数を呼び出します。
redirect();相対URLへのリダイレクト
次のスクリプトは、現在のページと同じレベルにあるabout.htmlにリダイレクトします。
location.href = 'about.html';Code language: JavaScript (javascript)次のスクリプトは、rootフォルダにあるcontact.htmlページにリダイレクトします。
location.href = '/contact.html';Code language: JavaScript (javascript)ページ読み込み時のリダイレクト
読み込み時に新しいページにリダイレクトする場合は、次のコードを使用します。
window.onload = function() {
location.href = "https://javascripttutorial.dokyumento.jp/";
}Code language: JavaScript (javascript)まとめ
- 新しいURLまたはページにリダイレクトするには、新しいURLを
location.hrefプロパティに代入するか、location.assign()メソッドを使用します。 location.replace()メソッドは新しいURLにリダイレクトしますが、ブラウザの履歴スタックにエントリは作成しません。
