はじめに

locationオブジェクトの内容についてのメモ。

内容

ancestorOrigins

すべての祖先オリジン。

/example1.com/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>index</title>
  </head>
  <body>
    index<br>
    <iframe src="./sample1.html"></iframe>
    <script>
      console.dirxml(location.ancestorOrigins)
      // length: 0
    </script>
  </body>
</html>

/example2.com/sample1.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>sample1</title>
  </head>
  <body>
    sample1
    <iframe src="./sample2.html"></iframe>
    <script>
      console.dirxml(location.ancestorOrigins)
      // length: 1
      // 0: http://example1.com
    </script>
  </body>
</html>

/example3.com/sample2.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>sample2</title>
  </head>
  <body>
    sample2
    <iframe src="./sample3.html"></iframe>
    <script>
      console.dirxml(location.ancestorOrigins)
      // length: 2
      // 0: http://example2.com
      // 1: http://example1.com
    </script>
  </body>
</html>

/example4.com/sample3.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>sample3</title>
  </head>
  <body>
    sample3
    <script>
      console.dirxml(location)
      // length: 3
      // 0: http://example3.com
      // 1: http://example2.com
      // 2: http://example1.com
    </script>
  </body>
</html>

assign

指定URLへ移動。履歴追加あり。

assign.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>assign</title>
  </head>
  <body>
    <script>

      function href() {
        // 実行後ブラウザの戻るボタンを押すと、replace.htmlに戻る（履歴追加あり）
        location.href = 'http://google.com/';
      }

      function assign() {
        // 実行後ブラウザの戻るボタンを押すと、replace.htmlに戻る（履歴追加あり）
        location.assign('http://google.com/');
      }

    </script>

    <button onclick="href()">href</button>

    <button onclick="assign()">assign</button>

  </body>
</html>

hash

https://www.example.com:8000/sample/test.html?q=js#hash
だと
#hash

host

https://www.example.com:8000/sample/test.html?q=js#hash
だと
www.example.com:8000

hostname

https://www.example.com:8000/sample/test.html?q=js#hash
だと
www.example.com

href

https://www.example.com:8000/sample/test.html?q=js#hash
だと
https://www.example.com:8000/sample/test.html?q=js#hash

値を変更すると指定URLへ移動。履歴追加あり。

origin

https://www.example.com:8000/sample/test.html?q=js#hash
だと
https://www.example.com:8000

pathname

https://www.example.com:8000/sample/test.html?q=js#hash
だと
/sample/test.html

port

https://www.example.com:8000/sample/test.html?q=js#hash
だと
8000

protocol

https://www.example.com:8000/sample/test.html?q=js#hash
だと
https:

reload

現在のページをリロード

reload.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>reload</title>
  </head>
  <body>
    <script>

      setTimeout(function() {
        // trueならサーバーのデータからリロード、falseならキャッシュからリロード
        location.reload(true); 
      },5000);

    </script>
  </body>
</html>

replace

指定URLへ移動。履歴追加なし。

replace.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>replace</title>
  </head>
  <body>
    <script>

      function replace() {
        // 実行後ブラウザの戻るボタンを押すと、replace.htmlには戻らない（履歴追加なし）
        location.replace('http://google.com/');
      }

      function href() {
        // 実行後ブラウザの戻るボタンを押すと、replace.htmlに戻る（履歴追加あり）
        location.href = 'http://google.com/';
      }

    </script>

    <button onclick="replace()">replace</button>

    <button onclick="href()">href</button>

  </body>
</html>

search

https://www.example.com:8000/sample/test.html?q=js#hash
だと
?q=js

[*JavaScript*] window.locationについて