The Browser Object Model (BOM)

In this tutorial you will learn JavaScript BOM featutes to interact with browser.

The Browser Object Model (BOM) is the core of JavaScript on the web. BOM allows JavaScript to "talk to" the browser.

Window Object

The window object exposes the functionality of the web browser to the webpage.

Window size

The window object has four properties related to the size of the window:

The innerWidth and innerHeight properties return the size of the page viewport inside the browser window (not including the borders and toolbars).

The outerWidth and outerHeight properties return the size of the browser window itself.

Also, document.documentElement.clientWidth and document.documentElement.clientHeight properties indicate the width and height of the page viewport.

 
const width = window.innerWidth;
alert(width);

Open a new window

We can use the window.open() method yo open a new window or tab.

The window.open() method accepts three arguments: the URL to load, the window target and a string of window features.

The URL isOptional.The URL of the page to open. If no URL is specified, a new blank window/tab is opened.

The window target is also optional. values are supported are : "_blank", "_self", "_parent", "_top", or the name of the window

window features are also optional. A comma-separated list of items are supported, like fullscreen=yes|no|1|0, height=pixels, width=pixels, top=pixels, left=pixels, location, menubar, resizable, scrollbars, status, titlebar.

 
<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  window.open("https://www.srirep.in");
}
</script>

Resize a window

To resize a window you use the resizeTo() and resizeBy() method of the window object.

 
function openWin() {
  myWindow = window.open("", "", "width=200, height=100");
}

function resizeWin() {
  myWindow.resizeTo(300, 300);
}

Close a window

To close a window, you use the window.open() method.

 
let myWindow;

function openWin() {
  myWindow = window.open("", "myWindow", "width=200, height=100");
}

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

Window alert() method

The alert() method displays an alert box with a message and an OK button. The alert() method is used when you want information to come through to the user.

 
window.alert("Hello!");
// alert("Hello!")

Window prompt() method

The prompt() method displays a dialog box that prompts the user for input. The prompt() method returns the input value if the user clicks "OK", otherwise it returns null.

 
prompt("Enter your name.");

Window confirm() method

The confirm() method displays a dialog box with a message, an OK button, and a Cancel button. The confirm() method returns true if the user clicked "OK", otherwise false.

 
confirm("Press a button!");

Window setTimeout() method

The setTimeout() method sets a timer and executes a callback function after the timer expires. The setTimeout() method calls a function after a number of milliseconds.Use the clearTimeout() method to prevent the function from starting.

 
const myTimeout = setTimeout(myGreeting, 5000);

Window clearTimeout() method

The clearTimeout() method clears a timer set with the setTimeout() method.

 
clearTimeout(myTimeout);

Window setInterval() method

The setInterval() method calls a function at specified intervals (in milliseconds).

 
setInterval(myGreeting, 1000);

Window setInterval() method

The setInterval() method calls a function at specified intervals (in milliseconds).

 
setInterval(myGreeting, 1000);

Window clearInterval() method

The clearInterval() method clears a timer set with the setInterval() method.

 
clearInterval(myGreeting);