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 Method | Method 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 Method | Description |
---|---|
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 Property | Description |
---|---|
appName | method returns the application name |
appVersion | method returns the application version |
appCodeName | method returns the code name |
cookieEnabled | method returns if cookie is enabled or not |
userAgent | method returns the user agent details |
language | returns language supported in Netscape and Firefox browsers |
userLanguage | returns user language supported in IE browser |
plugins | returns the plugins supported in Netscape and Firefox browsers |
systemLanguage | returns system language supported in IE browser |
mimeTypes[] | returns array of mime type supported in Netscape and Firefox browsers |
platform | returns windows platform |
online | returns if browser is online or not |
Navigator Object Model Methods
The below given are the methods of Navigator Object Model
Navigator Object Method | Description |
---|---|
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 Property | Description |
---|---|
width | method returns the screen width |
height | method returns the screen height |
availWidth | method returns the available width |
availHeight | method returns the available height |
colorDepth | method returns the color depth |
pixelDepth | method returns the pixel depth. |