Руководство Javascript Location

window.location
Properties
Methods
Frames

1. window.location

window.location возвращает объект Location с информацией про URL текущего объекта document.

window.location (As a String)

Заметьте: Javascript 1.0 смоделировал window.location как String, следующие версии Javascript смоделировали его как объект. Наследие (legacy) от версии 1.0 все еще принимается всеми браузерами, поэтому вы можете прикрепить значение URL String к window.location чтобы изменить URL объекта document. Но я рекомендую вам прикрепить URL String к window.location.href вместо window.location.

legacy-location-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>window.location Example</title>
      <meta charset="UTF-8">


   </head>
   <body>

       <h1>window.location (Legacy)</h1>
       <p style="color:red;">
         Note: Javascript 1.0, window.location as a String,
         NOW, It is still accepted by all browsers
       </p>

       <button onclick="alert(window.location)">alert(window.location)</button>

       <br><br>

       <button onclick="window.location='https://google.com'">
          Set window.location='https://google.com';
       </button>


   </body>
</html>

https://ex1.o7planning.com/javascript/location/legacy-location-example.html

window.location (As a Object)

window.location рекомендуется использовать как объект, он имеет полезные свойства (property) и методы.

2. Properties

Объект Location включает свойства (property):

href
protocol
host
hostname
port
pathname
search
hash
username
password
origin (Read only)

