1. Copyright ©2005 Department of Computer & Information Science Advanced DHTML & DOM: Working with the Window Object

2. Copyright ©2005 Department of Computer & Information Science Goals By the end of this lecture you should … Understand how to create new windows using the window.open() method.Understand how to create new windows using the window.open() method. Understand how to reference new windows and their values.Understand how to reference new windows and their values. continued …

3. Copyright ©2005 Department of Computer & Information Science Goals By the end of this lecture you should … Understand how to use the window.focus(), window.blur() and window.close() methods.Understand how to use the window.focus(), window.blur() and window.close() methods. Understand how to use the window.opener attribute object.Understand how to use the window.opener attribute object.

4. Copyright ©2005 Department of Computer & Information Science Introducing the Window Object Weve already seen a few of the window objects methods, including window.alert(), window.prompt(), etc.Weve already seen a few of the window objects methods, including window.alert(), window.prompt(), etc. However, JavaScript also gives us the ability to create new windows and open documents in them (or, if we want, write dynamic content to them).However, JavaScript also gives us the ability to create new windows and open documents in them (or, if we want, write dynamic content to them).

5. Copyright ©2005 Department of Computer & Information Science window.open() Method We can use the window.open() method to create a new window.We can use the window.open() method to create a new window. The method takes three arguments (all strings):The method takes three arguments (all strings): –URL to open in the new window –Target name for the new window –Optional window features variableName = window.open(URL,target,features)

6. Copyright ©2005 Department of Computer & Information Science New Window Features height (pixel value)height (pixel value) width (pixel value)width (pixel value) location (yes | no)location (yes | no) menubar (yes | no)menubar (yes | no) resizable (yes | no)resizable (yes | no) scrollbars (yes | no)scrollbars (yes | no) status (yes | no)status (yes | no) toolbar (yes | no)toolbar (yes | no) top (pixel value)top (pixel value) left (pixel value)left (pixel value)

7. Copyright ©2005 Department of Computer & Information Science Additional Methods window.focus() – Brings a window to the top of the stacking order & gives the keyboard focus in that window.window.focus() – Brings a window to the top of the stacking order & gives the keyboard focus in that window. window.blur() – Moves the keyboard focus away from a window.window.blur() – Moves the keyboard focus away from a window. window.close() – Closes a window and removes it from memory.window.close() – Closes a window and removes it from memory.

8. Copyright ©2005 Department of Computer & Information Science Open the file called theWindowObject_01.html

9. Copyright ©2005 Department of Computer & Information Science The opener Object The opener attribute object refers to a parent window that opens another window.The opener attribute object refers to a parent window that opens another window. We can control various attributes of the opener, like the location.href attribute, from the newly opened window.We can control various attributes of the opener, like the location.href attribute, from the newly opened window.

10. Copyright ©2005 Department of Computer & Information Science Open the file called theWindowObject_02.html

11. Copyright ©2005 Department of Computer & Information Science Open the file called theWindowObject_03.html

12. Copyright ©2005 Department of Computer & Information Science Summary To open a new window, we use the window.open() method.To open a new window, we use the window.open() method. We can specify a URL to open, a target name and window features as parameters for window.open().We can specify a URL to open, a target name and window features as parameters for window.open(). Some of the new window features include things like height, width, the presence of toolbars/scrollbars and positioning attributes, among others.Some of the new window features include things like height, width, the presence of toolbars/scrollbars and positioning attributes, among others. continued …

13. Copyright ©2005 Department of Computer & Information Science Summary window.focus() brings a window to the top of the stacking order.window.focus() brings a window to the top of the stacking order. window.close() removes a window from view.window.close() removes a window from view. The window.opener attribute object refers to the window that created another window.The window.opener attribute object refers to the window that created another window.