Javascript Window Tutorial with Examples

What is BOM?
Window object
Position, size, ..
window.status
Window, Frame
Others

1. What is BOM?

Brower Object Model - BOM includes properties, methods provided by brower so that JavaScript can interact with the browser.

Many browsers exist at the same time such as Firefox, Chrome, IE, Opera,.. Each browser has its own standard, therefore, BOMs are slightly different for different browsers. There is no official standard for BOM. Fortunately, new browsers gradually support the widely used standards.

Let's see how to take information about width and height of the browser window to see the difference between browsers:

window.innerWidth is supported by the browsers such as Firefox, Chrome, Opera, IE 9+ but not by the IE 8 browser (or older), and you have to use document.documentElement.clientWidth or document.body.clientWidth.

2. Window object

The window object is the most important object in BOM. It represents the browser window and is supported by all browsers. All global Javascript objects, global functions, global variables are the members of the window object.

For example, document is a global object. It is an property of the window object. You can access it via window.document syntax or simply document.

var element = window.document.getElementById("someId");

// Same as:

var element = document.getElementById("someId");

The alert("something") function is a global function. It is a member of the window object. Therefore, you can use it under the following ways:

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

// Same as:

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

If you create a global variable, or a global function, they are members of the window object. See example:

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. Position, size, ..

Properties for determining size, position, ... of browser window:

Property	Read Only	Description
window.innerHeight	Y	Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.
window.innerWidth	Y	Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.
window.outerHeight	Y	Gets the height of the outside of the browser window.
window.outerWidth	Y	Gets the width of the outside of the browser window.
window.screenX window.screenLeft	Y	Both properties return the horizontal distance from the left border of the user's browser viewport to the left side of the screen.
window.screenY window.screenTop	Y	Both properties return the vertical distance from the top border of the user's browser viewport to the top side of the screen.
window.scrollX window.pageXOffset	Y	Returns the number of pixels that the document has already been scrolled horizontally.
window.scrollY window.pageYOffset	Y	Returns the number of pixels that the document has already been scrolled vertically.

Example:

https://ex1.o7planning.com/javascript/window/window-example.html

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>

Methods help change the size, position, .. of the browser window:

4. window.status

The status property of the window object help you establish a content of text shown on he status bar (The bottom of the browser). However, for security reasons, most browsers disable this feature for JavaScript. However, if an user wants, they are able to enable this feature for JavaScript by entering the "Options" of the browser.

Before clicking on a link, users often move the mouse over the link's surface to preview its address displayed in the status bar, and only click this link when they feel safe. Some websites may take advantage of window.status to display a fake content.

5. Window, Frame

A page may contain Frames, and a Frame may contain other Frames, which form a hierarchy of Frames.

Property	Read Only	Description
window.name		Gets/sets the name of the window.
window.frameElement	Y	Returns the element in which the window is embedded, or null if the window is not embedded.
window.frames	Y	Returns an array of the frames in the current window.
window.length	Y	Returns the number of frames in the window. See also window.frames.
window.parent	Y	Returns a reference to the parent of the current window or subframe.
window.self	Y	Returns an object reference to the window object itself.
window.opener	Y	Returns a reference to the window that opened this current window.
window[0], window[1], etc.	Y	Returns a reference to the window object in the frames. See window.frames for more details.
window.top	Y	Returns a reference to the topmost window in the window hierarchy. This property is read only.

window.frameElement

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

Property	Read Only	Description
window.document	Y	Returns a reference to the document that the window contains.
window.location	Y	Returns a reference to the location object containing the URL information of the document.
window.locationbar	Y	Returns the locationbar object, whose visibility can be toggled in the window.
window.personalbar	Y	Returns the personalbar object, whose visibility can be toggled in the window.
window.scrollbars	Y	Returns the scrollbars object, whose visibility can be toggled in the window.
window.menubar	Y	Returns the menubar object, whose visibility can be toggled in the window.
window.navigator	Y	Returns a reference to the navigator object.
window.screen	Y	Returns a reference to the screen object associated with the window.
window.statusbar	Y	Returns the statusbar object, whose visibility can be toggled in the window.
window.toolbar	Y	Returns the toolbar object, whose visibility can be toggled in the window.
window.visualViewport	Y	Returns a VisualViewport object which represents the visual viewport for a given window.
Property	Read Only	Description
window.console	Y	Returns the reference to the console object, which helps programmers debug the application.
window.localStorage	Y	Returns a reference to the local storage object, which contains special data, that only the origin of this data can access the data it creates.
window.sessionStorage	Y	Returns a reference to the session storage object, containing data that exists in the life of a page. If the page is closed, this data will be removed.
window.history	Y	Returns a reference to the history object.
window.customElements	Y	Returns a reference to the CustomElementRegistry object, which can be used to register new custom elements and get information about previously registered custom elements.
window.crypto	Y	Returns the browser crypto object.
window.performance	Y	Returns a Performance object, which includes the timing and navigation properties, each of which is an object providing performance-related data.
window.returnValue		When a window (or a dialog) is closed, it can assign a value to window.returnValue, and other windows can use this value.