BOM (Browser Object Model)

1. BOM Intro

BOM allows JavaScript to "talk to" the browser.

2. Window Object

  • represents the browser's window
  • All global JavaScript objects, functions, and variables automatically become members of the window object.
    • Global variables: properties of the window object.
    • Global functions: methods of the window object.
    • Even the document object (of the HTML DOM) is a property of the window object:
document.getElementById("header");  // the same as above

3. Window Properties

3.1. Window Size


  • size of the browser window
  • The browser window (the browser viewport) is NOT including toolbars and scrollbars.
  • window.innerHeight: the inner height of the browser window (in pixels)
  • window.innerWidth: the inner width of the browser window (in pixels)

A practical JavaScript solution (covering all browsers):

var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

console.log(`Browser inner window width: ${w}, height: ${h}.`);

3.2. Window Screen


The window.screen object contains information about the user's screen.

The window.screen object can be written without the window prefix.

  • screen.width
  • screen.height
  • screen.availWidth
  • screen.availHeight
  • height vs. availHeight 1080 vs 1040

整個螢幕解析度大小 vs. 可用的區域大小(例如扣掉Windows的工具列)

screen.colorDepth screen.pixelDepth

colorDepth: 16, 24, 32 bit 色彩

For modern computers, Color Depth and Pixel Depth are equal.

3.3. window.location


window.location = "demo_json.php";

4. Window Methods

4.1.[URL, name, specs, replace])

open a new window

4.2. window.close()

close the current window

4.3. window.moveTo()

4.4. window.moveBy()

move the current window

4.5. window.resizeTo()

resize the current window

<button onclick="openWinAtTab()">Create new window</button>
<button onclick="openWinAsSimpleWindow()">Create new window 2</button>
<button onclick="moveWinTo()">Move new window</button>
<button onclick="moveWinBy()">Move the new window by 75 * 50px</button>
<button onclick="resizeWin()">Resize the new window</button>
<button onclick="closeWin()">Close new window</button>

var myWindow;

function openWinAsSimpleWindow() {
    myWindow ="", "", "width=250, height=250");

function openWinAtTab() {
    myWindow ="");

function moveWinTo() {
    myWindow.moveTo(150, 150);

function moveWinBy() {
    myWindow.moveBy(75, 50);

function resizeWin(){
  myWindow.resizeTo(500, 500);

function closeWin(){

results matching ""

    No results matching ""