Window object
The core object of the BOM is window, which represents an instance of the browser. In the browser, the Window object has a dual role, which is both an interface for accessing the browser window through JavaScript, and the global object specified by the ECMAScript. This means that any object, variable, and function defined in a Web page, with window as its global object, has access to methods such as parseint ().
Global scope
Because the window object plays the role of the global object in ECMAScript, all variables and functions declared in the global scope become properties and methods of the Window object.
var age =; function Sayage () { alert (this/////// in
Global variables cannot be deleted through the delete operator, and the properties defined directly on the Window object can.
var == "Red"; // throw an error at IE < 9 and return false in all other browsers Delete Window.age; // throws an error at IE < 9 and returns true in all other browsers Delete // returns True // in // undefined
The Window property that you just added with the VAR statement has an attribute named [[Configurable]], and the value of this attribute is set to False, so the defined property cannot be deleted by the delete operator. IE8 and earlier when you encounter a statement that uses Delete to delete the Window property, it throws an error, regardless of how the property was originally created, as a warning. IE9 and later versions do not throw errors.
Attempting to access an undeclared variable throws an error, but by querying the Window object, you can know if a variable that might not be declared exists.
// this throws an error, because OldValue is undefined var newvalue = oldValue; // This does not throw an error, because this is a property query // the value of newvalue is undefined var newvalue = Window.oldvalue;
Window relationships and frameworks
If the page contains frames, each frame has its own window object and is saved in the Frames collection. In the Frames collection, the corresponding Window object can be accessed by a numeric index (starting at 0, from left to right, top to bottom), or by a frame name. Each Window object has a Name property that contains the names of the frames. The following is a page that contains frames:
The above code creates a frameset with one frame, two frames. For this example, the frame above can be referenced by window.frames[0] or window.frames["Topframe". However, I'm afraid you'd better use top instead of window to refer to these frameworks (for example, through Top.frames[0]).
We know that the top object always points to the highest (most outer) layer of the frame, which is the browser window. Use it to ensure that another frame is properly accessed in one frame. Because for any code written in a framework, the window object points to a specific instance of that frame, not the top-level frame. Figure 8-1 shows the different ways to access each of the frames in the previous example in the top-level window with code.
The other window object that is relative to top is the parent. As the name implies, the parent object always points to the immediate upper frame of the current frame. In some cases, the parent may be equal to top, but in the absence of a frame, the parent must be equal to top (at which point they are equal to window).
One of the frameworks in this frameset contains another frameset, and the code for that frameset is shown below.
After the first frameset is loaded, the browser continues to load the second frameset into Rightframe. If the code is in Redframe (or blueframe), then the parent object points to Rightframe. However, if the code is in Topframe, the parent points to top, because the direct upper frame of the topframe is the outermost frame.
Note that unless the top-level window is opened by window.open () (discussed later in this chapter), the Name property of its window object will not contain any values.
The last object associated with the framework is self, which always points to the window, and in fact, the Self and Window objects can be used interchangeably. The purpose of introducing the Self object is only to correspond to the top and parent objects, so it does not contain extra values.
All of these objects are properties of the Window object and can be accessed in the form of Window.parent, Window.top, and so on. At the same time, this also means that different levels of window objects can be concatenating up, such as window.parent.parent.frames[0].
Window position
There are many properties and methods used to determine and modify the location of the Window object. IE, Safari, Opera, and chrome all provide screenleft and Screentop properties that represent the position of the window relative to the left and top of the screen, respectively. Firefox provides the same window location information in the Screenx and Screeny properties, and Safari and Chrome also support both properties. Although opera also supports the Screenx and Screeny properties, it does not correspond to the Screenleft and Screentop properties, so it is recommended that you do not use them in opera. Use the following code to get the left and top positions of the window across the browser.
var leftpos = (typeofWindow.screenLeft:window.screenX; var toppos = (typeofWindow.screenTop:window.screenY;
This example uses the two-dollar operator to first determine whether the Screenleft and Screentop attributes are present, and if so (in IE, Safari, Opera, and Chrome), the values of the two properties are obtained. If it does not exist (in Firefox), the values for Screenx and Screeny are obtained.
In the process of using these values, you must also pay attention to some minor problems. In IE, Opera, screenleft and Screentop are saved in the distance from the left and top of the screen to the visible area of the page represented by the Window object. In other words, if the window object is the outermost object and the browser window is close to the top of the screen-that is, the Y coordinate is 0-then the screentop value is the pixel height of the browser toolbar above the visible area of the page. However, in Chrome, Firefox, and Safari, ScreenY or screentop is the coordinate value of the entire browser window relative to the screen, which returns 0 at the window's y coordinate of 0 o'clock.
Even more elusive is that Firefox, Safari, and Chrome always return the Top.screenx and Top.screeny values for each frame in the page. Even if the page is offset by a set margin, the same value will be returned each time you use Screenx and screeny relative to the Window object. IE and opera give the exact coordinate values of the frame relative to the screen boundary.
The end result is that the exact coordinate values of the left and top edges of the window cannot be obtained under cross-browser conditions. However, it is possible to use the MoveTo () and Moveby () methods to move the window precisely to a new position. Both methods receive two parameters, where MoveTo () receives the x and Y coordinate values of the new position, and Moveby () receives the number of pixels moving in both horizontal and vertical directions.
// Move the window to the upper-left corner of the screen Window.moveto (0,0); // move the window down 100 pixels window.moveby (0,100); // Move the window to (200,300)Window.moveto (200,300); // Move the window to the left 50 pixels Window.moveby ( -50,0);
It is important to note that these two methods may be disabled by the browser and, in opera and IE 7 (and later), are disabled by default. In addition, neither of these methods is applicable to frames, only to the outermost window object.
Window size
JS Advanced Programming (VII) BOM