XP New Perspectives on DHTML, 2e Tutorial 5 1 Working with Windows and Frames DHTML Tutorial 5 Enhancing a Web Site with Interactive Windows

XP New Perspectives on DHTML, 2e Tutorial 5 2 Objectives Modify the appearance and behavior of browser windows Create messages that appear in the browser's status bar Automatically redirect your Web browser to new Web pages Create pop-up windows and modify their contents Work with the appearance, content, and behavior of frames and framesets

XP New Perspectives on DHTML, 2e Tutorial 5 3 Working with the Window Object The four main pages of the iMusicHistory home page: –A home page, describing the purpose and features –A Lessons page, containing an interactive lesson –A Quiz page, containing an online quiz –A Glossary page, containing musical terms

XP New Perspectives on DHTML, 2e Tutorial 5 4 Working with the Window Object To create status bar messages, work with properties of the window object: closedIndicates whether the window is closedBoolean defaultStatusThe default message in the window’s status barText innerHeightThe height of the window, excluding all toolbars, scroll bars, and other features Integer innerWidthThe width of the window, excluding all toolbars, scroll bars, and other features Integer

XP New Perspectives on DHTML, 2e Tutorial 5 5 Working with the Window Object locationThe URL of the document currently loaded in the window URL nameThe name of the windowText outerHeightThe height of the window, including toolbars, scroll bars, and other features Integer outerWidthThe width of the window, including all toolbars, scroll bars, and other features Integer statusThe current message in the window’s status barText

XP New Perspectives on DHTML, 2e Tutorial 5 6 Modifying the Status Bar Message Status bar messages are either permanent or transient A permanent status bar message appears in the status bar by default and is usually blank A transient status bar message appears in response to specific events that occur within the browser

