Zenn
🕌

window.top.location.hrefの話

2024/06/17に公開
HTML
JavaScript
tech

window.top.location.href...？

GASでHTMLを公開している時に、window.location.hrefでは対応できず
window.top.location.hrefを使用する箇所があり
違いが分かっていなかったので違いとそもそも何なのかをメモ

そもそもwindow.locationとは？

window.locationは、JavaScriptで現在のウィンドウやフレームのURLに関する情報を操作するためのオブジェクト。
このオブジェクトを利用することで、
現在表示されているページのURLを取得したり、変更したりすることができる。
window.location の主なプロパティとメソッドは以下の通り：

  • window.location.href: 現在のページの完全なURL（文字列）を示す。URLを取得するだけでなく、設定することでページの遷移も行える。
  • window.location.protocol: 使用されているプロトコル（例：http:、https:）を示す。
  • window.location.host: ホスト名とポート番号（例：www.example.com:80）を示す。
  • window.location.hostname: ホスト名のみ（例：www.example.com）を示す。
  • window.location.port: ポート番号（例：80）を示す。
  • window.location.pathname: ホスト名以下のパス（例：/page）を示す。
  • window.location.search: クエリ文字列（例：?query=123）を示す。
  • window.location.hash: アンカー部分（例：#section）を示す。
  • window.location.assign(url): 指定したURLにページを遷移させる。
  • window.location.reload(): 現在のページを再読み込みする。
  • window.location.replace(url): 指定したURLにページを遷移させるが、ブラウザの履歴には現在のページを残さない。

詳しくは、MDNのLocation Web API参照

window.topとは？

window.topは、現在のウィンドウ やフレームのトップレベルのウィンドウを指す。
特に、ページがiframe内で表示されている場合に有用とのこと。

script.js
// 最上位のウィンドウのURLを取得
console.log(window.top.location.href);

window.top.location.href と window.location.href の違い

上で記載した通り、操作対象となるウィンドウやフレームの範囲が違う。

window.location.href:

現在のウィンドウまたはフレームのURLを示す。
例えば、iframe内でこのコードを実行すると、そのiframeのURLを指す。

window.top.location.href:

最上位の親ウィンドウ（通常はブラウザ全体のウィンドウ）のURLを示します。
例えば、iframe内でこのコードを実行しても、iframeを含む最上位のウィンドウのURLを指す。

script.js
// 現在のiframe内のURLを取得
console.log(window.location.href);

// 親ウィンドウのURLを取得
console.log(window.top.location.href);

// 現在のiframe内のURLを変更
window.location.href = "https://example.com";

// 親ウィンドウのURLを変更
window.top.location.href = "https://example.com";

セキュリティ上の懸念

iframe内から最上位のウィンドウを取得できてしまうので
セキュリティーに関しても調べたのでメモ。

window.topを使用して親フレームのURLにアクセスしようとする場合
同一オリジンポリシーにより制限されている。
異なるオリジンのiframeからwindow.topにアクセスすることは
セキュリティ上の理由でブロックされる。
(もし別オリジン間でデータのやり取り等をしたい場合は、CORSやPostMessageを使用する必要あり)
そのため、外部のiframeを埋め込んで色々されることはなさそう。

まとめ

  • window.location
    現在のウィンドウやフレームのURLに関する情報を操作するオブジェクト。
  • window.top
    最上位の親ウィンドウを指すプロパティ。
  • window.top.location
    最上位の親ウィンドウのURLに関する情報を操作するオブジェクト。

Discussion