Project 5: Using Pop-Up Windows Essentials for Design JavaScript Level One Michael Brooks Copyright (c) 2004 Prentice-Hall. All rights reserved. 2 Objectives Create window objects with JavaScript Control features of the browser window Use the window.close() method Use focus() and blur() Manipulate window properties Copyright (c) 2004 Prentice-Hall. All rights reserved. 3 Why Would I Do This? HTML allowed programmers: To link to other documents To open new browser windows using the _blank option of the target attribute of an tag Windows created in JavaScript are commonly referred to as pop-up windows A pop-up window is simply another browser window that can show any URL Copyright (c) 2004 Prentice-Hall. All rights reserved. 4 Why Would I Do This? (continued) When a pop-up window appears on the screen, it draws focus away from the main window: This is often undesirable for Web site designers who: use pop-up windows to display advertisements do not want users to lose interest in the main page Copyright (c) 2004 Prentice-Hall. All rights reserved. 5 Why Would I Do This? (continued) Many users find pop-up windows annoying because they get in the way of normal computer usage For this reason many users install pop-up blockers many designers choose to keep essential content out of pop-up windows. Copyright (c) 2004 Prentice-Hall. All rights reserved. 6 Why Would I Do This? (continued) You can create new window objects using the open() method of the window object In this project, you learn how to create and use pop-up windows Copyright (c) 2004 Prentice-Hall. All rights reserved. 7 Visual Summary Pop-up windows are simply browser windows created in JavaScript Various aspects of the browser window are either turned off or disabled in pop-up windows The features of the browser window that you can turn on or off using JavaScript The features of the browser window that you can turn on or off using JavaScript Copyright (c) 2004 Prentice-Hall. All rights reserved. 8 Visual Summary (continued) Location bar Menu bar Toolbar Status bar Scroll bar Copyright (c) 2004 Prentice-Hall. All rights reserved. 9 Visual Summary (continued) The open() method: Generates a new window and creates a new window object. the following statement opens a blank browser window: open(); Includes several optional parameters that you can set: the attributes are separated by commas within the parentheses and occupy a specific order. using pseudo-code, the open() method takes the general form of: open(url,name,features,replace); Copyright (c) 2004 Prentice-Hall. All rights reserved. 10 Visual Summary (continued) open("http://www.againsttheclock.com"); Notice that you indicate the protocol (http:) as part of the Web site address The protocol is required because the URL is an external URL, which simply means you are opening a page outside the local Web site Not only is this an external URL, it is also an absolute reference, which means you are specifying the complete path of the file you want to open. Copyright (c) 2004 Prentice-Hall. All rights reserved. 11 Visual Summary (continued) The link is also a relative reference because the path to the file is written relative to the current document The code tells JavaScript to look in the same directory as the currently open file The name attribute sets the name of the window object Assuming you want to open a blank window and assign a name attribute of myWindow, you should use the following command: open("","myWindow"); Copyright (c) 2004 Prentice-Hall. All rights reserved. 12 Visual Summary (continued) Features refer to attributes of the browser window; they occupy the third parameter of the open() method using JavaScript, you can control whether the new window includes scroll bars and toolbars, as well as state the height and width of the browser window the replace attribute: allows you to specify whether the URL of the pop-up window replaces the current entry in the browsers history list is a Boolean variable, which means its value is either true or false Copyright (c) 2004 Prentice-Hall. All rights reserved. 13 Visual Summary (continued) The close() method closes the associated browser window Security measures in modern browsers only allow you to close windows you have created Windows created by the operating system: display a warning message when a Web page tries to close the window include the window that is opened when you open your Web browser or that are triggered when you choose a Web page by opening a file without first opening the browser Copyright (c) 2004 Prentice-Hall. All rights reserved. 14 Visual Summary (continued) Consider the following code as an example: var myWindow = window.open(); myWindow.close(); window.close(); The term window always means the current window object When you view this code within a Web page: The browser closes the window you created in the code Generates a confirmation window before closing the primary window This is a security feature built into the browser Example of closing a window Example of closing a window Copyright (c) 2004 Prentice-Hall. All rights reserved. 15 Visual Summary (continued) Primary page closing confirmation window Copyright (c) 2004 Prentice-Hall. All rights reserved. 16 Visual Summary (continued) The closed property tells you if a window object represents an open browser window If the window is open, the closed property is false If the window is closed, the closed property is true If you want to know whether adWindow is open or closed, you can include a statement such as: document.write("The status of the closed window property is "+adWindow.closed); Copyright (c) 2004 Prentice-Hall. All rights reserved. 17 Creating Window Objects with JavaScript Window objects represent the browser window and appear at the top of the object model You can use simple JavaScript or HTML statements to create window objects Copyright (c) 2004 Prentice-Hall. All rights reserved. 18 Creating Window Objects with JavaScript (continued) For example: the following HTML code creates a new browser window (known as a window object in JavaScript) when the user clicks a link on the page: link you can create a similar statement in JavaScript using the following line of code: onClick="window.open('products.html');" Copyright (c) 2004 Prentice-Hall. All rights reserved. 19 Creating Window Objects with JavaScript (continued) The JavaScript open() method allows you to create pop-up windows Manipulating various attributes of this method allows you to create and control browser windows with more flexibility than HTML allows Copyright (c) 2004 Prentice-Hall. All rights reserved. 20 Creating Window Objects with JavaScript (continued) For example the following statement creates a window that displays a page called products.html at a height of 200 pixels, width of 400 pixels, no scroll bars, no menu bar, and no location bar: window.open("products.html","","height=200,width=400,scrollbars=no,menubar=no,location=no"); You can use the open() method to create: a simple browser window a complex pop-up window that contains a number of controlled features Copyright (c) 2004 Prentice-Hall. All rights reserved. 21 Creating Window Objects with JavaScript (continued) Create a Window Object with an External URL You can create a window object and load an external URL loading a relative URL is very similar In most programming environments, you must specify the protocol (http:) before linking to external Web sites Example of creating a window object and loading an external URL Example of creating a window object and loading an external URL Copyright (c) 2004 Prentice-Hall. All rights reserved. 22 Creating Window Objects with JavaScript (continued) openexternal.html window.open("http://www.againsttheclock.com"); This code is creating a window object and loads an external URL Copyright (c) 2004 Prentice-Hall. All rights reserved. 23 Creating Window Objects with JavaScript (continued) Create a Window with a Relative URL You can create a pop-up window to display a local file You can also use the open() method to open a blank Web page in a browser window Example of using the open() method to create pop-up window to display a local file Example of using the open() method to create pop-up window to display a local file Copyright (c) 2004 Prentice-Hall. All rights reserved. 24 Creating Window Objects with JavaScript (continued) openinternal.html window.open("products.html"); This code is using the open() method to create pop-up window to display a local file Copyright (c) 2004 Prentice-Hall. All rights reserved. 25 Creating Window Objects with JavaScript (continued) Create a Blank Window If you use about:blank in a URL field, the browser generates a blank window When you use the open() method, the statements window.open("") window.open() window.open("about:blank") All open a blank browser window Example of creating a blank window using about:blank Example of creating a blank window using about:blank Copyright (c) 2004 Prentice-Hall. All rights reserved. 26 Creating Window Objects with JavaScript (continued) openblank.html window.open("about:blank"); This code is using the open() method to create pop-up window to display a local file Copyright (c) 2004 Prentice-Hall. All rights reserved. 27 Creating Window Objects with JavaScript (continued) Name a Window Object It is usually best to: use a variable name to name a pop-up window use the name attribute of the open() method to name the object: myWindow=window.open("about:blank","myWindow"); You can control the window object using the object name and dot syntax the moveTo() method moves the browser window after it appears Example of naming and moving a window object Copyright (c) 2004 Prentice-Hall. All rights reserved. 28 Creating Window Objects with JavaScript (continued) openname.html myPopup=window.open("about:blank", "myPopup"); myPopup.moveTo(300,200); This code is using the open() method to create a named pop-up window and move it Copyright (c) 2004 Prentice-Hall. All rights reserved. 29 Controlling Features of the Browser Window The primary reason to use pop-up windows is to control various features of the browser window To accomplish this, you manipulate the features parameter of the open() method The features parameter allows developers: To turn on menu bars, toolbars, and scroll bars To control the width and height aspects of the pop-up window Copyright (c) 2004 Prentice-Hall. All rights reserved. 30 Controlling Features of the Browser Window (continued) The features parameter always appears as the third option in the open() method Any options you specify appear within the quotes of this parameter, and are separated by commas Features of the window object are: turned on with the keyword yes turned off with the keyword no, such as: scrollbars=no Copyright (c) 2004 Prentice-Hall. All rights reserved. 31 Controlling Features of the Browser Window (continued) Options of the features parameter of the open() method Directories option the directories option of the open() method allows the directory buttons to appear the command: open("","","directories=yes"); turns on the directories option The Directories bar The Directories bar Copyright (c) 2004 Prentice-Hall. All rights reserved. 32 Controlling Features of the Browser Window (continued) Directories bar Copyright (c) 2004 Prentice-Hall. All rights reserved. 33 Controlling Features of the Browser Window (continued) Location option the location option includes the URL location box to activate the location box, type open("","","location=yes) to avoid confusing users, it is best to either turn on the toolbar, menu bar, and location bar, or turn all these options off it is not good practice to turn on one or two, and leave the other option/s turned off Location Bar Location Bar Copyright (c) 2004 Prentice-Hall. All rights reserved. 34 Controlling Features of the Browser Window (continued) Location bar Copyright (c) 2004 Prentice-Hall. All rights reserved. 35 Controlling Features of the Browser Window (continued) Menubar option the menubar option turns on the browsers menu bar the command open("","","menubar=yes"); turns on the menubar option Menu bar Copyright (c) 2004 Prentice-Hall. All rights reserved. 36 Controlling Features of the Browser Window (continued) Resizable option if a particular window is best viewed at a specific size, you might opt to restrict the user from resizing the open window the resizable option determines whether the user is allowed to resize the window once it is opened the command open("","","resizable=yes"); allows the user to resize an open window Copyright (c) 2004 Prentice-Hall. All rights reserved. 37 Controlling Features of the Browser Window (continued) Scrollbars option the scrollbars option determines whether the scroll bars appear if you do not specify this option, scroll bars do not appear on most browsers to activate the scrollbars option, type: open("","","scrollbars=yes");. Copyright (c) 2004 Prentice-Hall. All rights reserved. 38 Controlling Features of the Browser Window (continued) Status option the status option turns on the browsers status bar, which appears at the bottom of the window in most browsers the status bar displays URLs when the user rolls over links you can also use it to deliver messages to the user the command: open("","","status=yes"); opens a window with the status bar enabled Copyright (c) 2004 Prentice-Hall. All rights reserved. 39 Controlling Features of the Browser Window (continued) Toolbar option when creating a pop-up window, you can specify whether the window displays toolbars by entering toolbar=yes in the features parameter of the open() method the command : open("","","toolbar=yes"); opens a window with the toolbar enabled Copyright (c) 2004 Prentice-Hall. All rights reserved. 40 Controlling Features of the Browser Window (continued) Height option unlike the other options of the features parameter, you must specify a value for height and width, instead of simply specifying yes or no, the command : open("","","height=200"); opens a blank window with a height of 200 pixels. Copyright (c) 2004 Prentice-Hall. All rights reserved. 41 Controlling Features of the Browser Window (continued) Width option you can also specify the width of the browser window in the features parameter of the open() method the command : open=("","","width=200"); opens a blank window with a width of 200 pixels Copyright (c) 2004 Prentice-Hall. All rights reserved. 42 Controlling Features of the Browser Window (continued) Change a Windows Width and Height You can create pop-up windows and control their widths and heights Example of controlling the width of a pop-up window Example of controlling the width of a pop-up window Example of controlling the height of a pop-up window Example of controlling the height of a pop-up window Example of controlling the width and the height of a pop-up window Example of controlling the width and the height of a pop-up window Copyright (c) 2004 Prentice-Hall. All rights reserved. 43 Controlling Features of the Browser Window (continued) width.html window.open("","","width=200"); A second browser window opens at the specified width Copyright (c) 2004 Prentice-Hall. All rights reserved. 44 Controlling Features of the Browser Window (continued) A second browser window opens at the specified height height.html window.open("","","height=200"); Copyright (c) 2004 Prentice-Hall. All rights reserved. 45 Controlling Features of the Browser Window (continued) A second browser window opens at the specified height WidthHeight.html window.open("","","width=200,height=200"); Copyright (c) 2004 Prentice-Hall. All rights reserved. 46 Controlling Features of the Browser Window (continued) Control the Toolbar and Menu Bar You can write code that turns on or off when the window opens: the browsers menu bar the browsers tool bar Examples of turning on or off the browsers menu bar and tool bar Examples of turning on or off the browsers menu bar and tool bar Copyright (c) 2004 Prentice-Hall. All rights reserved. 47 Using the window.close() Method (continued) To close a window, you can use the JavaScript close() method Developers can instruct JavaScript to close pop-up windows in different ways such as: clicking a button on the page triggering the close() method from a script in another file Copyright (c) 2004 Prentice-Hall. All rights reserved. 48 Using the window.close() Method (continued) Close the Current Browser Window The close() method is used to close the current browser window closecurrent.html window.close(); Copyright (c) 2004 Prentice-Hall. All rights reserved. 49 Using the window.close() Method (continued) The page appears without the toolbar toolbar.html window.open("http://www.againsttheclock. com","","toolbar=no"); Copyright (c) 2004 Prentice-Hall. All rights reserved. 50 Using the window.close() Method (continued) The page appears with the toolbar toolbar.html window.open("http://www.againsttheclock. com","","toolbar=yes"); Copyright (c) 2004 Prentice-Hall. All rights reserved. 51 Using the window.close() Method (continued) The page appears with the toolbar and menu bar toolbar.html window.open("http://www.againsttheclock. com","","toolbar=yes,menubar=yes"); Copyright (c) 2004 Prentice-Hall. All rights reserved. 52 Using the window.close() Method (continued) Use an Inline Event to Close a Window Two browser windows appear. If you click on the link, the pop-up window closes, and the original window remains open inlineclose.html close the pop-up myPopup=window.open("about:blank","m yPopup"); Copyright (c) 2004 Prentice-Hall. All rights reserved. 53 Using focus() and blur() Methods You can use the focus() and blur() methods to control the focus of window objects: When a window has focus, it receives notification of keys pressed on the users keyboard When a window is blurred: it is not selected and does not receive notification of keys pressed on the users keyboard all commands are directed to the window that is in focus Copyright (c) 2004 Prentice-Hall. All rights reserved. 54 Using focus() and blur() Methods (continued) Blur() The blur() method removes focus from a specified window A blurred window no longer receives keystrokes from the users keyboard When one window is blurred, another window comes into focus; the blurred window moves behind the open window that is currently in focus Copyright (c) 2004 Prentice-Hall. All rights reserved. 55 Using focus() and blur() Methods (continued) The end user discovers the pop-under when he finishes browsing To blur a window, you can use a statement such as: var myWindow=window.open(); myWindow.blur(); Copyright (c) 2004 Prentice-Hall. All rights reserved. 56 Using focus() and blur() Methods (continued) Focus() The focus() method: changes focus to the specified window object has the same effect as a user clicking in or on a window to make it the active window Once a window is in focus: it appears in front of the other windows keystrokes are directed to that window. Copyright (c) 2004 Prentice-Hall. All rights reserved. 57 Using focus() and blur() Methods (continued) Assuming you opened a window called adWindow, you could use the following command to change the focus to adWindow: adWindow.focus(); Copyright (c) 2004 Prentice-Hall. All rights reserved. 58 Using focus() and blur() Methods (continued) Create a Pop-Under Ad You can create a pop-under window by: first creating a pop-up window then blurring the window to make it appear behind the main browser window When you blur a pop-up, you automatically draw focus to the remaining browser window Copyright (c) 2004 Prentice-Hall. All rights reserved. 59 Using focus() and blur() Methods (continued) Browser windows are normally sized at 100% of the available screen size, which completely obscures blurred windows from view if the user resizes the browser window to take up a smaller portion of the screen, however, part of a blurred window may remain visible Copyright (c) 2004 Prentice-Hall. All rights reserved. 60 Using focus() and blur() Methods (continued) A simple pop-up window with a blank page displays popunder.html myPopup=window.open("about:blank","my Popup","width=200,height=180"); Copyright (c) 2004 Prentice-Hall. All rights reserved. 61 Using focus() and blur() Methods (continued) This code places the pop-up window behind the main browser window popunder.html myPopup=window.open("about:blank","my Popup","width=200,height=180"); // blur the window to make it pop under the main browser window myPopup.blur(); Copyright (c) 2004 Prentice-Hall. All rights reserved. 62 Using focus() and blur() Methods (continued) Draw Focus to a Window You can use the focus() method to draw focus back to the main window after a pop-up window was created the pop-up window moves behind the main browser window (in most browsers) keystroke control returns to the main window This method often keeps users from becoming distracted by the pop-up window Copyright (c) 2004 Prentice-Hall. All rights reserved. 63 Manipulating Window Properties Window objects have specific properties you can access and use For example: the closed property tells the developer if a particular window object is currently open or closed if you wanted to know if a window was closed, you could use a statement to output the value stored in the closed property to the user document.write(thePopup.closed); Copyright (c) 2004 Prentice-Hall. All rights reserved. 64 Manipulating Window Properties (continued) The defaultStatus Property You can use the defaultStatus property of the window object to place a message in the status bar of a pop-up window When you use the defaultStatus property to insert a message, the message remains visible unless a status message is displayed Copyright (c) 2004 Prentice-Hall. All rights reserved. 65 Manipulating Window Properties (continued) A message appears in the status bar of the pop-up window defaultstatus.html myWindow=window.open("about:blank ","myWindow","height=210,width=3 80,status=yes"); Copyright (c) 2004 Prentice-Hall. All rights reserved. 66 Manipulating Window Properties (continued) Use the closed Property You can use the closed property to determine whether a window was currently open or closed: if the window is closed, the closed property is true if the window is open, the closed property is false Copyright (c) 2004 Prentice-Hall. All rights reserved. 67 Manipulating Window Properties (continued) This simple script generates a blank pop-up browser window closedproperty.html adWindow=open("about:blank","adWindow","st atus=no, toolbar=no, resizable=no, width=200,height=200, scrollbars=no, menubar=no, location=no"); document.write(" "); Copyright (c) 2004 Prentice-Hall. All rights reserved. 68 Manipulating Window Properties (continued) closedproperty.html adWindow=open("about:blank","adWindow","status =no, toolbar=no, resizable=no, width=200,height=200, scrollbars=no, menubar=no, location=no"); document.write(" "); document.write("The closed property for the adWindow is "+adWindow.closed); document.write(" "); Since the window is open, the closed property is false Copyright (c) 2004 Prentice-Hall. All rights reserved. 69 Manipulating Window Properties (continued) closedproperty.html This is the main page of our site. adWindow=open("about:blank","adWindow","status=no, toolbar=no, resizable=no, width=200,height=200, scrollbars=no, menubar=no, location=no"); document.write(" "); document.write("The closed property for the adWindow is "+adWindow.closed); document.write(" "); adWindow.close(); document.write("The closed property for the adWindow is "+adWindow.closed); The closed property is considered false until the window closes