betacode

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

1- Что такое BOM?

Объектная модель браузера (Brower Object Model - BOM) включает свойства (property), методы (method) предоставленные браузером, чтобы JavaScript мог взаимодействовать с браузером.
Имеются много браузеров как Firefox, Chrome, IE, Opera,.. Каждый браузер имеет свой собственный стандарт, поэтому BOM немного разные для каждого браузера. Не имеется официального стандарта для BOM. К счастью, новые браузеры постепенно начинают поддерживать широко распространенные стандарты использования.
Рассмотрим способ получения информации ширины и высоты окна браузера, чтобы увидеть разницу между браузерами:
window.innerWidth поддерживается браузерами Firefox, Chrome, Opera, IE 9+ но не поддерживается браузером IE 8 (Или старее), и вам нужно использовать document.documentElement.clientWidth или document.body.clientWidth.

2- Объект window

Объект​​​​​​​ window является самым важным объектом в BOM, он представляет окно браузера и поддерживается всеми браузерами. Все глобальные (global) объекты Javascript, глобальные функции, глобальные переменные являются членами объекта window.
Например, document является глобальным объектом, он является свойством (property) объекта window, вы можете получить к нему доступ через синтаксис window.document или просто document.
var element = window.document.getElementById("someId");

// Same as:

var element = document.getElementById("someId");
Функция  alert("something") является глобальной функцией (global), он является членом объекта window. Поэтому вы можете использовать его следующими способами:

alert("Hello! I am an alert box!!");

// Same as:

window.alert("Hello! I am an alert box!!");
Если вы создаете глобальную переменную, или глобальную функцию, то они являются членами объекта window. Смотрите пример:
global-func-variable-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>Window Example</title>
      <meta charset="UTF-8">

      <script>
         // A Global Variable
         var COPY_RIGHT = "o7planning.org";

         // A Global Function
         function sayHello()  {
             alert("Hello Everyone!");
         }
      </script>

   </head>
   <body>

      <h2>Global Variable, Global Function</h2>

      <button onClick="alert(COPY_RIGHT)">Call alert(COPY_RIGHT)</button>
      <button onClick="alert(window.COPY_RIGHT)">Call alert(window.COPY_RIGHT)</button>

      <br><br>

      <button onClick="sayHello()">Call sayHello()</button>
      <button onClick="window.sayHello()">Call window.sayHello()</button>

   </body>
</html>

 

3- Позиция, размер,..

Свойства (property) для определения размера, позиции ,.. окна браузера:
СвойствоRead OnlyОписание
window.innerHeightYПолучает высоту области содержимого окна браузера. Или это и есть высота вертикальной полосы прокрутки (Если имеется вертикальная полоса прокрутки).
window.innerWidthYПолучает ширину области содержимого окна браузера. Или это и есть ширина горизонтальной полосы прокрутки (Если имеется горизонтальная полоса прокрутки).
window.outerHeightYПолучает высоту за пределами окна браузера.
window.outerWidthYПолучает ширину за пределами окна браузера.
window.screenX
window.screenLeft
YОба данных свойства (property) возвращают  горизонтальное расстояние от левой границы окна просмотра браузера пользователя до левой части экрана.
window.screenY
window.screenTop
YОба данных свойства (property) возвращают  горизонтальное расстояние от верхней границы окна просмотра браузера пользователя до верхней части экрана.
window.scrollX
window.pageXOffset
YВозвращает количество pixel, которые document уже прокрутил по горизонтали.
window.scrollY
window.pageYOffset
YВозвращает количество pixel, которые document уже прокрутил по вертикали.
Например
window-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>Window Example</title>
      <meta charset="UTF-8">



   </head>
   <body>

      <h3>Window example</h3>
      
      <button onClick="showInfos()">Show Infos</button>

       <textarea name="name" style="width:100%;margin-top:10px;"
           rows="8" id="log-area"></textarea>


       <script>
          function showInfos()  {

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

            logArea.value += "window.outerHeight= " + window.outerHeight +"\n";
            logArea.value += "window.innerHeight= " + window.innerHeight +"\n";
            logArea.value += "window.outerWidth= " + window.outerWidth +"\n";
            logArea.value += "window.innerWidth= " + window.innerWidth +"\n";

            logArea.value += "window.screenX= " + window.screenX +"\n";
            logArea.value += "window.screenY= " + window.screenY +"\n";

            logArea.value += "window.scrollX= " + window.scrollX +"\n";
            logArea.value += "window.scrollY= " + window.scrollY +"\n";

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

 
Данные методы помогают изменить размер, позицию,.. окна браузера:

4- window.status

Свойтсво (property) status объекта window помогает вам содержимое текста, отображаемого в строке статуса (В самом низу браузера). Но по причинам безопасности, почти все браузеры отключают данное свойство для JavaScript. Но если пользователь хочет, он может включить (enable) данное свойство для JavaScript, войдя в "Опции" браузера.
Перед тем как нажать на ссылку, пользователь обычно двигает мышь на поверхность ссылки, чтобы просмотреть адрес той ссылки отображенной в строке статуса(status bar), и нажимает на ту ссылку, только когда чувствует, что она безопасна. Некоторые website могут воспользоваться window.status чтобы отобразить поддельное содержание.

5- Window, Frame

Страница может содержать 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) окно в иерархии окон.

