Javascript Learning Guide (2nd) Notes (5) browser objects and cookies

1. window object
2. Same-source security policy
3. cookie

The browser Object Model (BOM) is a set of objects inherited from the browser context, which is also the context of function running in most JavaScript applications. Sometimes it is also called DOM Level 0, or DOM.

BOM is a set of limited public Web objects and a hierarchical object set. objects at each level can be accessed through their parent objects, such as window [navigator, location, frames, screen, history, document [forms, cookie, link/anchors, images, embeds/plug-ins, all].

When accessing objects, you can:
Var theImage = document. form [0]. elements ["someelement"]. value;

1. window object

The window object of the browser encapsulates the entire browser environment, including the "chrome" of the window (a common component of the browser form), the actual Web page, and the page events.

You can use window to manually set the status on the browser Status Bar, open a new window, re-adjust the size of the displayed window, and close the window. However, with the popularity of dynamic Web effects and Ajax, such pop-up windows are more and more disliked.

The methods and Properties of window objects can be divided into four types:

A. Create a new window to maintain the existing window Behavior

Pop-up dialog box: alert, confirm, and prompt
Create a custom window: window. open ()
Maintenance window: You can maintain the window by referencing the window. To maintain the parent window, use the keyword opener. To maintain the window that contains the current running script, use the keyword self.

B. Create a file (frame and iframes) with partitions in the window)

The frame object defines the following elements: parent, length, and name. For cross-frame communication, the name and parent attributes are particularly important. Its Parent element frameset (frame set, including the frame window) can access all sub-frames by the name of each frame (or by the number of frames, the number of objects can be used as the index value ); each frame can access this frame set through the common keyword parent. Elements in a sibling frame can be accessed through the name attribute of the parent and peer.

Unlike standard frames, iframe is embedded in the page. You can specify the height and width for it. If you set them to 0, it will be hidden. Iframe regards the page to which it is embedded as its parent element, which is also a way for it to communicate with higher-level pages. Generally, you can use the getElementById method of document to access it, or you can use the target attribute to load its content.

C. Create and control Timer

There are two types of Timers: one is disposable, and the other is periodically used. Both of them can be canceled, and the one-time timer method will only be called once.

To create a timer that does not trigger repeatedly, you can use the setTimeout method:
Var tmOut = setTimeout ("func", 5000, "param1", param2, paramn );

To clear the timer, use the clearTimeout method:
ClearTimeout (tmOut );

If you want to periodically use this timer, you should call the setInterval method:
Var tmOut = setInterval ("functionName", 5000 );

Similarly, if you want to pause or cancel this periodic timer, you can use the clearInterval method. If you want to implement a periodic timer but want to specify a function text volume in the parameter, you can use the setTimeout Function to reset the timer every time the timer expires.

Note:
In ie, the setInterval and setTimeout methods do not support adding parameters required for function calls at the end.

D. Used to control other browser Elements

History Object
The history Object maintains the page loading operation history in the browser. Similarly, the method and attributes can be used to complete the navigation operations through the browser's back and forward buttons.

Screen Object
The screen object contains information related to the screen display, including its width, height, and color or pixel fades. Although they are not very common, they are a good choice for those features that require changing the browser window size and creating a color object that requires a specific Palette.

Navigator object
The navigator object provides information related to the browser or other user proxies that access the page. It can be used to check whether the operating system, browser or browser family, security policy, language, and cookie are enabled.

Document Object
1. Links and anchors
The links set of the document Object is composed of all the hyperlinks on the page. Its access method is the same as that of an array.

2. Images
Like links, images also have their corresponding objects. You can also directly set their attributes, such as the src attribute indicating the image URL.

3. innerHTML
The innerHTML attribute can be used to modify any HTML element on the page. It is still popular because you do not need to build the content of the entire page when modifying the page element. You only need to create an HTML string, then you can use innerHTML to add it to the Web page. However, using innerHTML means that no matter what is added to the Web page, they cannot be integrated into the document tree of the page, therefore, if you mix innerHTML and the new DOM method, it will cause great damage.

2. Same-source security policy

The same-source security policy ensures that pages with different domain names, protocols, or ports cannot communicate through scripts. The same-source security policy applies to the communication between different pages, including the communication between forms and embedded windows in the parent window, such as frames and iframe.

3. cookie

Cookie indicates a small key/value pair with an expiration time, domain name, or path. The message must be provided to ensure that the correct server can read the correct cookie. This information will be sent as part of the Web request, so the data can be accessed on the server side and in the browser.

Set, read, and delete cookies

// If cookie enabled
Window. onload = function (){
If (navigator. cookieEnabled ){
Var sum = readCookie ("sum ");
If (sum ){
Var iSum = parseInt (sum) + 1;
Alert ("cookie count is" + iSum );

If (iSum> 5 ){
EraseCookie ("sum ");
} Else {
SetCookie ("sum", iSum );
}
} Else {
Alert ("no cookie, setting now ");
SetCookie ("sum", 0 );
}
}
}

// Set the cookie validity period to 2016
Function setCookie (key, value ){
Var cookieDate = new Date (2016, 11, 10, 19, 30, 30 );
Document. cookie = key + "=" + encodeURI (value) + "; expires =" + cookieDate. toGMTString () + "; path = /";
}

// Separate each cookie with a semicolon
Function readCookie (key ){
Var cookie = document. cookie;
Var first = cookie. indexOf (key + "= ");

// Cookie exists
If (first> = 0 ){
Var str = cookie. substring (first, cookie. length );
Var last = str. indexOf (";");

// If it is the last cookie
If (last <0) last = str. length;

// Obtain the cookie value
Str = str. substring (0, last). split ("= ");
Return decodeURI (str [1]);
} Else {
Return null;
}
}

// Set the cookie validity period to the past to delete the cookie.
Function eraseCookie (key ){
Var cookieDate = new Date (2000, 11, 10, 19, 30, 30 );
Document. cookie = key + "=; expirse =" + cookieDate. toGMTString () + "; path /";
}