Shulou(Shulou.com)06/02 Report--

This article focuses on "how to understand the browser object model in Javascript". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to understand the browser object model in Javascript.

JavaScript Window-browser object model

The browser object Model (BOM) enables JavaScript to "talk" to browsers.

Browser object Model (BOM):

There is no formal standard for the browser object model (Browser Object Model (BOM)).

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

Window object:

All browsers support window objects. It represents the browser window.

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

Global variables are properties of the window object.

The global function is the method of the window object.

Even the document of HTML DOM is one of the properties of the window object.

Http://www.iis7.com/b/wzjk/

Syntax: window.document.getElementById ("header") = = document.getElementById ("header")

Window size:

There are three ways to determine the size of a browser window.

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

Window.innerHeight-the internal height of the browser window (including the scroll bar).

Window.innerWidth-the inner width of the browser window (including scroll bars).

For Internet Explorer 8, 7, 6, 5:

Document.documentElement.clientHeight

Document.documentElement.clientWidth

Or

Document.body.clientHeight

Document.body.clientWidth

The following example shows the height and width of the browser window: (excluding toolbars / scroll bars)

Var w=window.innerWidth

| | document.documentElement.clientWidth |

| | document.body.clientWidth |

Var h=window.innerHeight

| | document.documentElement.clientHeight |

| | document.body.clientHeight |

X=document.getElementById ("demo")

X [XSS _ clean] = "browser window width:" + w + ", height:" + h + "."

Other Window methods:

Window.open (), open a new window.

Window.close (), closes the current window.

Window.moveTo (), move the current window.

Window.resizeTo (), resize the current window.

:

JavaScript Window Screen (screen)

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

Window.screen objects can be written without the prefix window, with some attributes:

Screen.availWidth, the available screen width.

Screen.availHeight, the available screen height.

Available width of Window Screen:

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

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 taskbar.

(screen.width + "*" + screen.height), total width / height.

(screen.availWidth + "*" + screen.availHeight), available width / height.

Screen.colorDepth, color depth.

Screen.pixelDepth, color resolution.

:

JavaScript Window Location (address URL)

The _ window.location object is used to get the address (URL) of the current page and redirect the browser to the new page.

Window Location (address URL):

The _ window.location object can be written without the prefix window. Some examples:

Location.hostname, which returns the domain name of the web host.

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

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

