betacode

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

Сайт бесплатного изучения языков:
Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи. Facebook

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>

 
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.
protocolString, который является схемой протокола (protocol scheme) у URL. Включает символ ( : ) в конце.
hostnameString, который является названием домена URL.
portString, который является портом (port) у URL, может быть пустым.
hostString, который является​​​​​​​ hostname:port или hostname если port пустой.
pathnameString, который является ссылкой к названию файла URL, включая символ ( / ) в начале строки.
searchString, который является​​​​​​​ "querystring" у URL, включая символ ( ? ) в начале строки.
hashString, так же называется hash string, включая символ ( # ) включая символ.
usernameString, который является именем пользователя, указанный впереди названия домена.
passwordString, пароль пользователя определенный впереди названия домена.
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>

 
Например, возьмем текущий 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>

 

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

 
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:
Пример использования метода 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.frameElementYВозвращает элемент (element), в который встроенно (embedded) это окно, или null если данное окно не встроенно.
window.framesYВозвращает массив frame внутри текущего окна.
window.lengthYВозвращает​​​​​​​ количество frame внутри текущего окна. Смотрите так же window.frames.
window.parentYВозвращает ссылку на текущее родительское окно (или frame).
window.selfYВозвращает объект ссылки на сам объект window.
window.openerYВозвращает ссылку на окно, которое открыло текущее окно.
window[0],
window[1],
etc.
YВозвращает ссылку на объект окна в frames. Смотрите так же​​​​​​​ window.frames.
window.topYВозвращает ссылку на саоме верхнее (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>