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

# はじめに
`location`オブジェクトの内容についてのメモ。


# 内容
## ancestorOrigins
すべての祖先オリジン。

```html:/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>
```

```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>
```

```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>
```

```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へ移動。履歴追加あり。

```html: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
現在のページをリロード

```html: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へ移動。履歴追加なし。

```html: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`