Web Development Technology--javascript Window BOM

JavaScript Window-Browser object model

The browser object Model (BOM) gives JavaScript the ability to "talk" to the browser.

Browser object Model (BOM)

There is no formal standard for the browser object model (Browser object models).

Because modern browsers have (almost) implemented the same methods and properties of JavaScript interactivity, they are often considered to be the methods and properties of a BOM.

Window Object

window objects are supported by all browsers. It represents a browser window.

All JavaScript global objects, functions, and variables automatically become members of the Window object.

A global variable is a property of a Window object.

A global function is a method of a Window object.

Even the document of the HTML DOM is one of the properties of the Window object:

Window.document.getElementById ("header");

The same as this:

document.getElementById ("header");

Window size

There are three ways to determine the size of the browser window (the viewport of the browser, excluding toolbars and scroll bars).

For Internet Explorer, Chrome, Firefox, Opera, and Safari:

· Window.innerheight-Interior height of the browser window

· Window.innerwidth-Interior width of the browser window

For Internet Explorer 8, 7, 6, 5:

· Document.documentElement.clientHeight

· Document.documentElement.clientWidth

Or

· Document.body.clientHeight

· Document.body.clientWidth

Practical JavaScript scenarios (all browsers included):

Instance

var w=window.innerwidth

|| Document.documentElement.clientWidth

|| Document.body.clientWidth;

var h=window.innerheight

|| Document.documentElement.clientHeight

|| Document.body.clientHeight;

This example shows the height and width of the browser window: (not including toolbars/scrollbars)

Other Window methods

Some other methods:

· window.open ()-Open a new window

· Window.close ()-Close the current window

· Window.moveto ()-Move the current window

· Window.resizeto ()-Adjusts the size of the current window

JavaScript Window Screen

Window.screen object contains information about the user's screen.

Window screen

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

Some properties:

· Screen.availwidth-Available screen widths

· Screen.availheight-The available screen height

Window Screen Available width

The Screen.availwidth property returns the width of the visitor's screen, in pixels, minus interface features, such as the window's taskbar.

Instance

Return the available width of your screen:

<script>

screen.availWidth);

</script>

The above code output is:

Available width: 1366

Try it yourself.

Window Screen Available height

The Screen.availheight property returns the height of the visitor's screen, in pixels, minus interface features, such as the window's taskbar.

Instance

Return the available height of your screen:

<script>

screen.availHeight);

</script>

The above code output is:

Available Height: 728

JavaScript Window Location

· JS screen

· JS history

The Window.location object is used to obtain the address (URL) of the current page and redirect the browser to a new page.

Window Location

The window.location object can be written without using the window prefix.

Some examples:

· Location.hostname returns the domain name of the web host

· Location.pathname returns the path and file name of the current page

· Location.port returns the port of the web host (80 or 443)

· Location.protocol returns the Web protocol used (HTTP///https://)

Window location Href

The Location.href property returns the URL of the current page.

Instance

Returns the entire URL (of the current page):

<script>

document.write ( location.href );

</script>

The above code output is:

Http://www.w3school.com.cn/js/js_window_location.asp

Window location Pathname

The Location.pathname property returns the path name of the URL.

Instance

Returns the path name of the current URL:

<script>

document.write ( location.pathname );

</script>

The above code output is:

/js/js_window_location.asp

Window location Assign

The Location.assign () method loads the new document.

Instance

To load a new document:

<HTML>    <Head>        <Script>functionNewdoc () {window.location.assign ("http://www.w3school.com.cn")  }</Script>    </Head><Body>     <inputtype= "button"value= "Load New Document"onclick= "Newdoc ()"> </Body></HTML>

JavaScript Window History

· JS Location

· JS Navigator

The Window.history object contains the history of the browser.

Window history

The window.history object can be written without using the window prefix.

To protect user privacy, there are limitations to how JavaScript accesses the object.

Some methods:

· History.back ()-Same as clicking Back button in browser

· History.forward ()-Same as clicking the button in the browser forward

Window history back

The History.back () method loads the previous URL in the History list.

This is the same as clicking the Back button in the browser:

Instance

To create a Back button on the page:

<HTML><Head>    <Script>functionGoBack () {window.history.back ()}</Script></Head><Body>     <inputtype= "button"value= "Back"onclick= "GoBack ()"> </Body></HTML>

The above code output is:

Window History Forward

The forward () method loads the next URL in the history list.

This is the same as clicking the Forward button in the browser:

Instance

Create a Forward button on the page:

<HTML>    <Head><Script>functionGoForward () {Window.history.forward ()}</Script></Head>    <Body> <inputtype= "button"value= "Forward"onclick= "GoForward ()"> </Body></HTML>

The above code output is:

4 JavaScript Window Navigator

· JS history

· JS Popupalert

The Window.navigator object contains information about the visitor's browser.

Window Navigator

The Window.navigator object can be written without using the window prefix.

Instance

<div id= "Example" ></div>

<script>

TXT = "<p>browser codename:" + Navigator.appcodename + "</p>";

txt+= "<p>browser Name:" + navigator.appname + "</p>";

txt+= "<p>browser Version:" + navigator.appversion + "</p>";

txt+= "<p>cookies Enabled:" + navigator.cookieenabled + "</p>";

txt+= "<p>platform:" + navigator.platform + "</p>";

txt+= "<p>user-agent Header:" + navigator.useragent + "</p>";

txt+= "<p>user-agent language:" + navigator.systemlanguage + "</p>";

document.getElementById ("Example"). Innerhtml=txt;

</script>

Warning: The information from the Navigator object is misleading and should not be used to detect browser versions because:

· Navigator data can be changed by browser user

· The browser cannot report a new operating system that is later than the browser published

Browser detection

Because navigator can mislead browser detection, using object detection can be used to sniff out different browsers.

Because different browsers support different objects, you can use objects to detect the browser. For example, because only opera supports the attribute "Window.opera", you can identify opera accordingly.

Example: if (Window.opera) {... some action ...}

Web Development Technology--javascript Window BOM