window, location, history, and screen Objects

Introducing the Browser Object Model

• The Browser Object Model (BOM) is an API that provides JavaScript with access to the various properties and methods of the browser window.
• The DOM is at the page level; the BOM is at the browser level.
• The BOM existed first as a de facto standard, since much of it was first introduced in an early version of the Netscape browser and subsequent browsers have supported it. If new browsers dropped support a lot of existing pages would break.
• As the years passed, the Web Hypertext Application Technology Working Group (WHATWG) authored a living standard that included these objects.
• If you check your browser preferences there is invariably a section related to JavaScript that lists BOM properties / methods that you can prevent JavaScript from accessing.
  • For example, you could prevent windows from being moved or resized via JavaScript.

The window Object

• While ECMAScript does not specify what the global object (the object that contains all functions and variables in your code) should be, in web browsers this is window and represents the browser window.
• Every global variable is located directly below that global object.
• A global variable named testVariable is accessible via window.testVariable or simply via testVariable, because the JavaScript interpreter will move up the object tree until it reaches the very top (which is window).
• If it moves all the way up to window and cannot find a match then an error is thrown.
• Most of the time window does not need to be listed, because the object lookup occurs.
  • This is a tradeoff between streamlining code (omitting window reduces code) and performance (moving up the object tree takes time).
  • Although rare, it is possible that omitting window for methods will lead to code behaving in unanticipated ways. Those are cases where an object you encounter along the way to window has a method with the same name. Typically this is the document object.
  • One other consideration is code portability - if your JavaScript is going to run in an environment with a different global object, then hard-coding window will very likely break your code.
• self is synonymous with window
• In frames-based layouts window is also synonymous with top and parent. Let's hope you never have to work with frames.
• Every browser window, frame, and iframe has its own separate window object.

Object Hierarchy

The object hierarchy for the Browser Object Model is:

• window
  • document
  • history
  • location
  • navigator
  • screen

window Object Properties and Methods

Additional Considerations with Timeouts / Intervals

• JavaScript runs as a single process / thread in the browser.
• That means that the JavaScript interpreter can only do one thing at a time.
• Web Workers are an exception to this, as they run in separate threads that operate in parallel with the main thread where JavaScript is running. We are not exploring Web Workers in this article, so the rest of these considerations deal with the main thread JavaScript.
• Timeouts and intervals are scheduled on a timeline out into the future that reflects, at best, an approximate time when they will occur.
• If something else is occupying the main thread JavaScript interpreter at the moment when a timeout or interval elapses, whatever needs to happen when that timer expires will be delayed until the interpreter can get to it. The function will be called eventually, but it will not be at precisely the moment desired.
• Even under good conditions expect the code to execute 10 - 100 milliseconds after the timer has elapsed.
• Any JavaScript dialog box, such as alert(), confirm(), or prompt(), will also freeze the timeline until those are addressed by the user, so all timers are frozen until those are handled.
• From a performance perspective it is faster to call a function than to pass a string, because the function can be optimized during compilation and the string being passed cannot be optimized.

window Events

Attributes for window.open()

• The third parameter passed to window.open() is a list of the attributes controlling the window's location and appearance, separated by commas.
• These can be included in any sequence and not all need to be specified.
• Make sure that there are no spaces between attributes and that only one set of quotation marks (either single or double) encloses all the attributes.
• Keep in mind that it is very annoying if an overly large window opens up and its edges are off the side of the user's monitor or viewport. That is a major blow to the user experience.
• Think carefully before disabling location, scrollbars, and resizable, again due to usability concerns.

Opening New Windows

While CodePen is the preferred environment for hosting code examples for this website (because it allows for the examples to be edited), working with new windows doesn't work well with their architecture.

That is why the code is shown here and is hosted on this domain instead.

Structure (new_window.html)

<!DOCTYPE html>
<html lang="en-us">
<head>
  <title>Opening New Windows</title>
  <meta charset="utf-8" />
</head>
<body>
<ul>
  <li><a href="https://www.google.com">Google</a></li>
  <li><a href="https://www.amazon.com" class="nWin">Amazon</a></li>
  <li><a href="https://www.indeed.com">Indeed</a></li>
</ul>

<script src="new_window.js"></script>
</body>
</html>

Behavior (new_window.js)

"use strict";

