Skip to content

Browser object Model in JavaScript | BOM

  • by

JavaScript Browser Object Model (BOM) is used to interact with the browser. It will help while developing web applications or websites.

You can call all the window functions by specifying the window directly.

window.alert("Hello JS");  
// OR
alert("Hello JS");  

You can use these window objects for controlling the lifecycle of the webpage, getting browser information, managing screen size, opening and closing the new browser windows, getting URL information or updating URL, getting cookies and local storage, etc.

The list of objects is called browser objects.

  • Window – part of DOM API
  • Navigator
  • Document – part of DOM API
  • Screen – property of Window object
  • History – property of Window object
  • Location – property of Window and Document object

Browser object in JavaScript

Simple example code.

<!DOCTYPE html>
<html>
<head>
    <title>BOM Examples</title>
    <script>
        var browserInfo = window.navigator.appName + " " + window.navigator.appVersion;
        document.write("<h2>Browser Info</h2><p>"+browserInfo +"</p>");
        var newWindow;
        function opennewWindow() {
            newWindow = window.open("", "", "width=500, height=300, top=150, left=150");
            newWindow.document.title = "New Window";
            paraGraph = document.createElement("P");
            paraGraph_text = document.createTextNode("New Paragraph");
            paraGraph.appendChild(paraGraph_text);
             newWindow.document.body.appendChild(paraGraph);
        }
        function closenewWindow() {
            if (newWindow != undefined) {
                newWindow.close();
                newWindow = undefined;
            }
            else {
                alert("Nothing to open !!");
            }
        }
    </script>
</head>
<body>
    <h2>BOM Window Object</h2>
    <p>
        <input type="button" value="Open Window" onclick="opennewWindow()" />
        <input type="button" value="Close Window" onclick="closenewWindow()" />
    </p>
</body>
</html>

Output:

Browser object Model in JavaScript

Do comment if you have any doubts or suggestions on this JS object topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading