JavaScript

1. JavaScript Window object

2. Window Object • The JavaScript Window Object top level object in JavaScript and corresponds to the web browser window. • Windows can be opened and closed from other windows. • Windows components can be turned on and off with JavaScript.

3. Pop up windows • The JavaScript window object has been extensively used to manipulate both HTML framesets and pop-up windows. Framesets have been dropped from the latest versions of both HTML (Version 5) and XHTML (Version 2) due primarily to accessibility issues. • Although still supported, pop-up windows have been so widely abused and discredited that all the major browsers and most internet security applications have utilities that enable the user to prevent pop-ups being displayed. • It is risky to rely on pop-up windows to deliver important information to potential customers as they simply may not see it.

4. Window anatomy • menubar -- This is the bar with "File" and "Edit" in it. • toolbar -- The basic button bar used for navigation. • location -- The address bar where you type in URLs. • directories -- All of the cute little add on buttons and custom toolbars. • scrollbars -- The bars that allow you to scroll up, down, and across a page. • status -- The narrow status bar at the very bottom of the window.

5. Methods

6. Methods

7. Properties

8. Properties

9. Opening a new window newWind = window.open('date.html', 'newWin', 'width=400, height=300, status=yes, resizable=yes'); This code opens a new window called newWin loads the page date.html, with a width of 400 pixels, height of 300 pixels, with status bar and will allow the user to resize the window.

10. Window styling • If you don't code any change in the new window, it will pop up with the same styling as the parent window. Scrollbars are automatic by default. • In all the styling that is to follow, “0" means "no" or "off", and "1" means "yes" or "on". height=300, width=100, resizable,menubar, toolbar, location, Directories, scrollbars, status

11. Frames • A frame is a window within a window. Using frames allows you to divide a browser window into a collection of panes. Each pane can then be used to display a separate document. • As far as JavaScript is concerned, each frame can be treated as a separate window. In fact, each frame has its own Window object.

12. Window object of the frame • JavaScript establishes relationships between the Window objects of frames, creating a hierarchy of Window objects. • Each frame is stored as an element in the frames[] array of the Window object of the parent window for that frame. • The contents of each element of the frames[] array is a Window object for the frame pane in question.

13. Frames array <frameset cols="200,*"> <frame name="frame1" src="document1.html" /> <frame name="frame2" src="document2.html" /> </frameset> Three window objects • Top level window that contains the frameset • 2 frames each with their own window object • Children of the top level window

14. Frames array • The child windows are contained within the frames[] array. • Can be addressed by their index positions • Window.frames[0] and • Window.frames[1] • Could also be addressed by their names attributes • Window.frame1 and • Window.frame2

15. Parent and top • The Window object has some properties specifically designed to address the situation of having a hierarchical arrangement of windows. These are top and parent. • window.parent refers to the Window object of the parent window. Thus, in the above coding snippet, if you wanted to use some code in frame1 to change something in frame2, you could address it with the following: window.parent.frame2.someElement.

16. Framebusting • Another useful thing you can do with JavaScript is create a framebuster, which prevents a document from loading into another frame. The code for it is as follows: if (window.location.href != window.top.location.href) { window.top.location.replace(window.location.href); }

17. Reverse framebusting • To make sure that a document always occurs in a frame set you can do the following: if (window.location.href == window.top.location.href) { window.top.location.replace('mainframe.html'); }

18. End