Location.protocol, which returns the web protocol used (http:// or https://).

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

Window Location Pathname (path name):

Location.pathname, the property returns the pathname of the URL.

Window Location Assign (load):

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

:

JavaScript Window History (History)

The window.history object contains the browser history.

Window.history objects can be written without the prefix window.

To protect user privacy, restrictions are placed on the way JavaScript accesses the object.

History.back (), the same as clicking the "back" button in the browser.

History.forward (), which is the same as clicking the forward button in the browser.

(history backtracking) the history.back () method loads the previous URL in the history list, which is the same as clicking the back button in the browser.

(history forward) the history forward () method loads the next URL in the history list, which is the same as clicking the forward button in the browser.

:

JavaScript Window Navigator (navigation)

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

Window.navigator objects can be written without the prefix window.

Navigator.appCodeName, browser code.

Navigator.appName, browser name.

Navigator.appVersion, browser version.

Navigator.cookieEnabled, enable Cookies (information logger).

Navigator.platform, hardware platform.

Navigator.userAgent, user agent.

Navigator.systemLanguage, user agent language.

Note: information from the navigator object is misleading and should not be used to detect the browser version because:

Navigator data can be changed by browser users, some browsers identify errors at the test site, and browsers cannot report new operating systems released later than browsers.

Browser detection:

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

Because different browsers support different objects, you can use objects to detect browsers. For example, since only Opera supports the attribute "window.opera", you can identify Opera from it.

:

JavaScript pop-up window

You can create three message boxes in JavaScript: warning box, confirmation box, and prompt box.

Warning box: the warning box is often used to ensure that the user can get some information, and when the warning box appears, the user needs to click the OK button to proceed.

Syntax: window.alert ("sometext"), the window.alert () method can use the alert () method without the window object.

Confirmation box: the confirmation box is usually used to verify that user actions are accepted.

When the confirmation card pops up, the user can click "confirm" or "cancel" to determine the user action.

When you click "OK", the confirmation box returns to true, click "cancel", and the confirmation box returns to false.

Syntax: window.confirm ("sometext"), the window.confirm () method can use the confirm () method without the window object.

Prompt box: the prompt box is often used to prompt the user to enter a value before entering the page.

When the prompt box appears, the user needs to enter a value and then click the confirm or cancel button to continue the operation.

If the user clicks OK, the return value is the entered value. If the user clicks cancel, the return value is null.

Syntax: window.prompt ("sometext", "defaultvalue"), the window.prompt () method can use the prompt () method without a window object.

Line wrap: the pop-up window uses a backslash + "n" (\ n) to set the line break.

:

JavaScript timing event

JavaScript executes code after a set time interval, which we call a "timing event".

JavaScript timing event:

By using JavaScript, we have the ability to execute code after a set interval, rather than immediately after the function is called. We call it a timing event.

It is easy to use timing events in JavaScritp. Two key methods are:

SetInterval (), the specified code is executed continuously for the specified number of milliseconds, and the interval milliseconds goes on and on.

SetTimeout () executes the specified code after the specified number of milliseconds.

Note: setInterval () and setTimeout () are two methods of the HTML DOM Window object.

SetInterval () method

Syntax: window.setInterval ("javascript function", (millisecond) milliseconds)

The window.setInterval () method can use the function setInterval () instead of using the window prefix. The first argument to setInterval () is the function (function), and the number of milliseconds between the second argument.

The clearInterval () method is used to stop the function code executed by the setInterval () method.

Syntax: window.clearInterval (intervalVariable).

The window.clearInterval () method can use the function clearInterval () instead of using the window prefix.

To use the clearInterval ("what you want to stop") method, you must use global variables when creating timing methods.

SetTimeout () method

Syntax: myVar= window.setTimeout ("javascript function", (millisecond) milliseconds)

The setTimeout () method returns a value.

The first argument to setTimeout () is the string that contains the JavaScript statement. This statement might be like "alert ('5 secondsgiving')," or a call to a function, such as alertMsg.

The second parameter indicates how many milliseconds from the current before the first parameter is executed.

The clearTimeout () method is used to stop the function code that executes the setTimeout () method.

Syntax: window.clearTimeout (timeoutVariable).

The window.clearTimeout () method may not use the window prefix.

To use the clearTimeout () method, you must use global variables in creating timeout methods (setTimeout).

If the function has not been executed, you can use the clearTimeout () method to stop the execution of the function code.

Note: 1000 milliseconds is a second.

The following example shows a clock on the page:

Var myVar=setInterval (function () {myTimer ()}, 1000)

Function myTimer () {

Var d=new Date ()

Var t=d.toLocaleTimeString ()

Document.getElementById ("demo") [xss_clean] = t

}

:

JavaScript Cookie (Information Recorder)

Cookie is used to store user information for web pages.

Cookie is data that is stored in a text file on your computer.

When the web server sends a web page to the browser, the server will not record the user's information after the connection is closed.

The purpose of Cookie is to solve "how to record the user information of the client":

When a user visits a web page, his name can be recorded in cookie.

The next time the user visits the page, the user access record can be read in cookie.

Cookie is stored as name / value pairs, as shown on the right: username=John Doe

When the browser requests a web page from the server, the cookie belonging to that page is added to the request. The server obtains the user's information in this way.

To create a Cookie,JavaScript using JavaScript, you can use the [xss_clean] attribute to create, read, and delete cookie.

In JavaScript, create a cookie as shown on the right: [xss_clean] = "username=John Doe"

You can also add an expiration time (in UTC or GMT time) for cookie. By default, cookie is deleted when the browser is closed.

[xss_clean] = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT"

You can use the path parameter to tell the browser the path to cookie. By default, cookie belongs to the current page.

[xss_clean] = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/"

Use JavaScript to read Cookie:

In JavaScript, you can use the code shown on the right to read cookie:var x = [xss_clean]

[xss_clean] will return all cookie as a string, type format: cookie1=value; cookie2=value; cookie3=value

Use JavaScript to modify the Cookie:

In JavaScript, modifying a cookie is similar to creating a cookie, as follows:

[xss_clean] = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/", the old cookie will be overwritten.

Use JavaScript to delete the Cookie:

Deleting a cookie is very simple. You just need to set the expires parameter to the previous time, as shown below, to Thu, 01 Jan 1970 00:00:00 GMT:

[xss_clean] = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT"

Note that you do not have to specify a value for cookie when you delete it.

Cookie string:

The [xss_clean] property looks like an ordinary text string, but it is not.

If you set a new cookie, the old cookie will not be overwritten. The new cookie will be added to [xss_clean], so if you reread [xss_clean].

If you need to find a specified cookie value, you must create a JavaScript function to find the cookie value in the cookie string.

At this point, I believe you have a deeper understanding of "how to understand the browser object model in Javascript". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.