XP New Perspectives on DHTML, 2e Tutorial 5 7 Creating a Status Bar Welcome Message for iMusicHistory To modify the permanent status bar message: window.defaultStatus = “message” –Changing this property can interfere with download progress messages –If downloading files is not an issue, you may use the property without concern –To create the iMusicHistory welcome message: onLoad=“window.defaultStatus= ‘Welcome to iMusicHistory( ”

XP New Perspectives on DHTML, 2e Tutorial 5 8 Creating Status Bar Messages for the iMusicHistory Hyperlinks Function to modify the transient status bar message: function showStatus(msg) { window.status=msg; return true; } Function call: onMouseOver=“return showStatus(‘Go to the iMusicHistory home page’)” To remove a transient message: onMouseOut=“return showStatus(‘ ’)”

XP New Perspectives on DHTML, 2e Tutorial 5 9 Working with the History and Location Objects The location object contains information about the page that is currently displayed in the browser The history object holds a list of the sites the Web browser has displayed before reaching the current page

XP New Perspectives on DHTML, 2e Tutorial 5 10 Moving Forward and Backward in the History List To move backward: history.back(); To move forward: history.forward(); As a hyperlink: Back

XP New Perspectives on DHTML, 2e Tutorial 5 11 Moving Forward and Backward in the History List Use the go() method to move to a specific page: history.go(integer); Where integer represents a particular page –Positive numbers move forward –Negative number move backward –Zero loads current page

XP New Perspectives on DHTML, 2e Tutorial 5 12 Automatic Page Navigation Two methods of automatic page navigation: –Add a command to the tag –Use a JavaScript program to redirect Combine both since JavaScript is not supported by all browsers

XP New Perspectives on DHTML, 2e Tutorial 5 13 Automatic Page Navigation To redirect a page using the tag: –Where sec is the time in seconds before the page loads –Where URL is the new page to be loaded –The time may be set to 0 so user does not detect redirection

XP New Perspectives on DHTML, 2e Tutorial 5 14 Automatic Page Navigation To redirect a page using JavaScript: window.location.href = “URL”; –Where URL is the new page to be loaded To add a delay, use setTimeout(): setTimeout(“window.location.href = ‘URL’ ”, msec); –Where msec is the delay time in milliseconds

XP New Perspectives on DHTML, 2e Tutorial 5 15 Security Issues Netscape history object also supports: history.current history.previous history.next document.referrer These properties require a signed script in order to access this information

XP New Perspectives on DHTML, 2e Tutorial 5 16 Creating New Browser Windows

XP New Perspectives on DHTML, 2e Tutorial 5 17 Opening New Windows with HTML To open a page in a new window : text –Where URL is the URL of the page to be loaded into a new browser window –Where WindowName is the name of the secondary window –You may reuse the same WindowName to replace contents in an already opened window

XP New Perspectives on DHTML, 2e Tutorial 5 18 Opening New Windows with JavaScript Using JavaScript to open a new window provides greater flexibility and more options To create a new window with JavaScript : window.open(“URL”, “WindowName”, “FeatureList”) –Where URL is the URL of the page to be displayed in the window –Where WindowName is the target name of the window –Where FeatureList is a list of features that control appearance and behavior of the window

XP New Perspectives on DHTML, 2e Tutorial 5 19 Working with Window Features

XP New Perspectives on DHTML, 2e Tutorial 5 20 Working with Window Features Chrome is all browser features outside the document window Choose features by creating a features list: “Feature1=value1,Feature2=value2,… FeatureN=valueN” Only a comma (not a comma and space) separates each of these pairs

XP New Perspectives on DHTML, 2e Tutorial 5 21 Working with Window Features Without a feature list, chrome features and size of current browser window are used With a feature list, the new window follows these rules: –When width or height are not specified, the width or height of the browser window is used –If a chrome feature is not listed, that feature will not appear in the window

XP New Perspectives on DHTML, 2e Tutorial 5 22 Working with Window Features To display the directory buttons, location box, menu bar, scroll bar, status bar, or toolbar, add the features: “directories=value,location=value,menubar=value, scrollbars=value,status=value,toolbar=value” –Where value is either “yes” (to show the feature) or “no” (to hide the feature)

XP New Perspectives on DHTML, 2e Tutorial 5 23 Working with Window Features To define width and height: “width=x,height=y” –For security reasons, you cannot create a window less than 100x100 pixels To set the screen position “left=x,top=y”

XP New Perspectives on DHTML, 2e Tutorial 5 24 Adding a Pop-up Window to the iMusicHistory Site

XP New Perspectives on DHTML, 2e Tutorial 5 25 Working with Multiple Windows Use JavaScript to control the interaction between browser windows: –Specify which window has focus –Remove focus from one window and give it to another –Allow users to move and resize windows –Automatically close windows

XP New Perspectives on DHTML, 2e Tutorial 5 26 Window Methods blur()Removes the focus from the window close()Closes the window focus()Gives the window the focus moveBy(dx, dy)Moves the window dx pixels right, and dy pixels down moveTo(x, y)Moves the window to the screen coordinates (x, y)

XP New Perspectives on DHTML, 2e Tutorial 5 27 Window Methods print()Prints the contents of the window resizeBy(dx, dy)Resizes the window by dx pixels to the right, and dy pixels down resizeTo(x, y)Resizes the window to x pixels wide by y pixels high scrollBy(dx, dy)Scrolls the document dx pixels to the right, and dy pixels down scrollTo(x, y)Scrolls the document to the page coordinates (x, y)

XP New Perspectives on DHTML, 2e Tutorial 5 28 Window Methods To give the focus to a window: WindowObject.focus(); To remove the focus from a window: WindowObject.blur(); To close a window: WindowObject.close(); –Where WindowObject is the name of the window

XP New Perspectives on DHTML, 2e Tutorial 5 29 Window Methods To move the window, use either: WindowObject.moveBy(dx, dy); WindowObject.moveTo(x, y); –Where dx and dy are the distance in pixels to shift –Where x and y are coordinates on the screen

XP New Perspectives on DHTML, 2e Tutorial 5 30 Window Methods To resize the window, use either: WindowObject.resizeBy(dx, dy); WindowObject.resizeTo(x, y); –Where dx and dy are the increase in width and height of the window –Where x and y are the width and height of the window

XP New Perspectives on DHTML, 2e Tutorial 5 31 The Self and Opener Windows Use the window name to keep track of windows Or use the keywords: self and opener –The self keyword refers to the active window self.close() is equivalent to window.close() –The opener keyword refers to the window or frame that opened the current window opener.close(); would close the window that opened the secondary window

XP New Perspectives on DHTML, 2e Tutorial 5 32 Writing Window Content for the iMusicHistory Quiz Modal window prohibits the user from doing anything else, such as the alert box Modeless window allows the user to work with other applications and perform other actions

XP New Perspectives on DHTML, 2e Tutorial 5 33 Using the document.write() Method The document.write() method allows you to write new content to a browser window. To specify which window, name the window object: WindowObject.document.write(“Content”); WindowObject.document.close();

XP New Perspectives on DHTML, 2e Tutorial 5 34 Modal and Modeless Windows with Internet Explorer Beginning with IE 4.0, you can create a modal window: ReturnValue=window.showModalDialog(“URL”, “WindowName”, “FeatureList”); Beginning with IE 5.0, you can create a modeless window: ReturnValue=window.showModelessDialog(“URL”, “WindowName”, “FeatureList”); Both methods provide options for a features list

XP New Perspectives on DHTML, 2e Tutorial 5 35 Working With Frames

XP New Perspectives on DHTML, 2e Tutorial 5 36 Working With Frames

XP New Perspectives on DHTML, 2e Tutorial 5 37 Working With Frames To identifying frames in HTML, use the name property To identifying frames in JavaScript, use the id property For more clear code, apply the same name using both id and name properties:

XP New Perspectives on DHTML, 2e Tutorial 5 38 Working with the Frame Object Each frame is a member of the frames collection Frames may be referenced by the index number of the frame: WindowObject.frames[i] Frames may also be referenced by the id value using either syntax: WindowObject.frames[“id”] WindowObject.id

XP New Perspectives on DHTML, 2e Tutorial 5 39 The Top and Parent Windows parent – the object immediately above the current object in the DOM top – the object at the top of the DOM, in the case of frames this is the topmost frameset

XP New Perspectives on DHTML, 2e Tutorial 5 40 Working with Frames As Windows All three DOMs allow you to treat frames as windows within windows Consequently, many of the window methods and properties may be applied to frames To change the frame’s source document: FrameObject.location.href = “URL”; To write to the frame: FrameObject.document.write(Content); FrameObject.document.close();

XP New Perspectives on DHTML, 2e Tutorial 5 41 Formatting the Appearance of a Frame The IE and W3C DOMs let you format the frame’s appearance: borderColorSets color of frame borderIE4+ frameBorderSpecifies whether to display frame borderNS6+ IE4+ heightSpecifies the height of frame, in pixelsIE4+ marginHeightThe height of the interior margin of the frame, in pixels NS6+ IE4+ marginWidthThe width of the interior margin of the frame, in pixels NS6+ IE4+

XP New Perspectives on DHTML, 2e Tutorial 5 42 Formatting the Appearance of a Frame nameThe name of the frameNS6+ IE4+ noResizeSpecifies whether the user can resize the frameNS6+ IE4+ scrollingSpecifies whether scroll bars will appear in the frameNS6+ IE4+ srcThe URL of the frame sourceNS6+ IE4+ widthThe width of the frame in pixelsIE4+

XP New Perspectives on DHTML, 2e Tutorial 5 43 Formatting a Frameset The IE and W3C DOMs let control the behavior and appearance of the entire frameset: For IE: WindowObject.id For W3C: WindowObject.document.getElementById(“id”) –Where id is the id property value for the frameset

XP New Perspectives on DHTML, 2e Tutorial 5 44 Formatting a Frameset borderSets the thickness of the spaces between the frames, in pixels IE4+ borderColorSets the border color of frames within the framesetIE4+ colsSpecifies the width of the columns (frames) in the frameset, in pixels NS6+ IE4+ frameBorderSpecifies whether to display borders between frames in the frameset IE4+ frameSpacingSpecifies the amount of spacing, in pixels, between frames within the frameset IE4+ rowsSpecifies the height of the rows (frames) in the frameset, in pixels NS6+ IE4+

XP New Perspectives on DHTML, 2e Tutorial 5 45 Blocking Unwanted Frames Other sites may open up your entire web page within one of their frames You can prevent this from happening through JavaScript

XP New Perspectives on DHTML, 2e Tutorial 5 46 Blocking Unwanted Frames The following code will check whether the web page is opened within another frame If it is, then the page will be jump to the top of the hierarchy and replace the frame if (top.location.href != self.location.href) { top.location.href = self.location.href; }

XP New Perspectives on DHTML, 2e Tutorial 5 47 Forcing Pages into a Frameset You can use similar code to force the display of pages into a frameset: if (top.location.href == self.location) { top.location.href = “URL”; }

XP New Perspectives on DHTML, 2e Tutorial 5 48 Review Use window properties to modify the appearance and behavior of browser windows Create messages that appear in the browser's status bar using the defaultStatus and status window properties Use the tag and window.location.href property to automatically redirect your Web browser to new Web pages

XP New Perspectives on DHTML, 2e Tutorial 5 49 Review Use window.open() to create pop-up windows and modify their contents Work with frame and frameset properties to modify the appearance, content, and behavior of frames and framesets