JavaScript Advanced Programming notes (eight)

BOM (Browser object model) one, Window object

The core object of the BOM is window, which represents an instance of the browser. Any object, variable, or function defined by a Web page, with window as its global object, has access to methods such as parseint ().

1. Global scope

All variables and functions declared at the global scope become properties and methods of the Window object.

Global variables cannot be deleted through the delete operator, and the properties defined directly on the Window object (IE8 and previous versions will throw an error). By querying the Window object, you can know if a variable that might not be declared exists.

You can tell by querying the window object that a variable exists that might not be declared.

// will throw an error var newvalue = oldValue; // Property Query var // undefined

2. Window relationship and framework

If the page has frames, they all have their own window object and are saved in the Frames collection. The Window object is accessed by a numeric index (left-to-right, top-to-bottom) or name in the Frames collection.

The top object always points to the outermost frame. For any code written in a framework, the window object points to a specific instance of that frame.

The parent object always points to the immediate upper frame of the current frame. In the absence of a frame, Parent=top=window.

The self object always points to the window and can be interchanged with the Window object.

The Name property of its window object does not contain any values unless the top-level window is opened through window.open () .

3. Window Position

IE, Safari, opera, and Chrome:screenlefT and Screentop properties. The distance from the left and top of the screen to the visible area of the page represented by the Window object.

Firefox:ScreenX and Screeny, the entire browser relative to the screen's coordinate values.

Firefox, Safari, and Chrome always return Top.screenx and Top.screeny for each frame in the page, even if the page has margins set.

IE and opera give the exact coordinates of the frame relative to the screen interface.

MoveTo () receives the x, y coordinates of the new location, and Moveby () receives the moving pixels. But may be disabled by the browser, are not applicable to the framework, only the outermost window object.

4. Window size

Outerwidth, outerheight:ie9+, Safari, and Firefox return the dimensions of the browser window itself.

Opera represents the size of a single label page.

Innerwidth, Innerheight: Represents the size of the Page view area in the container (minus the border width).

Both inner and outer in chrome return the viewport size.

Page Viewport Size
 varPageWidth =window.innerwidth, PageHeight=Window.innerheight; if(typeofPageWidth! = "Number"){            if(Document.compatmode = = "Css1compat"{//Determines whether the page is in a standard state. PageWidth=Document.documentElement.clientWidth; PageHeight=Document.documentElement.clientHeight; } Else{pagewidth=Document.body.clientWidth; PageHeight=Document.body.clientHeight; }        }

IE, Firefox, Safari, Opera, Chrome Docoment.documentElement.clientWidth and Docoment.documentElement.clientHeight Save the page window information. IE6 's promiscuous mode is passed through Document.body.clientWidth.

Resizeto () and Resizeby () method: Resize the browser window, but may be disabled by the browser.

5. Navigating and opening windows

window.open (): Navigates to a specified URL or opens a new browser window.

Parameters: Loaded URL, window target, attribute string, indicating whether the new page supersedes the Boolean value of the currently loaded page in the browser history.

① Pop-up window

The second parameter does not conform to create a new window or a new tab page based on the third parameter.

The close () method applies only to pop-up windows that are opened through window.open ().

② Security Restrictions

③ pop-up window masking program

window.open () returns null if the browser's built-in masking program blocks the popup window

Browser extensions or other programs block pop-up windows, window.open () throws an error. The window.open () call needs to be encapsulated in the Try-catch at the same time that the return value is detected.

        varblocked =false; Try {            varWroxwin = window.open ("http://www.wrox.com", "_blank"); if(Wroxwin = =NULL) {blocked=true; }        } Catch(ex) {blocked=true; }                if(blocked) {alert ("The Popup was blocked!"); }

6. Intermittent calls and timeout calls

Timeout Call: settmeout (function, number of milliseconds to wait time). JavaScript is a parser for a single-threaded program, and the code does not necessarily execute after that event.

Cancel: Cleartimeout ().

The code for the timeout call is executed at the global scope.

Intermittent invocation: SetInterval ()

Cancellation: Clearinterval ()

It is generally thought that using a timeout call to simulate intermittent calls is the best mode.

7. System dialog box

Alert (): Warning box.

Confirm () Confirmation box.

Prompt (): Prompt box, Parameters: Displays the text hint and the default value of the text input field.

Window.print (): Print dialog box

Window.find (): Find dialog box

Ii. Location Object

Location provides information about the documents loaded by the current window and provides some navigational features. It is both a property of the Window object and a property of the Docoment object.

1. Query string parameters

Location.search returns all content from the question mark to the end of the URL.

2. Position operation

Asign method: Opens the new URL immediately and generates a history in the browser. This method is also called by Location.href or window.location.

The properties of the location object can also change the currently loaded page such as hash, search, hostname, pathname, port. (earlier versions of IE, the hash attribute is not updated when the user clicks back forward, only when the URL containing the hash is clicked)

The replace () method causes the browser location to change, but does not generate a new record in the history and the user cannot go back to the previous page.

Reload () Reloads the currently displayed page. Reload may not execute after a method call (depending on factors such as network latency), it is a good idea to put reload () in the last line of code.

Third, navigator object

Identify the event criteria for the client browser, and each browser's navigator object has its own properties.

1. Detecting Plug-ins

for non-IE, you can use the plugins array , and each item of the array contains the following properties.

Name: Plugin Name

Description: Plugin Description

FileName: Plugin file name

Length: Number of MIME types processed by the plugin

        Detect plug-ins (not IE invalid)
        function Hasplugin (name) {            = name.tolowercase ();              for (var i=0; i < navigator.plugins.length; i++) {                if (Navigator.plugins[i]. Name.tolowercase (). IndexOf (name) >-1) {                    returntrue;                }            }                     returnfalse;        }

        //IE detection plug-in        function Hasieplugin (name) {            try  {                new  ActiveXObject (name);                 return true ;             Catch (ex) {                returnfalse;            }        }

The only way IE detects plug-ins is the ActiveXObject type, and attempts to wear a particular plug-in instance to be detected with a COM identifier. Instantiating with Try-catch is because creating an unknown COM object throws an error.

A typical practice is to create a detection function for each plug-in separately.

       // Detect Flash        function Hasflash () {            var result = Hasplugin ("Flash");             if (! result) {                = Hasieplugin ("Shockwaveflash.shockwaveflash");            }             return result;        }

2. Registration Handler

The Registercontenthandler () and Registerprotocolhandler () methods allow a site to indicate that it can handle specific types of information.

Registercontenthandler () receives three parameters: the name of the application to handle the URL of the MIME type of the page that can handle the MIME type.

Four, Screen object

Basic is used only to indicate the client's capabilities, including information about the display outside the browser window.

Five, the history of the object

Keep the history of the user surfing the Internet, the developer cannot know the URL that the user visited, but can realize forward and backward.

The Go () method takes an integer value, a positive number indicates a forward jump, a negative number means a backward jump, or a string argument, and the browser jumps to the first position in the history that contains the string.

The back () and forward () methods can also be moved backwards.

The Length property holds the number of history records.

JavaScript Advanced Programming notes (eight)