開発者向け：JavaScript、iframe、DHTMLによる親ウィンドウリダイレクト
JavaScript、iframe、DHTMLを用いた親ウィンドウのリダイレクト方法
概要
iframe内のコンテンツからJavaScriptを使用して、親ウィンドウを別のURLへリダイレクトできます。これは、さまざまな状況で役立ちます。例えば、以下のような用途に利用できます。
- iframe内のリンクをクリックした際に、親ウィンドウを新しいページへリダイレクトする
- iframe内のコンテンツに基づいて、親ウィンドウを動的にリダイレクトする
方法
親ウィンドウをリダイレクトするには、以下の2つの方法があります。
window.parent.location.href を使用する
この方法は、最もシンプルで汎用的な方法です。以下のコード例のように、window.parent.location.href プロパティにリダイレクト先のURLを設定することで、親ウィンドウをリダイレクトできます。
// iframe内のJavaScriptコード
window.parent.location.href = "https://www.example.com/";
window.opener を使用する
// iframe内のJavaScriptコード
window.opener.location.href = "https://www.example.com/";
注意事項
- 上記の方法は、すべてのブラウザで動作するわけではありません。特に、古いブラウザでは動作しない可能性があります。
- iframe内のコンテンツが異なるドメインから読み込まれている場合、セキュリティ上の理由により、リダイレクトができない場合があります。
- リダイレクトを行う前に、ユーザーに確認メッセージを表示することをおすすめします。
DHTMLとの関係
DHTMLは、JavaScript、CSS、HTMLを組み合わせて、動的なWebページを作成するための技術です。上記の方法は、DHTMLの一部として使用できます。例えば、iframe内のコンテンツに基づいて、親ウィンドウを動的にリダイレクトするような処理をDHTMLで記述することができます。
補足
上記以外にも、さまざまな方法で親ウィンドウをリダイレクトすることができます。詳しくは、上記の参考資料を参照してください。
HTMLコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>親ウィンドウのリダイレクト</title>
</head>
<body>
<p>このページはiframe内に表示されます。</p>
<p>以下のボタンをクリックすると、親ウィンドウがリダイレクトされます。</p>
<button onclick="redirectParent()">親ウィンドウをリダイレクト</button>
<iframe src="iframe.html" width="400" height="300"></iframe>
</body>
</html>
JavaScriptコード
// 親ウィンドウをリダイレクトする関数
function redirectParent() {
// window.parent.location.href を使用する方法
window.parent.location.href = "https://www.example.com/";
// window.opener を使用する方法
// window.opener.location.href = "https://www.example.com/";
}
iframe.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>iframe内のページ</title>
</head>
<body>
<p>このページはiframe内に表示されます。</p>
</body>
</html>
動作
上記のコードを実行すると、親ウィンドウに表示されているページは https://www.example.com/ へリダイレクトされます。
親ウィンドウをリダイレクトする他の方法
location.replace() メソッドは、現在のページの履歴を置き換えて、新しいページへリダイレクトします。以下のコード例のように、location.replace() メソッドにリダイレクト先のURLを渡すことで、親ウィンドウをリダイレクトできます。
// iframe内のJavaScriptコード
location.replace("https://www.example.com/");
window.open() メソッドは、新しいウィンドウを開いて、指定されたURLを表示します。以下のコード例のように、window.open() メソッドにリダイレクト先のURLを渡すことで、親ウィンドウを新しいウィンドウで開くことができます。
// iframe内のJavaScriptコード
window.open("https://www.example.com/");
HTMLリダイレクトを使用する
HTMLの <meta> タグを使用して、リダイレクトを指定することができます。以下のコード例のように、<meta> タグの http-equiv 属性を refresh に設定し、content 属性にリダイレクト先のURLとリダイレクトまでの秒数を指定することで、親ウィンドウをリダイレクトできます。
<meta http-equiv="refresh" content="0; url=https://www.example.com/">
form submit を使用する
iframe内にフォームを設置し、送信時に親ウィンドウをリダイレクトすることができます。以下のコード例のように、フォームの action 属性にリダイレクト先のURLを設定することで、フォーム送信時に親ウィンドウをリダイレクトできます。
<form action="https://www.example.com/" method="post">
<input type="submit" value="送信">
</form>
上記の方法にはそれぞれ、メリットとデメリットがあります。使用する方法は、状況に応じて選択する必要があります。
javascript iframe dhtml