Свойство	Описание
href	String, который является URL у document.
protocol	String, который является схемой протокола (protocol scheme) у URL. Включает символ ( : ) в конце.
hostname	String, который является названием домена URL.
port	String, который является портом (port) у URL, может быть пустым.
host	String, который является hostname:port или hostname если port пустой.
pathname	String, который является ссылкой к названию файла URL, включая символ ( / ) в начале строки.
search	String, который является "querystring" у URL, включая символ ( ? ) в начале строки.
hash	String, так же называется hash string, включая символ ( # ) включая символ.
username	String, который является именем пользователя, указанный впереди названия домена.
password	String, пароль пользователя определенный впереди названия домена.
origin (Read only)	String, который является protocol//hostname:port или protocal//hostname если port пустой.

Пример:

http://example.com:8080/path/to/page?param1=value1&param2=value2#hash

Property	Value
protocol	http:
hostname	example.com
port	8080
host	example.com:8080
pathname	/path/to/page
search	?param1=value1&param2=value2
hash	#hash
origin	http://example.com:8080

location-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>Location Example</title>
      <meta charset="UTF-8">
      <style>textarea {width:100%;margin-top:10px;}</style>

   </head>
   <body>

       <h1>window.location</h1>

        <button onClick="showInfos()">Show Infos</button>
        <br>

        <textarea name="name" rows="15" id="log-area"></textarea>

        <script>
           function showInfos()  {

             var logArea = document.getElementById("log-area");
             logArea.value = "";

             logArea.value += "location.href= " + location.href +"\n";
             logArea.value += "location.protocol= " + location.protocol +"\n";
             logArea.value += "location.host= " + location.host +"\n";
             logArea.value += "location.hostname= " + location.hostname +"\n";

             logArea.value += "location.port= " + location.port +"\n";
             logArea.value += "location.pathname= " + location.pathname +"\n";
             logArea.value += "location.search= " + location.search +"\n";
             logArea.value += "location.hash= " + location.hash +"\n";
             logArea.value += "location.username= " + location.username +"\n";
             logArea.value += "location.password= " + location.password +"\n";
             logArea.value += "location.origin= " + location.origin +"\n";

           }
           showInfos();
        </script>
   </body>
</html>

https://ex1.o7planning.com/javascript/location/location-example.html?param1=value1&param2=value2#hash

Например, возьмем текущий URL страницы или настроим новый URL для текущей страницы.

location-href-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>window.location Example</title>
      <meta charset="UTF-8">

   </head>
   <body>

       <h1>window.location.href</h1>

       <button onclick="alert(window.location.href)">alert(window.location.href)</button>

       <br><br>

       <button onclick="window.location.href='https://google.com'">
          Set window.location.href='https://google.com';
       </button>

   </body>
</html>

https://ex1.o7planning.com/javascript/location/location-href-example.html

3. Methods

Объект Location включает методы (method):

assign(url)
replace(url)
reload(forcedReload)
toString()

location.assign(url)

Загрузите (load) страницу с url предоставленный параметром метода. Данный метод создает запись, это значит вы можете использовать функцию Go-Back чтобы вернуться на предыдущую страницу.

location-assign-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>window.location Example</title>
      <meta charset="UTF-8">
   </head>
   <body>

       <h1>window.location.assign(url)</h1>

       <button onclick="location.assign('https://google.com')">
          location.assign('https://google.com')
       </button>

   </body>
</html>

https://ex1.o7planning.com/javascript/location/location-assign-example.html

location.replace(url)

Загрузите (load) страницу с url предоставленный параметром метода. Данный метод заменяет запись текущей истории записью новой истории, значит вы не можете использовать функцию Go-Back чтобы вернуться на предыдущую страницу.

location-replace-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>window.location Example</title>
      <meta charset="UTF-8">
   </head>
   <body>

       <h1>window.location.replace(url)</h1>

       <button onclick="location.replace('https://google.com')">
          location.replace('https://google.com')
       </button>

   </body>
</html>

https://ex1.o7planning.com/javascript/location/location-replace-example.html

location.reload(forcedReload)

Метод location.reload(forcedReload) используется для перезагрузки (reload) текущей страницы. Это похоже на то, как вы нажимаете на кнопку Refresh. Необязательный парамерт forcedReload имеет два значения true/false. Если forcedReload = true значит содержание страницы будет загружено с сервера, наоборот если forcedReload = false содержание страницы можно получить с cache, если браузер не видит необходимость получить с сервера. Значение по умолчанию является false.

После вызова метода location.reload(forcedReload) положение прокутки (scroll) у полосы прокрутки (scrollbar) может быть изменено в зависимости от forcedReload. Точнее если forceReload = false место прокрутки не меняется. С некоторыми браузерами, если forcedReload = true место прокрутки вернется к 0 (window.scrollY = 0).

Вы можете вызвать метод reload() из Frame чтобы перезагрузить (reload) содержание другого Frame, но оно может быть заблокировано и вы получите ошибку если эти 2 Frame имеют разное происхождение. Изучите более подробно про Same-Origin Policy:

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

Пример использования метода location.reload():

location-reload-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>window.location Example</title>
      <meta charset="UTF-8">

      <script>
          function showCurrentTime()  {
              document.getElementById("showtime").innerHTML ="Now is " + new Date();
          }
      </script>
   </head>
   <body onload="showCurrentTime()">

       <h2>window.location.reload(true/false)</h2>

       <p id="showtime"></p>


       <button onclick="location.reload(true)">
          location.reload(true)
       </button>

   </body>
</html>

location.toString()

Данный метод возвращает URL у document, он точно возвращает window.location.href.

4. Frames

Одна страница может содержать Frame, и один Frame может содержать другие Frame, они формируют иерархию Frame.

Свойство	Только для чтения	Описание
window.name		Получает или настраивает название окну.
window.frameElement	Y	Возвращает элемент (element), в который встроенно (embedded) это окно, или null если данное окно не встроенно.
window.frames	Y	Возвращает массив frame внутри текущего окна.
window.length	Y	Возвращает количество frame внутри текущего окна. Смотрите так же window.frames.
window.parent	Y	Возвращает ссылку на текущее родительское окно (или frame).
window.self	Y	Возвращает объект ссылки на сам объект window.
window.opener	Y	Возвращает ссылку на окно, которое открыло текущее окно.
window[0], window[1], etc.	Y	Возвращает ссылку на объект окна в frames. Смотрите так же window.frames.
window.top	Y	Возвращает ссылку на саоме верхнее (topmost) окно в иерархии окон.

Например, используйте Javascript чтобы изменить URL одного Frame из другого Frame.

frame-main.html

<!DOCTYPE html>
<html>
   <head>
      <title>Location example</title>
      <meta charset="UTF-8">
      <style>iframe {height:155px; width:100%}</style>
   </head>
   <body>

       <h1 id="my-h1">Main Frame</h1>

       <p>Frame 1</p>
       <iframe src="frame-a.html"></iframe>

       <p>Frame 2</p>
       <iframe src="frame-b.html"></iframe>

   </body>
</html>

frame-a.html

<!DOCTYPE html>
<html>
   <head>
      <title>frame-a.html</title>
      <meta charset="UTF-8">

      <script>
          function changeSrcOfFrame2(newUrl) {
              var frame2 = window.parent.frames[1];
              frame2.location.href = newUrl;
          }
      </script>
   </head>
   <body>

       <h2>frame-a.html</h2>

       <button onclick="changeSrcOfFrame2('frame-c.html')">
         Change Location of Frame 2 --&gt; frame-c.html
       </button>
       <br/><br/>

       <button onclick="changeSrcOfFrame2('frame-b.html')">
         Change Location of Frame 2 --&gt; frame-b.html
       </button>

   </body>
</html>

frame-b.html

<!DOCTYPE html>
<html>
   <head>
      <title>frame-b.html</title>
      <meta charset="UTF-8">
      <script>
          function showCurrentTime() {
             document.getElementById("curr-date").innerHTML= new Date();
          }
      </script>
   </head>
   <body onload="showCurrentTime()">

       <h2 id="my-h2" style="color:blue;">frame-b.html</h2>

       <p id="curr-date">...</p>

   </body>
</html>

frame-c.html

<!DOCTYPE html>
<html>
   <head>
      <title>frame-c.html</title>
      <meta charset="UTF-8">
      <script>
          function showCurrentTime() {
             document.getElementById("curr-date").innerHTML= new Date();
          }
      </script>
   </head>
   <body onload="showCurrentTime()">

       <h2 id="my-h2" style="color:red;">frame-c.html</h2>

       <p id="curr-date">...</p>

   </body>
</html>