const openNew = {

  theBody : document.getElementsByTagName('body')[0],

  // attributes for new windows
  params : 'top=5,left=5,width=400,height=400,scrollbars=1,resizable=1,location=1',

  init : function() {
   
    this.theBody.addEventListener('click', this.openIt, false);

  },
  
  openIt : function(evt) {
    
    // pinpoint the anchor clicked
    const linkClicked = openNew.findTarget(evt, 'a', this);  
   
    // stop if an anchor was not clicked or the anchor lacks the 'nWin' class
    if (!linkClicked || !linkClicked.classList.contains('nWin')) { return; }
    
    // shut down the default behavior of the anchor
    // without this the existing window also changes its address
    evt.preventDefault();
    
    // open the new window
    window.open(linkClicked.href, '_blank', openNew.params);
    
  },

  findTarget : function(evt, targetNode, container) {
    let currentNode = evt.target;
    while (currentNode && currentNode !== container) {  
      if (currentNode.nodeName.toLowerCase() === targetNode.toLowerCase()) { 
        return currentNode; }
      else { currentNode = currentNode.parentNode; }     
    }
    return false;
  }

}

openNew.init();

See how this new window example renders

Communicating Across Windows

Two examples are provided, showing different approaches. The first example uses DOM references for updating one window's content based on information from another window.

The second example uses postMessage() for passing information.

The examples are again hosted on this domain rather than CodePen, as their architecture doesn't work well with cross-window communication.

Example #1: window.opener and DOM Lookups

Structure of Starting Page (cross_window.html)

<!DOCTYPE html>
<html lang="en-us">
<head>
  <title>Communicating Across Windows</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="cross_window.css" />
</head>
<body>

<form method="post" action="">
  <label for="language">Select a language:</label>
  <span id="lang_holder"></span>
  <input type="button" id="language" value="Choose..." />
</form>

<script src="cross_window.js"></script>
</body>
</html>

Structure of Popup Page (language_list.html)

<!DOCTYPE html>
<html lang="en-us">
<head>
  <title>Language List</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="cross_window.css" />
</head>
<body>

<table id="language_list">
<thead>
<tr>
  <th scope="col">Language</th>
  <th scope="col">Full Name</th>
  <th scope="col">Side</th>
</tr>
</thead>
<tbody>
<tr>
  <td scope="row"><a href="#">HTML</a></td>
  <td>Hypertext Markup Language</td>
  <td>Client</td>
</tr>
<tr>
  <td scope="row"><a href="#">CSS</a></td>
  <td>Cascading Style Sheets</td>
  <td>Client</td>
</tr>
<tr>
  <td scope="row"><a href="#">JavaScript</a></td>
  <td>JavaScript</td>
  <td>Client</td>
</tr>
<tr>
  <td scope="row"><a href="#">PHP</a></td>
  <td>PHP: Hypertext Preprocessor</td>
  <td>Server</td>
</tr>
</tbody>
</table>

<script src="cross_window.js"></script>
</body>
</html>

Presentation for Both Pages (cross_window.css)

