The Browser Object Model allows JavaScript to access several pieces of information about a browser including history, screen size, location, and cookies. The Document Object is made up of objects used to modify the documents’ properties and methods loaded into the browser window.<\/p>\n
Some of the important BOM(Browser Object Model) objects:<\/strong><\/p>\n Window object Properties:<\/strong> back():<\/strong> The previous URL will be displayed using this technique. This functionality will be the same as using the browser’s back button. forward():<\/strong> This method will open the next URL in the browser history. go():<\/strong> This method will open the specific URL in the browser history. Ex: click the browser back button it will reload the page:<\/p>\n\n
\n
\nThe window object is a representation of the browser’s window. The window object includes all of the global JavaScript objects as members.Window object method:-
\nalert(): The browser can invoke a system dialog to display information to the user.
\nEx: alert(\u201cHello, Welcome Back\u201d);<\/code>getComputedStyle(): This method returns an object containing the values of all CSS properties of an element.
\nEx: Var fontFamily=
\ngetComputedStyle(document.getElementsByClassName
\n('btnstyle')[1]) .getPropertyValue('font-family');<\/code><\/p>\n
\ninner width:
\nEx:let width = window.innerWidth;
\nWindow History Object
\nlet length = window.history.length;<\/code><\/li>\n
\nThe history object represents a user’s web browsing history as an array of the URLs that the user visited.There are three ways to switch between pages in the history stack using the history object:<\/p>\n\n
\nEX:window.history.back();<\/p>\n
\nEX: window.history.forward()<\/p>\n
\nEX:
\n<button id=”cancelchanges” onclick=”return CancelChanges()” ;>
\nCancel
\n<\/button>
\n\/\/To Step Back to the previous Page:
\nfunction CancelChanges()
\n{
\nwindow.history.go(-1);
\nreturn false;
\n}
\n\/\/To Refresh Page
\nwindow.history.go(0);<\/li>\n
\nscreen.width\u2013<\/strong> This property will return the width of the user\u2019s screen in pixels.
\nEx: var width = screen.width;screen.height\u2013 <\/strong>This property will return the height of the user\u2019s screen in pixels.
\nEx: var height = screen.height;<\/li>\n
\n<button id=\"Moveuser\" onclick=\"Moveuser()\" ;>
\nBack
\n<\/button>
\nfunction Moveuser()
\n{
\n\/\/relativePath
\nwindow.location=\u201d\/homepage\u201d;
\n}<\/code>window.location.href:<\/strong> This property will return the URL of the current webpage.
\nEX:
\n <button type=\"button\" onclick=\"getURL();\">Get Page URL<\/button>
\nfunction getURL() {
\nalert(\"The URL of this page is: \" + window.location.href);
\n}<\/code>
\nWindow.location.reload:<\/strong>
\nEX: Click button user gets the first warning and on click on ok button page is reloaded
\n <button id=\"Moveuser\" onclick=\"refreshpage()\" ;>ReloadPage<\/button>
\nfunction refreshpage()
\n{
\nswal({
\ntitle: \"warning\",
\ntext: \"do you really want to refresh the page\u201d,
\ntype: \"warning\",
\nicon: \"warning\",
\n}, function () {
\nlocation.reload();
\n});
\n}<\/code><\/li>\n
\nnavigator.appCodeName:<\/strong> The appName property returns the application name of the browser:
\nEx: var appname=navigator.appName;navigator.onLine:<\/strong> The navigator.onLine property to detect whether the browser is online or offline.Ex:
\n<button type=\"button\" onclick=\"checkConnectionStatus();\">Check Connection Status<\/button>
\nfunction checkConnectionStatus() {
\nif(navigator.onLine) {
\nalert(\"Application is online.\");
\n} else {
\nalert(\"Application is offline.\");
\n}}<\/code><\/p>\n