Conversation

Your input fuels progress! Share your tips or experiences on prioritizing mental wellness at work. Let's inspire change together!

Join the discussion and share your insights now!

Comments 0

Sharpen your coding skills—try JavaScript challenges on TOOLX now!

advertisement

Browser Objects in JavaScript - Complete Guide

browser objects in javascript

Browser Objects

Apart from built-in objects, Java Script also provides objects to access and manipulate various aspects of a Web browser. These objects are called browser objects. They exist on all pages displayed in the browser and correspond to elements on a page.

For example, browser objects allow accessing various browser characteristics, such as the browser window itself, browser history, changing the current URL, and moving backward and forward in the browser.


1. Window Object:

The window object is the top-level object in the JavaScript hierarchy. This means that all the objects in the hierarchy are descendants of the window object. The window object represents a browser window. It contains browser information, such as the look and feel of the browser, its version, and so on.

The window object provides properties that allow setting default text for the status bar, the browser window's name, retrieving history, and so on

Lists some of the commonly used properties of the window object.

  • DefaultStatus: Specifies or retrieves the default text to be displayed in the status bar of the browser window.
  • Document: Represents an HTML document that contains different elements.
  • History: Contains the history of the visited Uniform Resource Locators (URLs).
  • Location: Contains the content of the specified URL.
  • InnerWidth: Specifies the inner width of the window's content area.
  • InnerHeight: Specifies the inner height of the window's content area.


The window object provides methods that allow displaying error messages, confirmation boxes, and so on.

Lists the methods of the window object.

  • alert (): Displays an alert box that states the message and an OK button.
  • confirm (): Prompts a dialog box that displays a message with the OK and Cancel buttons.
  • createPopup (): Creates a pop-up window.
  • focus (): Focuses the current window.
  • open (): Opens the specified file in a new browser window.
  • prompt (): Prompts a dialog box that accepts input from the user.


The methods of the window object.

<script>
// Displaying an alert box
window.alert("Hello! This is an alert from the window object.");

// Logging information to the console
window.console.log("This message is logged using the console method.");

// Asking for confirmation
let isConfirmed = window.confirm("Do you confirm this action?");
if (isConfirmed) {
    console.log("User confirmed the action.");
} else {
    console.log("User canceled the action.");
}

// Prompting user input
let userName = window.prompt("Please enter your name:");
if (userName) {
    console.log("Hello, " + userName + "!");
} else {
    console.log("User did not enter a name.");
}

// Redirecting to another page
// window.location.href = "https://example.com";
</script>


2. History Object:

The history object is part of the window object. It contains a set of URLs visited by a user in a browser window. The history object is an array that allows referring to a particular URL by specifying its index number in the array. The length property allows you to determine the number of URLs in the history list.

Lists the methods of the history object.

  • back (): Retrieves and displays the previous URL from the history list.
  • forward (): Retrieves and displays the next URL from the history list.
  • go (): Displays the specified URL. It accepts a parameter, which can either be a string or a number to go to a specific page.


Note - Although the navigator object also exists and can be used to retrieve information about a browser, the information is not accurate and cannot be relied on. For example, the appName property of the navigator object returns 'Netscape' for all browsers regardless of their actual name.


3. Location Object:

The location object allows you to access complete information about the URL loaded in the browser window. It is part of the Window object. A single URL is composed of different portions, such as the hostname, port number, and so on which can be accessed through the location object.

Lists the properties and methods of the location object.

  • Host: Retrieves the hostname and port number of the URL.
  • href: Specifies or retrieves the entire UR.
  • pathname: Specifies or retrieves the path name of the URL.
  • protocol: Specifies or retrieves the protocol of the URL.
  • assign (): Loads a new document with the specified URL.
  • reload(): Reloads current document by again sending a request to the server.
  • replace (): Overwrites URL history for the current document with the new document.


The use of a location object to retrieve different portions of the specified URL.

<script>
// Display the entire URL
console.log("Full URL: " + window.location.href);

// Get the protocol (e.g., http or https)
console.log("Protocol: " + window.location.protocol);

// Get the hostname (e.g., www.example.com)
console.log("Hostname: " + window.location.hostname);

// Get the port (e.g., 80, 443)
console.log("Port: " + window.location.port);

// Get the pathname (e.g., /path/to/page)
console.log("Pathname: " + window.location.pathname);

// Get the search/query string (e.g., ?id=123)
console.log("Search Query: " + window.location.search);

// Get the hash (e.g., #section1)
console.log("Hash: " + window.location.hash);
</script>


JavaScript Browser objects objects javascript browser objects browser objects in javaScript window objects in javascript history objects in javascript location objects in javascript

advertisement