JAVASCRIPT WINDOW

What is Javascript BOM?

BOM Stands for Browser Object Model. BOM is an object structure created by a browser for any webpage. It is a hierarchy of browser objects which allow javascript to interact with browsers. With BOM you can work with everything except the document.

Javascript window

The window object represents the frame or window in which the webpage is contained in the browser. The window object is a Global object, its properties and functions can be accessed without referring to it. Example: window.alert() is used to alert something but we can directly use alert() without referring to window object.

The window is the root object, even the document is the property of the window object. it can be used to find out screen height, screen width, history, localStorage, location, events etc.

Everything that is visible and non-visible on a webpage all are part of the window.

// Both are same
  window.alert("Page Loaded!");
  alert("Page Loaded!");

  // Both are same
  window.console.log("Hello World!");
  console.log("Hello World!");

  // Both are same
  window.document.getElementById("id1");
  document.getElementById("id1");

window Size

The window object has 4 different properties to get the height and width of the window.

Two properties represent inner dimensions of window :

innerHeight
innerWidth

To use this property use it with a window object, see in the example.

<p id="output"></p>
<button onclick="show()">Show inner window size</button>

<script>
  function show() {
    var height = window.innerHeight;
    var width = window.innerWidth;
    document.getElementById("output").innerHTML = "Window's InnerHeight = " + height + "<br>" + "Window's InnerWidth = " + width;
  }
</script>

▶ Run the code

The other two properties represent outer dimension of window :

outerHeight
outerWidth

<p id="output"></p>
<button onclick="show()">Show outer window size</button>

<script>
  function show() {
    var height = window.outerHeight;
    var width = window.outerWidth;
    document.getElementById("output").innerHTML = "Window's outerHeight = " + height + "<br>" + "Window's outerWidth = " + width;
  }
</script>

▶ Run the code

Open a new window using javascript

The window interface has the open() method which loads a new window or new tab on the browser with a given URL.

Syntax:

window.open(URL, windowName [ ,windowFeatures]);

URL: The url address you want to go
windowName: (Optional) window name is given as a target for hyperlinks and forms. However it is not required, window need not to have name
windowFeatures: This contains a comma separated a list of features in form of "name=value". These features includes options such as position, size, weather or not to include toolbar etc.

<button onclick="load()">Load New Window</button>

<script>
  function load() {
    window.open("https://www.tutorialstonight.com", "TutorialsTonight", "innerWidth=500,innerHeight=700,location=yes,scrollbars=yes");
  }
</script>

▶ Run the code

Resize a window

The window interface has resizeTo() method which can resize the size of window to the passed value. Example window.resizeTo(width, height)

var myWindow;

function openNew() {
  myWindow = myWindow = window.open("", "", "innerWidth=100,innerHeight=300");
}

function resizeIt() {
  myWindow.resizeTo(300, 400);
  myWindow.focus();
}

▶ Run the code

Close window

To close a window use close() method referring to the window object which you want to close.

var myWindow;

function openNew() {
  myWindow = myWindow = window.open("", "", "innerWidth=200,innerHeight=300");
}

function closeIt() {
  myWindow.close();
}

▶ Run the code

In the above example we store the reference of the window in myWindow variable and use it as reference to close it.

❮ Prev Next ❯