JavaScript BOM (Window object) Detailed _ Basics

ECMAScript is the core of JavaScript, but the web uses JavaScript, so the BOM (browser object model) is the real core.

The core object of the BOM is window, which represents an instance of the browser.

In the browser, the Window object is both a JavaScript access interface to the browser window and a ECMAScript global object. That is, any variable, object, and function defined in the Web page is the Global object of window.

1. Global scope

Now that the Window object acts as a global object, all objects, variables, and functions declared in the global scope become properties and methods of Windows.

There is a difference between defining a global variable and defining a property on a Window object: Global variables cannot be deleted by delete, and properties defined on window objects can be.

var age=28; 
Window.color= "Red"; 
In Ie<9 is thrown error, in other browsers return false 
delete window.age; 
Ie<9 is a throw error, returns true Delete Window.color in other browsers 
;  return True 
 
alert (window.age); 
alert (window.color);  Undefined 

When you add a window property using the Var statement, there is an attribute named [[Configurable]], the value of this attribute is set to False, so the defined property cannot be deleted by delete.

Attempting to access an undeclared variable throws an error, but by querying the Window object, you can see whether a variable that might not have been declared exists.

This throws the error because OldValue does not declare 
var newvalue=oldvalue; 
This will not throw an error, because this is a property query 
var newvalue=window.oldvalue   //alert (newvalue);//undefined

In fact, many global JavaScript objects, such as Localtion and Navigator, are actually properties of the Window object.

2. Window relationship and framework

If the page contains frames, each frame has its own window object and is saved in the Frames collection.

In a Frame collection, you can access it through a numeric index or a frame name.