body, input {font: 75% verdana, sans-serif;}
input {font-size: 100%;}
table {border-collapse: collapse;}
td, th {padding: 1em; text-align: left; vertical-align: top; border: 1px solid #000;}
#lang_holder {padding-right: 2px;}

Behavior for Both Pages (cross_window.js)

"use strict";

const crossWindow = {

  // depending on which of these element nodes is found
  // we know which page we are on
  languageButton : document.getElementById('language'),
  languageList : document.getElementById('language_list'),

  // attributes for new windows
  params : 'top=40,left=40,width=500,height=500,scrollbars=1,resizable=1,location=1',

  init : function() {
    
    // if we are not on the correct page languageButton is null
    if (this.languageButton) {
      
      this.languageButton.addEventListener('click', this.openWin, false);
    
    }

    // if we are not on the correct page languageList is null    
    else if (this.languageList) {
    
      this.languageList.addEventListener('click', this.passValueBack, false);
    
    }
   
  },
  
  openWin : function() {
        
    // open the new window and have a variable referencing it
    const newWindow = window.open('language_list.html', '_blank', crossWindow.params);
    
    // give the new window focus, on the off chance something put it
    // into the background
    newWindow.focus();
    
  },
  
  passValueBack : function(evt) {
  
    const linkClicked = crossWindow.findTarget(evt, 'a', this);
    
    if (!linkClicked) { return; }
    
    // pinpoint the span element node in the other window
    const holder = window.opener.document.getElementById('lang_holder');
    holder.innerHTML = linkClicked.firstChild.nodeValue;
    
    // shut down the new window
    window.close();

    // shut down the href of the anchor clicked
    evt.preventDefault();
  
  },

  findTarget : function(evt, targetNode, container) {
    let currentNode = evt.target;
    while (currentNode && currentNode !== container) {  
      if (currentNode.nodeName.toLowerCase() === targetNode.toLowerCase()) { 
        return currentNode; }
      else { currentNode = currentNode.parentNode; }     
    }
    return false;
  }

}

crossWindow.init();

See how this first cross window example renders

Example #2: window.opener and postMessage()

The structural markup and the CSS have remained the same (other than altering CSS and JS file names).

Revised JavaScript (post_message.js)

"use strict";

const crossWindow = {

  // depending on which of these element nodes is found
  // we know which page we are on
  languageButton : document.getElementById('language'),
  languageList : document.getElementById('language_list'),
  languageHolder : document.getElementById('lang_holder'),

  // attributes for new windows
  params : 'top=40,left=40,width=500,height=500,scrollbars=1,resizable=1,location=1',

  init : function() {
    
    // if we are not on the correct page languageButton is null
    if (this.languageButton) {
      
      this.languageButton.addEventListener('click', this.openWin, false);
    
    }

    // if we are not on the correct page languageList is null    
    else if (this.languageList) {
    
      this.languageList.addEventListener('click', this.generateMessage, false);
    
    }

    // listen for post messages
    window.addEventListener("message", this.updateText, false);
   
  },

  // the data property of this event contains the text of the message
  updateText : function(evt) {

    if (crossWindow.languageHolder) {

      crossWindow.languageHolder.innerHTML = evt.data;

    }

  },
  
  openWin : function() {
        
    // open the new window and have a variable referencing it
    const newWindow = window.open('language_list.html', '_blank', crossWindow.params);
    
    // give the new window focus, on the off chance something put it
    // into the background
    newWindow.focus();
    
  },
  
  generateMessage : function(evt) {
  
    const linkClicked = crossWindow.findTarget(evt, 'a', this);
    
    if (!linkClicked) { return; }

    const theMessage = linkClicked.firstChild.nodeValue;

    // send the message to the opening window
    // for security reasons the domain must match what is specified
    window.opener.postMessage(theMessage, "https://learningtocode.info");
    
    // shut down the new window
    window.close();

    // shut down the href of the anchor clicked
    evt.preventDefault();
  
  },

  findTarget : function(evt, targetNode, container) {
    let currentNode = evt.target;
    while (currentNode && currentNode !== container) {  
      if (currentNode.nodeName.toLowerCase() === targetNode.toLowerCase()) { 
        return currentNode; }
      else { currentNode = currentNode.parentNode; }     
    }
    return false;
  }

}

crossWindow.init();

See how this second cross window example renders

location Object Properties and Methods

• This object represents the address currently being accessed.
• You must reference location as part of these properties and methods.
• Note that some of the properties for this object are read-only.
• A generic representation of the location is:

  protocol://host:port/pathname#hash?search

• In detailing the properties this URL will be used:

  https://learningtocode.info/js/?p=bom-window#evts

history Object Properties and Methods

This object provides very limited access to the browser's history data and some history-related functionality.

The History API

• There is also a History API that allows you to store a lot of data about a given URL variation in a state object.
• This is used extensively in single-page web applications and the URL variations are generally the hash value changing.
• I have used this in filtered product search results (there were around 10 filters that could be used in varying combinations):
  • The hash changed each time a filter was added or removed
  • The state (basic info about the results; the product id / name / image path, as well as the state of the filters in play) was saved with that new URL variation.
  • As the user hit the browser back button the hash would change and I would load the previous results and restore the filter selections.
  • Without that setup the back button would have taken the user directly out of the filtered product results, and delving into a product and then hitting the back button would have lost all the filters.
  • This also alleviated the need to hit the database again to determine the matches, because the state objects held the product info.
  • If there was no data stored for a given hash, then the results were fetched from the database.
  • This setup allowed for a remarkably fast search / filter from a dataset with millions of products.
• Read more about working with the History API.

screen Object Properties

• This object provides information about the user's computer screen. This information is often used by web analytics (it is stored in order to learn more about user settings).
• Unfortunately, this is not very useful unless you are altering the layout based on resolution.