window.frameElement

Пример с window.frameElement:
frameElement-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>window.frameElement</title>
      <meta charset="UTF-8">

      <style>iframe {height: 120px; width: 100%}</style>
   </head>
   <body>

      <h3>Main Frame</h3>
      <a href="">Reset</a>
      <p>window.frameElement example</p>
      <p style="color:red;">Note: You need to test this example on a http server. </p>

      <iframe src="frame-a.html"><iframe>

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

      <script>
         function highlightIFrame()  {
             // <iframe> element.
             var iframeElement = window.frameElement;
             if(iframeElement)  {
                iframeElement.style.border="1px solid red";
             }
         }
      </script>
   </head>
   <body>

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

       <button onClick="highlightIFrame()">Highlight IFrame</button>

   </body>

</html>

 

6- Others

СвойствоТолько для чтенияОписание
window.documentYВозвращает ссылку (reference) на document которое содержится в окне браузера.
window.locationYВозвращает ссылку на объект location с информацией про URL у document.
window.locationbarYВозвращает объект locationbar, которое можно увидеть в окне браузера.
window.personalbarYВозвращает объект personalbar, которое можно увидеть в окне браузера.
window.scrollbarsYВозвращает объект​​​​​​​ scrollbars, которое можно увидеть в окне браузера.
window.menubarYВозвращает объект​​​​​​​ menubar, которое можно увидеть в окне браузера.
window.navigatorYВозвращает ссылку на объект​​​​​​​ navigator.
window.screenYВозвращает ссылку на объект​​​​​​​ screen ассоциирумое с окном браузера.
window.statusbarYВозвращает объект​​​​​​​ statusbar, которое можно увидеть в окне браузера.
window.toolbarYВозвращает объект​​​​​​​ toolbar, которое можно увидеть в окне браузера.
window.visualViewportYВозвращает объект​​​​​​​ VisualViewport представляющее  визуальное окно просмотря (viewport) окна .window.location
СвойствоТолько для чтенияОписание
window.consoleYВозвращает ссылку на объект console, помогает программистам отлаживать (debug) приложение.
window.localStorageYВозвращает ссылку на объект локального хранения (local storage object), он содержит особенные данные, только источник этих данных может получить доступ к данным, которые он создает.
window.sessionStorageYВозвращает ссылку на объект хранения сеанса  (session storage object), содержит данные сущесвтующие в жизненном цикле страницы. Если страница закрывается, эти данные будут удалены.
window.historyYВозвращает ссылку на объект ​​​​​​​history.
window.customElementsYВозвращает ссылку на объект ​​​​​​​CustomElementRegistry, которое может использоваться для регистрации кастомизированных элементов и получить информацию предыдущих зарегистрированных кастомизированных элементов.
window.cryptoYВозвращает объект браузера crypto.
window.performanceYВозвращает объект​​​​​​​ Performance (Эффективность), включая свойства (property) времени и навигации (navigation), каждое свойство является объектом предоставляющим данные связанные с эффективностью.
window.returnValue
Когда окно (или dialog) закрывается, оно может прикрепить значение к window.returnValue, и другие окна могут использовать данное значение.
Maybe you are interested

Это онлайн курс вне вебсайта o7planning, который мы представляем, он включает бесплатные курсы или курсы со скидкой.