For this example, the upper frame can be referenced by window.frames[0] or window.frames["Topframe". However, it is best to use top.frames[0] to access the framework.

The top object always points to the highest (outer) layer frame, which is the browser window. Use it to ensure that another framework is properly accessed in one frame.

Another window object relative to the top object is parent, and the parentobject always points to the immediate upper-level frame of the current frame.

There is also a self object that always points to Windows, in which self and window can be used to each other, and the purpose of introducing the self object is simply to correspond to top and parent objects.

All of these objects, which are properties of window, can be used using window.parent or window.top.

3. Window Position

Most browsers provide Screenleft and Screentop, respectively, to indicate the position of the window relative to the left and top of the screen. FF provides the same window information in the Screenx and Screeny properties, and the safari amount Chorme also supports both properties.

Use the following code to get the position of the left and top sides of the window across browsers.

var leftpos= (typeof window.screenleft== "number")? Window.screenLeft:window.screenX; 
var toppos= (typeof window.screentop== "number")? Window.screenTop:window.screenY; 

It is noteworthy that the Screenleft and screentop in IE and opera hold the distance from the left and top of the screen to the visible area of the page represented by the Window object. In Chrome, FF, and Safari, Screeny and Screentop hold the entire browser to the screen's coordinate values.

The end result is that you cannot get the exact coordinates on the left and the top of the window under cross-browser conditions.

Using the MoveTo () and Moveby () methods, you can move the window precisely to a new location, two methods receive two parameters, MoveTo () receives the coordinates of the x,y axis, and Moveby () receives the moved pixels.

Move the screen to the upper left 
moveTo (0,0); 
Move the window to the left 50px 
moveby ( -50,0); 

However, these two methods may be disabled by the browser. These two methods also apply only to the outermost window object and do not apply to the frame.

4. Window size

Mainstream browsers provide 4 properties for determining the size of the window: Innerwidth, Innerhight, Outerwidth, and Outerhight.

In ie9+, Safari, and FF, Outerwidth and Outerhight return the dimensions of the browser window itself (regardless of which frame is accessed), but in opera the values of the two properties represent the size of the Page view container (the size of a single tab window). Innerwidth and innerhight represent the size of the page view in the container (minus the width of the border). But in Chrome, these 4 properties all represent the viewport size, not the browser size.

IE9 did not provide a property to get the size of the browser window, but it provides information about the viewable area of the page through the DOM.

In IE, FF, Chrome, opera, and Safari, Document.documentElement.clientWidth and Document.documentElement.clientHight hold the page viewport information. Under IE6, to be valid in standard mode. In the case of promiscuous mode, the same information must be obtained through document.body.clientWidth and Document.body.clientHight. Chrome is not a standard mode or a promiscuous mode.

Although the size of the browser window itself cannot be determined at last, the size of the page viewport can be obtained.

var pagewidth = window.innerwidth, 
  pageheight = window.innerheight; 
   
if (typeof pagewidth!= "number") { 
  if (Document.compatmode = = "Css1compat") { 
    PageWidth = Document.documentElement.clientWidth; 
    PageHeight = document.documentElement.clientHeight; 
  } else { 
    pagewidth = document.body.clientWidth; 
    PageHeight = document.body.clientHeight; 
  } 
 
Alert ("Width:" + pagewidth); 
Alert ("Height:" + pageheight); 

For mobile devices, window.innerwidth and window.innerhight hold the visible viewport, which is the size of the page area on the screen. Mobile IE browser to get the same information through Document.documentElement.clientWidth and Document.documentElement.clientHight.

Using the Resizeto () and Resizeby () methods to resize the browser window, two methods receive two parameters, and Resizeto () receives the new width and height of the browser window, Resizeby () receives the new window and the old window width difference and height difference.

Adjusted to 100*100 
Resizeto (100,100); 
Adjusted to 200*150 
Moveby (100,50); 

However, these two methods may be disabled by the browser. These two methods also apply only to the outermost window object and do not apply to the frame.

5. Navigating and opening windows

The window.open () method can either open a specific URL or open a new browser window. The method receives 4 parameters: a URL, a window target, an attribute string, and a Boolean value that indicates whether the new page replaces the current page.

Pop-up window

Various parameters

Where yes/no can also use 1/0;pixelvalue as a specific value, the unit pixel.

Parameters | Value Range | description

alwayslowered|yes/no| specifies that the window is hidden behind all windows

alwaysraised|yes/no| specifies that the window is suspended above all windows

depended|yes/no| whether the parent window is closed at the same time

directories|yes/no| Whether the NAV2 and 3 columns are visible

height|pixelvalue| window Height

Hotkeys|yes/no| a secure exit hotkey in a window without a menu bar

Pixel height of document in innerheight|pixelvalue| window

Pixel width of document in innerwidth|pixelvalue| window

Whether the location|yes/no| position bar is visible

Whether the menubar|yes/no| menu bar is visible

outerheight|pixelvalue| The pixel height of the settings window (including the trim border)

outerwidth|pixelvalue| the pixel width of the settings window (including the trim border)

resizable|yes/no| window size can be adjusted

The pixel length of the screenx|pixelvalue| window from the left edge of the screen

The pixel length of the screeny|pixelvalue| window from the top edge of the screen

Whether the scrollbars|yes/no| window can have a scroll bar

Whether the titlebar|yes/no| window topic bar is visible

Whether the Toolbar|yes/no| window toolbar is visible

Pixel width of the width|pixelvalue| window

Whether the z-look|yes/no| window floats on top of other windows when it is activated

Example:

window.open (' page.html ', ' newwindow ', ' Height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, Resizable=no,location=no,status=no ') 

After the script is run, the page.html will open in the new form NewWindow, the width is 100, the height is 400, from the screen top 0 pixels, the screen left 0 pixels, no toolbar, no menu bar, no scroll bar, not adjustable size, no address bar, no status bar.

6. Intermittent calls and timeout calls

JavaScript is a single-threaded language, but it allows you to schedule code to execute at a specific time by setting a time-out value and intermittent time. The former executes code after a specified time, and the latter is called once for each specified time.

Timeout call settimeout ()
The settimeout () method accepts two parameters, the first parameter is a function, the second parameter is the time (in microseconds), and returns the numeric ID.

settimeout (function () { 
alert ("Hello!"); 
},1000); 

When settimeout () is invoked, the method returns a numeric ID indicating the timeout call, which can be used to cancel the timeout call.

var Timeoutid = settimeout (function () { 
alert ("Hello!"); 
},1000); 
 
Cleartimeout (Timeoutid); 

Intermittent call SetInterval ()

The SetInterval () method accepts two parameters, the first parameter is a function, the second parameter is the time (in microseconds), and returns the value ID

SetInterval (function () { 
alert ("Hello!"); 
},1000); 

Cancels calling Clearinterval (), accepting a parameter intermittent call ID

var intervalid = null; 
var span = document.createelement ("span"); Create span node 
span. Id= "Time"; Sets the ID 
document.body.appendChild (span) for span;//body adds span 
function Incrementnumber () { 
var now = new Date (); 
var timestr = now.tolocaletimestring (); 
Span.innertext =timestr; 
num++; 
if (num = =) { 
clearinterval (intervalid);//10 seconds after Time 
} 
} 
intervalid = SetInterval ( incrementnumber,1000); 

Try to replace intermittent calls with timeout calls

var num = 0; 
var max = ten; 
function Incrementnumber () { 
num++; 
if (Num<max) { 
settimeout (incrementnumber,1000); 
} else { 
alert ("OK"); 
} 
SetTimeout (incrementnumber,1000); 

7. System dialog box

Alert Box alert ()

Alert ("Welcome!"); 

Info box confirm (), Cancel, OK button

if (confirm) ("Do you agree?") ")) { 
alert (" Consent "); 
} else { 
alert ("Disagree"); 
} 

Prompt box prompt (), which prompts the user to enter some text

var result = prompt ("Your name", ""); 
if (result!== null) { 
alert ("Welcome," +result); 
} 

Above this javascript of the BOM (Window object) is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud habitat community.