Posted By
Bajarangi soft ,
Posted On 09-10-2020
There are no official standards for the Browser Object Model (BOM).
Since modern browsers have implemented (almost) the same methods and properties for JavaScript interactivity, it is often referred to, as methods and properties of the BOM.
The window object is supported by all browsers. It represents the browser's window.
All global JavaScript objects, functions, and variables automatically become members of the window object.
Global variables are properties of the window object.
Global functions are methods of the window object.
Even the document object (of the HTML DOM) is a property of the window object:
window.document.getElementById("header");is the same as:
document.getElementById("header");
Window Size
Two properties can be used to determine the size of the browser window.
Both properties return the sizes in pixels:
window.innerHeight - the inner height of the browser window (in pixels)window.innerWidth - the inner width of the browser window (in pixels)The browser window (the browser viewport) is NOT including toolbars and scrollbars.
For Internet Explorer 8, 7, 6, 5:
document.documentElement.clientHeightdocument.documentElement.clientWidthdocument.body.clientHeightdocument.body.clientWidthA practical JavaScript solution (covering all browsers):
Example(1)
<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
var x = document.getElementById("demo");
x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";
</script>
The example displays the browser window's height and width: (NOT including toolbars/scrollbars)
Other Window Methods
Some other methods:
window.open() - open a new windowwindow.close() - close the current windowwindow.moveTo() - move the current windowwindow.resizeTo() - resize the current window
Complete Code For Browser Object Model In JavaScript
<!DOCTYPE html>
<html>
<head>
<title>What Is Browser Object Model In JavaScript With Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<br>
<div class="text-center">
<h1 id="color" style="color: tomato">Browser Object Model In JavaScript </h1>
</div>
<div class="well">
<h2 id="demo" ></h2>
<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
var x = document.getElementById("demo");
x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";
</script>
</div>
</div>
</body>
</html>