JavaScript BOM: Browser Objects
The ability to access and alter objects native to the browser environment gives JavaScript its ability and versatility.
The Browser Object Model is a collection of these items. The BOM is a hierarchical collection of objects, each one with useful access attributes and functions. This object basically allows you to communicate with your user's browser.
BOM includes window objects, for example, to display the height and width of the window. It also provides the window.screen object, which displays the screen's height and width.
Example Browser Objects
Use the following lines of code to check a Screen's Height:
<!DOCTYPE html>
<html>
<body>
<script>
document.write("Screen height: " + screen.height);
document.write("<br>Screen height: " + screen.height);
</script>
</body>
</html>
Elements of the Browser Objects Model
The window object that displays the attributes of the currently open window or tab is the BOM's root. It has multiple elements inside it, most of which will be discussed in this section.
There are also other objects, but because of the length of this article, we'll only be looking at only the Window Object. The History Object, Navigator Object, Screen Object, and Document Objects will be discussed in other articles, which I'll post immediately after this. Make sure you check that out.
As I mentioned earlier, the Window object has multiple elements inside it. Let's take a look at these individual elements and a brief description of them.
Document - A collection of all HTML elements from the current page.
Frames - All frames that are embedded in the current page.
History - A list of sites viewed during the current session.
Location - Saves the current page's URL.
Navigator - Saves data about the browser as well as the operating system that is being used.
Screen - Displays the computer or device properties of the user.
Methods of Javascript window object
The following are the most significant window object methods:
| Method | Description |
| open() | creates a new window. |
| close() | terminates the current window. |
| alert() | shows an alert box with a message and an OK button. |
| prompt() | shows a dialog window to get user input. |
| confirm() | shows the confirm dialog box, which includes a message, an OK button, and a cancel button. |
| setTimeout() | performs an action after a defined time, such as evaluating expressions or running a function. |
Javascript Window Object
JavaScript Window Object's main purpose is for controlling the lifecycle of the Browser Objects and execute different operations on it.
Our JavaScript code includes a global variable window that symbolizes the current browser window that the code is running and can be accessed directly by using the window literal.
It is a window that contains a webpage, which is expressed by the document object. A window could be a new tab, a frameset, an individual Js frame, or a new window.
A window object symbolizes a single tab in a multi-tab browser, but certain of its attributes, such as innerWidth and innerHeight, and methods, such as resizeTo(), influence the entire browser window.
A Js window object showing that tab or window is produced automatically when you open a new window/tab.
A window object's attributes are used to access information about the currently active window, and its methods are used to do particular operations such as maximizing, opening, reducing the window, and so on.
Let's utilize the window object to conduct various actions and observe how it works to better understand it.
1. Window Size
The window object contains four characteristics relating to window size:
- The innerHeight and innerWidth attributes return the size of the browser window's page viewport (excluding the toolbars and borders).
- The outerHeight and outerWidth parameters return the height and width of the browser window.
To determine the size of the window, use the following code:
const height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
2. Opening a New Window
Let's utilize the open() function of the JavaScript window object to open a new window. This function generates a new window but also returns an object that may be used to manage it.
<!doctype html>
<head>
<title>Opening a new Window</title>
</head>
<body>
<h3>Click this to open a new Window:</h3>
<button onclick="createWindow()">Open a New Window</button>
<p id="result"></p>
<script>
function createWindow() {
let url = "https://hubtolearn.com";
let win = window.open(url, "A New Window", "width=300, height=200");
document.getElementById("result").innerHTML = win.name + " - " + win.opener.location;
}
</script>
</body>
</html>
In the above code, we used the open() function to create a new window from the window object of the old window. We may specify the URL to be displayed in the new window (or leave it blank), the window's name, and the height and width of the window to be generated in the open() function.
Window Object Open () Method - The Syntax
let newWindow = window.open(url, windowName, [windowFeatures]);
While opening a new window, we may supply as many attributes as we wish.
When the open() function is called, it returns the window object reference for the newly generated window, which you can then give to a variable, as we did in the example above. The result is returned by the window.open() function has been allocated to the win variable.
Then we utilized the win variable to gain access to the new window, such as retrieving the name of the window, the position of the window that opened the new window, and so on.
3. Getting a Window's Dimensions
We can retrieve the width and the height of any window by utilizing the built-in attributes of the Js window object.
We may also open the document object via a window object, which allows us access to the HTML document, allowing us to add new HTML elements or write text to it.
<!doctype html>
<head>
<title>Place Content in Window</title>
</head>
<body>
<script>
let w = window.outerWidth
let h = window.outerHeight
window.document.write("Width and height of the window are: "+w+" and "+h)
</script>
</body>
</html>
