Javascript Browser Object Model

Code Snippets Browser Object Model
Share:

About

In this code snippet, we’ll learn how to access the browser object model(BOM) with Javascript.

We can use the BOM to interact with the browser itself and get information like screen resolution, window size, OS, language, … We can also open/close windows/tabs, navigate back/forward in history.

Note: There are too many properties in the window object to cover here. Consult the MDN documentation for anything more specific.

Let’s see some examples below.

Code:

//Page//////////////////////////////////// 
//All properties: https://developer.mozilla.org/en-US/docs/Web/API/Window
window.open(); //Opens new tab.
window.close(); //Closes tab.

//window.navigator////////////////////////
//All properties: https://developer.mozilla.org/en-US/docs/Web/API/Navigator
console.log(window.navigator.appName);
console.log(window.navigator.appCodeName);
console.log(window.navigator.platform);
console.log(window.navigator.userAgent);

//window.location.///////////////////////
//All properties: https://developer.mozilla.org/en-US/docs/Web/API/Window/location
console.log(window.location.href);
console.log(window.location.hostname);
console.log(window.location.pathname);
console.log(window.location.protocol);
window.location.reload(); //Reloads page.

//window.history/////////////////////////
//All properties: https://developer.mozilla.org/en-US/docs/Web/API/Window/history
window.history.back() //One page back.
window.history.forward(); //One page forward.


//window.Screen/////////////////////////
//All properties: https://developer.mozilla.org/en-US/docs/Web/API/Window/screen
console.log(window.screen.width);
console.log(window.screen.height);
console.log(window.screen.pixelDepth);
Share:

Leave a Reply

Your email address will not be published.

The following GDPR rules must be read and accepted:
This form collects your name, email and content so that we can keep track of the comments placed on the website. For more info check our privacy policy where you will get more info on where, how and why we store your data.

Advertisment ad adsense adlogger