In this blog I am going to explain what you mean by Browser Object Model and various methods to access and manipulate the Browser objects.
BOM (Browser Object Model)
Modern browsers have implemented some methods and properties for JavaScript interactivity, it is often referred to, as methods and properties of the BOM. It is nothing but a pack of objects that allow to control the browser, e.g access browsing history, open a new window, get the current page address (URL) and to redirect the browser to a new page etc.
1. Window Object
It represents the browser’s window. Window is the object of the browser, it is not the object of javascript.
The window object has got some methods. A method is a line of code that which when used in a program will do a particular job. We can use a method of an object by giving a dot (.) followed by the method name.
Various window methods are as follows:
A. window.open() –
It will open a new browser window depending upon the url we will give. For Example:
<!DOCTYPE html>
<html>
<body>
<button onclick="main()">Click it</button>
<script>
function main() {
window.open("https://www.admecindia.co.in/");
}
</script>
</body>
</html>
B. window.close() –
It will close the current window. In the below example, we have created two buttons. Open and Close. Clicking on Open button will open a blank window as we have not given any link. Clicking on Close will close the open window.
<!DOCTYPE html>
<html>
<body>
<button onclick="openWin()">Open "myWindow"</button>
<button onclick="closeWin()">Close "myWindow"</button>
<script>
var myWindow;
function openWin() {
myWindow = window.open("", "myWindow", "width=300, height=200");
}
function closeWin() {
myWindow.close();
}
</script>
</body>
</html>
C. window.moveTo(), window.resizeTo() & window.focus()–
moveTo will move the current window as per the given co-ordinates whereas resizeTo will change the size(i.e. width and height) of the window as per the given values. Focus method will set the focus to the current window. For example:-
<!DOCTYPE html>
<html>
<body>
<button onclick="openWin()">Open window</button>
<button onclick="resizeWin()">Resize Window</button>
<button onclick="moveWin()">Move Window"</button>
<script>
var myWindow;
function openWin() {
myWindow = window.open("", "", "width=100, height=100");
}
function resizeWin() {
myWindow.resizeTo(250, 250);
myWindow.focus();
}
function moveWin() {
myWindow.moveTo(500, 100);
myWindow.focus();
}
</script>
</body>
</html>
D. window.seInterval() & window.clearInterval() –
The setInterval() method calls a function and execute it at specified intervals (in milliseconds).ClearInterval method will clear the timer set with the setInterval() method. In the below example, timer will run using setInterval function and timer will be stopped using clearInterval function.
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<button onclick="myStopFunction()">Stop time</button>
<script>
var myVar = setInterval(function(){ myTimer() }, 1000);
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
function myStopFunction() {
clearInterval(myVar);
}
</script>
</body>
</html>
Various window properties are as follows:-
i. window.innerHeight – It means the inner height of the browser window (in pixels).
ii. window.innerWidth – It means the inner width of the browser window (in pixels).
<!DOCTYPE html>
<html>
<body>
<button onclick="main()">Click it</button>
<p id="demo"></p>
<script>
function main() {
var w = window.innerWidth;
var h = window.innerHeight;
document.getElementById("demo").innerHTML = "Width: " + w + "<br>Height: " + h;
}
</script>
</body>
</html>
iii. Window pageXOffset & pageYOffset property-
The pageXOffset and pageYOffset properties returns the pixels the current document has been scrolled from the upper left corner of the window, horizontally and vertically. Try the below example to see the values displayed after scrolling.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid red;
height: 1000px;
width: 1000px;
}
</style>
</head>
<body>
<button onclick="main()" style="position: fixed;">Click me to scroll</button><br><br>
<div> </div>
<script>
function main() {
window.scrollBy(100, 100);
alert("pageXOffset: " + window.pageXOffset + ", pageYOffset: " + window.pageYOffset);
}
</script>
</body>
</html>
E. Window Location Object
It can be used to get the URL of the current page and to redirect the browser to a new page.
Various window methods are as follows:-
location.assign(), location.reload() & location.replace()
The assign() method loads a new web page as per the given URL. The reload() method is used to reload the current page in the browser. The replace() method replaces the current document with a new one. In the below example clicking on assign button will open “admecindia” homepage. Clicking on reload will simple refresh the page and click on replace will replace the web page with “google” homepage. Also in replace the back button in the browser will be disabled, whereas in assign it would be enabled.
<!DOCTYPE html>
<html>
<body>
<button onclick=main()">Assign</button>
<button onclick=”main1()">Reload</button>
<button onclick="main2()">Replace</button>
<script>
function main() {
location.assign("https://www.admecindia.co.in/");
}
function main1() {
location.reload();
}
function main2() {
location.replace("https://www.google.co.in/")
}
</script>
</body>
</html>
Various window properties are as follows:-
- location.href– This property will return the URL of the current webpage.
- location.hostname– This property returns the name of the internet host.
- location.pathname– This property returns the pathname of the current page.
- location.protocol– This property returns the web protocol of the page.
Suppose we want to check all the above options for the following website,
https://www.admecindia.co.in/online-training-graphic-web-animation/
- location.href will return the complete URL of the web page.
- location.hostname will return www.admecindia.com
- location.pathname will return online-training-graphic-web-animation
- location. protocol will return http:
F. Window History Object
It will contain the browser history.
Various methods are as follows:
window.history.back()– This method will open the previous URL in the browser history. This will work as same as clicking back button in the browser.
window.history.forward()– This method will open the next URL in the browser history. This will work as same as clicking next button in the browser.
window.history.go()-This method will open the specific URL in the browser history.
G. Window Navigator Object
It will contain the information about the visitor’s browser.
Various window methods are as follows:-
i. navigator.javaEnabled() – If Java is enabled on the system then it will return true value otherwise false.
<!DOCTYPE html>
<html>
<body>
<button onclick="main()">Try it</button>
<p id="demo"></p>
<script>
function main() {
var x = "Java Enabled: " + navigator.javaEnabled();
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Various window properties are as follows:-
ii. navigator.cookieEnabled-This method will return true if cookies are enabled, otherwise false.
iii. navigator.appName & navigator.appCodeName Both properties will return the name of the browser.
iv. navigator.product – It will return the engine name of the browser.
v. navigator.appVersion – It will return the version of the browser. f. navigator.platform – It will return the information about the operating system.
vi. navigator.language – It will return the browser language. As mentioned in the below example depending upon which browser you are using it will give the desired result.
<!DOCTYPE html>
<html>
<body>
<button onclick="main()">Check cookies</button>
<button onclick="main1()">Check Browser Name</button>
<button onclick="main2()">Check Code Name</button>
<button onclick="main3()">Check Engine Name</button>
<button onclick="main4()">Check Version</button>
<button onclick="main5()">Check Platform</button>
<button onclick="main6()">Check Language</button>
<p id="demo"></p>
<script>
function main() {
var x = "Cookies enabled: " + navigator.cookieEnabled;
document.getElementById("demo").innerHTML = x;
}
function main1() {
var y = "Browser Name: " + navigator.appName;
document.getElementById("demo").innerHTML = y;
}
function main2() {
var z = "Browser CodeName: " + navigator.appCodeName;
document.getElementById("demo").innerHTML = z;
}
function main3() {
var u = "Browser's Engine Name: " + navigator.product;
document.getElementById("demo").innerHTML = u;
}
function main4() {
var v = "Version info: " + navigator.appVersion;
document.getElementById("demo").innerHTML = v;
}
function main5() {
var w = "Platform: " + navigator.platform;
document.getElementById("demo").innerHTML = w;
}
function main6() {
var a = "Language of the browser: " + navigator.language;
document.getElementById("demo").innerHTML = a;
}
</script>
</body>
</html>
H. Window Screen Object
It will contain the information about the user’s screen.
Various window screen properties are as follows:-
i. screen.width– This property will returns the width of the user’s screen in pixels. Following example will display the total width of the screen.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Calculate screen width</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = "Total Width: " + screen.width + "px";
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
ii. screen.height– This property will returns the height of the user’s screen in pixels. Following example will display the total height of the screen.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Calculate screen height</button>
<p id="demo"></p>
<script>
function myFunction() {
var y = "Total Height: " + screen.height + "px";
document.getElementById("demo").innerHTML = y;
}
</script>
</body>
</html>
2. Window Events
The Event object keeps tracks of various events that occur on the page, such as the user scrolling the page etc., and allows to react to them inside the scripts.
Various window object events are as follows:
i. onload Event
The onload event occurs when an object has been loaded. Like we want that when the page is loaded it should execute the code. It should pop up an alert message.
<!DOCTYPE html>
<html>
<body onload="main()">
<script>
function main()
{
alert("Page is loaded");
}
</script>
</body>
</html>
i. onscroll Event
The onscroll event occurs when an element’s scrollbar is being scrolled. Try the below example to see what happens:-
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
width: 200px;
height: 100px;
overflow: scroll;
}
</style>
</head>
<body>
<p>Do scrolling to check</p>
<div onscroll="myFunction()">
<p>JavaScript is a client side scripting language which is when linked with HTML makes our web pages interactive. By client side scripting language we mean that script will run at the client side in a browser. We cannot create dynamic web pages without JavaScript. It adds behavior to the web pages.</p>
<p>Most of the validations are done with the help of it. JavaScript code is written within the <script></script> tags.This tag will tell the browser to interpret text written between these tags as a script.</div>
<p>Scrolled <span id="demo">0</span> times.</p>
<script>
var x = 0;
function myFunction() {
document.getElementById("demo").innerHTML = x += 1;
}
</script>
</body>
</html>
iii. onresize Event
The onresize event occurs when the browser window has been resized. In the below example when we minimize or maximize our browser window, it will change the size and width of the browser window.
<!DOCTYPE html>
<html>
<body onresize="main()">
<p>Try to resize the browser window </p> <p id="demo"></p> <script>
function main() {
var w = window.outerWidth;
var h = window.outerHeight;
var txt = "Window size: width=" + w + ", height=" + h;
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
Object properties, methods and events give us access to what’s going on in the browser, enabling us to change everything under programmatic control. Above mentioned properties, methods and events are very important section in Javascript. And the best way to memorize them by writing the code on your own and see the results.
