Browser Object Model (BOM) in JavaScript

The blog provides the details about the Browser Object Model in JavaScript . The Browser Object Model is supported by the browsers and not part of the JavaScript objects but it is used in the JavaScript programs to notify messages / alerts to the user.

window.alert("calling windows Object Model");  

Browser Object Model Types

The below given are the Browser Object Model Types which can be used in JavaScript

  • Windows Object Model
  • Screen Object Model
  • History Object Model
  • Navigator Object Model

Windows Object Model

The Windows Object Model provides the browser windows object to display user message similar to JavaScript alert messages.

Methods of Windows Object Model

The below given are the supported methods of Windows Object Model

Windows Object MethodMethod Description
alert()Windows method displays the alert box message with ok button.
confirm()Windows method displays the confirm dialog box message with
ok and cancel button.
prompt()Windows method displays a dialog box for user input
open()Windows method opens the new window.
close()Windows method closes the current window.
setTimeout()Windows method performs action like calling function, evaluating expressions etc. after specified time
Windows Object alert() Method examples
<script type="text/javascript">  
function welcomeUser(){  
 alert("Welcome to the oracleappshelp.com JavaScript Tutorial");  
}  
</script>  
<input type="button" value="click" onclick="welcomeUser()"/> 
Windows Object confirm() Method examples
<script type="text/javascript">  
function userfeedback(){  
var userInput= confirm("Do you like oracleappshelp.com Tutorials ?");  
if(userInput==true){  
alert("JavaScript Tutorial is awesome");  
}  
else{  
alert("Please add more examples");  
}  
  
}  
</script>  
  
<input type="button" value="User Feedback" onclick="userfeedback()"/>
Windows Object prompt() Method examples
<script type="text/javascript">  
function getUserName(){  
var userInput= prompt("Enter your Name ?");  
alert("Hello - "+userInput );  
  
}  
</script>  
  
<input type="button" value="click" onclick="getUserName()"/>
Windows Object setTimeout() Method examples
<script type="text/javascript">  
function display(){  
setTimeout(  
function(){  
alert("Message is displayed with after speciifed timeout")  
},1200);  
  
}  
</script>  
  
<input type="button" value="click" onclick="display()"/>  

History Object Model

The History Object Model provides the array of URLs which are visited by the user from the browser history.

History Object Model Methods

The below given are the methods for history object model

History Object MethodDescription
 forward() Method loads the next page
 back() Method loads the previous page
 go() Method loads the page with given page number
History Object Model Method Examples

The below given methods can be invoked to get the browser history

history.forward();//loads next page  
history.go(2);// loads page with page number 2 
history.back(); //loads previous page  

Navigator Object Model

The Navigator Object Model allows to retrieve the browser information such as Application Name, Application Version , cookie details , user language , user agent details etc

Navigator Object Model Properties

The below given are the properties of Navigator Object Model

Navigator Object PropertyDescription
appNamemethod returns the application name
appVersionmethod returns the application version
appCodeNamemethod returns the code name
cookieEnabledmethod returns if cookie is enabled or not
userAgentmethod returns the user agent details
languagereturns language supported in Netscape and Firefox browsers
userLanguagereturns user language supported in IE browser
pluginsreturns the plugins supported in Netscape and Firefox browsers
systemLanguagereturns system language supported in IE browser
mimeTypes[]returns array of mime type supported in Netscape and Firefox browsers
platformreturns windows platform
onlinereturns if browser is online or not
Navigator Object Model Methods

The below given are the methods of Navigator Object Model

Navigator Object MethodDescription
javaEnabled()method checks if java is enabled.
taintEnabled()Deprecated. Method checks if taint is enabled
Navigator Object Model Method Examples
<script>  
document.writeln("<br/>navigator.appCodeName: "+navigator.appCodeName);  
document.writeln("<br/>navigator.appName: "+navigator.appName);  
document.writeln("<br/>navigator.appVersion: "+navigator.appVersion);  
document.writeln("<br/>navigator.cookieEnabled: "+navigator.cookieEnabled);  
document.writeln("<br/>navigator.language: "+navigator.language);  
document.writeln("<br/>navigator.userAgent: "+navigator.userAgent);  
document.writeln("<br/>navigator.platform: "+navigator.platform);  
document.writeln("<br/>navigator.onLine: "+navigator.onLine);  
</script>  

The output for Navigator Object Model

navigator.appCodeName: Mozilla
navigator.appName: Netscape
navigator.appVersion: 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.101 Safari/537.36 Edg/91.0.864.48
navigator.cookieEnabled: true
navigator.language: en-US
navigator.userAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.101 Safari/537.36 Edg/91.0.864.48
navigator.platform: Win32
navigator.onLine: true

Screen Object Model

The Screen Object Model allows to retrieve the browser information such as screen width, height, color depth , pixel depth, etc.

Screen Object Model Properties

The below given are the properties of Screen Object Model

Screen Object PropertyDescription
widthmethod returns the screen width
heightmethod returns the screen height
availWidthmethod returns the available width
availHeightmethod returns the available height
colorDepthmethod returns the color depth
pixelDepthmethod returns the pixel depth.