BOM (Browser Object Model) In Javascript

Introduction:

The Browser Object Model allows JavaScript to access several pieces of information about a browser including history, screen size, location, and cookies. The Document Object is made up of objects used to modify the documents’ properties and methods loaded into the browser window.

Some of the important BOM(Browser Object Model) objects:

• window
• window.screen
• window.history
• Window.location
• window.navigator

1. Window object:
   The window object is a representation of the browser’s window. The window object includes all of the global JavaScript objects as members.Window object method:-
   alert(): The browser can invoke a system dialog to display information to the user.
Ex: alert(“Hello, Welcome Back”);getComputedStyle(): This method returns an object containing the values of all CSS properties of an element.
Ex: Var fontFamily=
getComputedStyle(document.getElementsByClassName
('btnstyle')[1]) .getPropertyValue('font-family');

   Window object Properties:
   inner width:
Ex:let width = window.innerWidth;
Window History Object
let length = window.history.length;

2. Window.history
   The history object represents a user’s web browsing history as an array of the URLs that the user visited.There are three ways to switch between pages in the history stack using the history object:
   • back()
   • forward()
   • go()

   back(): The previous URL will be displayed using this technique. This functionality will be the same as using the browser’s back button.
   EX:window.history.back();

   forward(): This method will open the next URL in the browser history.
   EX: window.history.forward()

   go(): This method will open the specific URL in the browser history.
   EX:
   <button id=”cancelchanges” onclick=”return CancelChanges()” ;>
   Cancel
   </button>
   //To Step Back to the previous Page:
   function CancelChanges()
   {
   window.history.go(-1);
   return false;
   }
   //To Refresh Page
   window.history.go(0);

3. Window.screen: Javascript window screen object contains information about the user’s screen. This object provides information about the user’s display outside the browser window, including pixel width and height.
   screen.width– This property will return the width of the user’s screen in pixels.
   Ex: var width = screen.width;screen.height– This property will return the height of the user’s screen in pixels.
   Ex: var height = screen.height;
4. Window.location: The location object, like the document, history, and screen objects, is a property of the window object that contains the relevant information about the available URL.EX: Onclick button moves the user to a specific URL
   <button id="Moveuser" onclick="Moveuser()" ;>
Back
</button>
function Moveuser()
{
//relativePath
window.location=”/homepage”;
}window.location.href: This property will return the URL of the current webpage.
   EX:
   <button type="button" onclick="getURL();">Get Page URL</button>
function getURL() {
alert("The URL of this page is: " + window.location.href);
}
   Window.location.reload:
   EX: Click button user gets the first warning and on click on ok button page is reloaded
   <button id="Moveuser" onclick="refreshpage()" ;>ReloadPage</button>
function refreshpage()
{
swal({
title: "warning",
text: "do you really want to refresh the page”,
type: "warning",
icon: "warning",
}, function () {
location.reload();
});
}
5. Window.navigator: It will contain information about the visitor’s browser.
   navigator.appCodeName: The appName property returns the application name of the browser:
   Ex: var appname=navigator.appName;navigator.onLine: The navigator.onLine property to detect whether the browser is online or offline.Ex:
   <button type="button" onclick="checkConnectionStatus();">Check Connection Status</button>
function checkConnectionStatus() {
if(navigator.onLine) {
alert("Application is online.");
} else {
alert("Application is offline.");
}}

   Ex: click the browser back button it will reload the page:

   window.addEventListener("pageshow", function (event) {
var historyTraversal = event.persisted ||
(typeof window.performance != "undefined" &&
window.performance.navigation.type === 2);
if (historyTraversal) {
window.location.reload();
}
});

Microsoft Windows 10 is a widely used operating system in computers all over the world. If you have skills in Microsoft Windows 10 then you can get a Windows 10 Certification from StudySection which can help you in getting hired. A beginner level certification exam for newbies and an advanced level certification exam for experts is available on StudySection.

Share this...

Facebook

Twitter

Linkedin